{"name":"fancy-ui","version":2,"homepage":"https://fancy-ui.rama.app","llms":"https://fancy-ui.rama.app/llms.txt","packages":{"svelte":{"name":"fancy-ui-svelte","install":"npm install fancy-ui-svelte","registry":"https://fancy-ui.rama.app/r/svelte/registry.json"},"react":{"name":"fancy-ui-react","install":"npm install fancy-ui-react","registry":"https://fancy-ui.rama.app/r/registry.json"},"vue":{"name":"fancy-ui-vue","install":"npm install fancy-ui-vue","registry":"https://fancy-ui.rama.app/r/vue/registry.json"}},"count":156,"components":[{"name":"GradientButton","slug":"gradient-button","description":"Dark button with a beam of light that travels around its border and casts a soft coloured glow inside the face; the glow brightens on hover","category":"buttons","group":"fancy","tags":["button","gradient","animation","rainbow","border","beam","glow","cta"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["GradientButton"]},"react":{"package":"fancy-ui-react","names":["GradientButton"]},"vue":{"package":"fancy-ui-vue","names":["GradientButton"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/gradient-button.md","react":"https://fancy-ui.rama.app/docs/components/react/gradient-button.md","vue":"https://fancy-ui.rama.app/docs/components/vue/gradient-button.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/gradient-button.json","react":"https://fancy-ui.rama.app/r/gradient-button.json","vue":"https://fancy-ui.rama.app/r/vue/gradient-button.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/gradient-button","props":[{"name":"colors","type":"string[]","default":"[\"#34d399\",\"#22d3ee\",\"#6366f1\",\"#d946ef\",\"#f43f5e\",\"#f59e0b\"]","description":"Colours of the beam, spread along its arc"},{"name":"duration","type":"number","default":"3000","description":"Time for the beam to travel once around the button, in milliseconds"},{"name":"borderWidth","type":"number","default":"1.5","description":"Width of the lit border in pixels"},{"name":"borderRadius","type":"number","default":"12","description":"Border radius in pixels"},{"name":"blur","type":"number","default":"4","description":"Softness of the glow the beam casts inside the button, in pixels"},{"name":"bgColor","type":"string","default":"\"#161616\"","description":"Background color of the button face"},{"name":"sound","type":"boolean","default":"false","description":"Plays the press cue on activation, once the user has enabled sound"},{"name":"onclick","type":"(event: MouseEvent) => void","description":"Click handler, called after the press cue when sound is on"}],"snippets":[{"name":"children","description":"Button content"}],"events":[],"examples":["Basic Usage","Custom Colors","Border Width & Blur","Animation Speed","Border Radius","Background Color","Interactive Playground"]},{"name":"InteractiveHoverButton","slug":"interactive-hover-button","description":"Button whose dot opens into a circle that fills it on hover, while the label rolls up and out and returns with an arrow","category":"buttons","group":"fancy","tags":["button","hover","animation","interactive","reveal"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["InteractiveHoverButton"]},"react":{"package":"fancy-ui-react","names":["InteractiveHoverButton"]},"vue":{"package":"fancy-ui-vue","names":["InteractiveHoverButton"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/interactive-hover-button.md","react":"https://fancy-ui.rama.app/docs/components/react/interactive-hover-button.md","vue":"https://fancy-ui.rama.app/docs/components/vue/interactive-hover-button.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/interactive-hover-button.json","react":"https://fancy-ui.rama.app/r/interactive-hover-button.json","vue":"https://fancy-ui.rama.app/r/vue/interactive-hover-button.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/interactive-hover-button","props":[{"name":"text","type":"string","default":"\"Button\"","description":"Button label text (used when children slot is not provided)"},{"name":"sound","type":"boolean","default":"false","description":"Plays the press cue on activation, once the user has enabled sound"},{"name":"onclick","type":"(event: MouseEvent) => void","description":"Click handler, called after the press cue when sound is on"}],"snippets":[{"name":"children","description":"Button content (overrides text prop)"}],"events":[],"examples":["Basic Usage","Custom Text","Custom Styling"]},{"name":"Pressable","slug":"pressable","description":"A wrapper that gives any interactive child a consistent, cross-browser press animation — scale down on pointerdown/keydown, back to rest on release, with a static opacity fallback under reduced motion","category":"buttons","group":"fancy","tags":["press","tap","scale","haptic","animation","micro-interaction"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Pressable"]},"react":{"package":"fancy-ui-react","names":["Pressable"]},"vue":{"package":"fancy-ui-vue","names":["Pressable"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/pressable.md","react":"https://fancy-ui.rama.app/docs/components/react/pressable.md","vue":"https://fancy-ui.rama.app/docs/components/vue/pressable.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/pressable.json","react":"https://fancy-ui.rama.app/r/pressable.json","vue":"https://fancy-ui.rama.app/r/vue/pressable.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/pressable","props":[{"name":"scale","type":"number","default":"0.97","description":"Target scale() factor while pressed"},{"name":"haptic","type":"false | \"light\" | \"medium\" | \"heavy\" | \"success\" | \"error\"","default":"false","description":"Touch-only vibration pattern fired on pointerdown; false never vibrates"},{"name":"disabled","type":"boolean","default":"false","description":"Suppresses every listener; data-pressed never appears"},{"name":"class","type":"string","description":"Additional CSS classes, merged onto the wrapper"},{"name":"ref","type":"HTMLDivElement | null","default":"null","description":"Bindable reference to the wrapper element"}],"snippets":[{"name":"children","description":"Exactly one interactive child (documented, not enforced at runtime)"}],"events":[],"examples":["Basic Usage","With Haptics"]},{"name":"RainbowButton","slug":"rainbow-button","description":"Animated button with a rainbow gradient border; on hover or focus a rainbow beam rides around the border with a soft halo. Other native attributes are forwarded to the rendered element","category":"buttons","group":"fancy","tags":["button","animation","rainbow","gradient","cta","beam","hover","glow"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["RainbowButton"]},"react":{"package":"fancy-ui-react","names":["RainbowButton"]},"vue":{"package":"fancy-ui-vue","names":["RainbowButton"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/rainbow-button.md","react":"https://fancy-ui.rama.app/docs/components/react/rainbow-button.md","vue":"https://fancy-ui.rama.app/docs/components/vue/rainbow-button.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/rainbow-button.json","react":"https://fancy-ui.rama.app/r/rainbow-button.json","vue":"https://fancy-ui.rama.app/r/vue/rainbow-button.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/rainbow-button","props":[{"name":"speed","type":"number","default":"2","description":"Animation speed in seconds"},{"name":"href","type":"string","description":"Render as anchor element when provided"},{"name":"sound","type":"boolean","default":"false","description":"Plays the press cue on activation, once the user has enabled sound"},{"name":"type","type":"\"button\" | \"submit\" | \"reset\"","default":"\"button\"","description":"Native button type, ignored when rendered as an anchor"},{"name":"disabled","type":"boolean","description":"Disables the button and suppresses the press cue"},{"name":"onclick","type":"(event: MouseEvent) => void","description":"Called once per activation, after the optional sound cue; never while disabled."}],"snippets":[{"name":"children","description":"Button label content"}],"events":[],"examples":["Basic Usage","Animation Speed","With Icons","Disabled State","As Link","Custom Styling"]},{"name":"RippleButton","slug":"ripple-button","description":"Button that answers each click with a ripple of light from the click point, a soft glow and two fine rings spreading out like a wave; on hover a glow follows the pointer with a faint ring pulsing from it","category":"buttons","group":"fancy","tags":["button","ripple","click","animation","material"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["RippleButton"]},"react":{"package":"fancy-ui-react","names":["RippleButton"]},"vue":{"package":"fancy-ui-vue","names":["RippleButton"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/ripple-button.md","react":"https://fancy-ui.rama.app/docs/components/react/ripple-button.md","vue":"https://fancy-ui.rama.app/docs/components/vue/ripple-button.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/ripple-button.json","react":"https://fancy-ui.rama.app/r/ripple-button.json","vue":"https://fancy-ui.rama.app/r/vue/ripple-button.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/ripple-button","props":[{"name":"rippleColor","type":"string","default":"\"#60a5fa\"","description":"Colour of the ripple: its glow, its rings and the border tint"},{"name":"duration","type":"number","default":"900","description":"Animation duration in milliseconds"},{"name":"sound","type":"boolean","default":"false","description":"Plays the press cue on activation, once the user has enabled sound"},{"name":"onclick","type":"(event: MouseEvent) => void","description":"Click handler, called after the press cue when sound is on"},{"name":"onpointermove","type":"(event: PointerEvent) => void","description":"Pointer-move handler, called after the hover highlight is updated"}],"snippets":[{"name":"children","description":"Button content"}],"events":[],"examples":["Basic Usage","Custom Ripple Colors","Animation Duration","Custom Styling","Multiple Ripples"]},{"name":"ShimmerButton","slug":"shimmer-button","description":"Pill button with a satin sheen: a soft band of light sweeps across the face and lifts the label, then rests; on hover the highlight follows the pointer","category":"buttons","group":"fancy","tags":["button","shimmer","gradient","animation","cta"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["ShimmerButton"]},"react":{"package":"fancy-ui-react","names":["ShimmerButton"]},"vue":{"package":"fancy-ui-vue","names":["ShimmerButton"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/shimmer-button.md","react":"https://fancy-ui.rama.app/docs/components/react/shimmer-button.md","vue":"https://fancy-ui.rama.app/docs/components/vue/shimmer-button.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/shimmer-button.json","react":"https://fancy-ui.rama.app/r/shimmer-button.json","vue":"https://fancy-ui.rama.app/r/vue/shimmer-button.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/shimmer-button","props":[{"name":"shimmerColor","type":"string","default":"\"#ffffff\"","description":"Colour of the sheen, rim and hover highlight"},{"name":"shimmerSize","type":"string","default":"\"0.05em\"","description":"Thickness of the rim that catches the sheen"},{"name":"borderRadius","type":"string","default":"\"100px\"","description":"Button border radius"},{"name":"shimmerDuration","type":"string","default":"\"3s\"","description":"Duration of one sheen cycle: the sweep, then a pause"},{"name":"background","type":"string","default":"\"rgba(0, 0, 0, 1)\"","description":"Button background color"},{"name":"sound","type":"boolean","default":"false","description":"Plays the press cue on activation, once the user has enabled sound"},{"name":"onclick","type":"(event: MouseEvent) => void","description":"Click handler, called after the press cue when sound is on"},{"name":"onpointermove","type":"(event: PointerEvent) => void","description":"Pointer-move handler, called after the hover highlight is updated"}],"snippets":[{"name":"children","description":"Button content"}],"events":[],"examples":["Basic Usage","Shimmer Colors","Animation Speed","Shimmer Size","Custom Background","Border Radius"]},{"name":"SunSwitch","slug":"sun-switch","description":"A theme switch drawn as a pixel sun. Hover it for a lens on its true colours; click it and the new theme spreads from the sun in a dithered, grid-aligned wave.","category":"buttons","group":"fancy","tags":["switch","theme","dark mode","pixel","dither","view transition","canvas"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["SunSwitch"]},"react":{"package":"fancy-ui-react","names":["SunSwitch"]},"vue":{"package":"fancy-ui-vue","names":["SunSwitch"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/sun-switch.md","react":"https://fancy-ui.rama.app/docs/components/react/sun-switch.md","vue":"https://fancy-ui.rama.app/docs/components/vue/sun-switch.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/sun-switch.json","react":"https://fancy-ui.rama.app/r/sun-switch.json","vue":"https://fancy-ui.rama.app/r/vue/sun-switch.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/sun-switch","props":[{"name":"checked","type":"boolean","default":"true","description":"Day (true) or night (false). Bindable."},{"name":"onCheckedChange","type":"(checked: boolean) => void","description":"Called with the new value from inside the view transition's update callback. Flip your theme here; the component never changes classes on the document. Flip the theme synchronously: the new snapshot is taken as soon as it returns."},{"name":"radius","type":"number","default":"10","description":"Sun radius in cells. The canvas is 2 × radius + 1 cells square."},{"name":"cell","type":"number","default":"5","description":"Grid pitch in CSS pixels, shared by the sun, the wave front and its halo."},{"name":"dot","type":"number","default":"4","description":"Size of each square dot in CSS pixels (at most `cell`)."},{"name":"palette","type":"[string, string, string, string]","default":"SUN_PALETTE","description":"Four colours from the top of the sun to the bottom. The halo reuses them: densest rim in the last colour, sparse fringe in the first."},{"name":"ink","type":"string","default":"\"currentColor\"","description":"Monochrome colour of the night sun and the horizon outside the lens. Resolved from the computed colour of the button, so it follows the theme."},{"name":"nightAlpha","type":"number","default":"0.42","description":"Opacity of the ink sun at night."},{"name":"horizon","type":"boolean","default":"true","description":"Draws a few sparse rows of dots under the sun for the lens to reveal."},{"name":"lens","type":"boolean","default":"true","description":"On hover, a soft circular lens follows the pointer and shows the true colours under it."},{"name":"lensRadius","type":"number","default":"7","description":"Lens radius in cells; about two thirds of the sun reads best."},{"name":"mode","type":"\"document\" | \"contained\"","default":"\"document\"","description":"`document` runs the wave as a view transition over the whole page. `contained` paints it over `scope` only, with a sheet of the old colour that the wave cuts away."},{"name":"scope","type":"HTMLElement | null","description":"The element the wave covers in contained mode. It needs `position: relative` and `overflow: hidden`."},{"name":"fill","type":"string","description":"Colour of the old-state sheet in contained mode and browsers without view transitions. Defaults to the first opaque background found from `scope` (or the body) upwards."},{"name":"duration","type":"number","default":"1300","description":"Duration of the wave in milliseconds (ease in-out cubic)."},{"name":"haloCells","type":"number","default":"9","description":"Thickness of the dithered halo that leads the wave front, in cells."},{"name":"hdr","type":"boolean","default":"true","description":"On HDR displays with WebGPU, redraws the sun and the wave halo as hard squares brighter than SDR white. Elsewhere nothing is created."},{"name":"sound","type":"boolean","default":"false","description":"Plays the toggle cue (on for day, off for night) through the sound controller, once the user has enabled sound."},{"name":"label","type":"string","default":"\"Day mode\"","description":"Accessible name of the switch. Its checked state is announced as on or off."},{"name":"disabled","type":"boolean","default":"false","description":"Blocks interaction."},{"name":"class","type":"string","description":"Additional CSS classes on the button."}],"snippets":[],"events":[],"examples":["Basic Usage","Contained","Custom Trigger","Interactive Playground"]},{"name":"AppleCardCarousel","slug":"apple-card-carousel","description":"Horizontal card carousel where the focused card expands into a spring-animated full-screen view","category":"cards","group":"fancy","tags":["carousel","cards","animation","spring","scroll"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["AppleCardCarousel"]},"react":{"package":"fancy-ui-react","names":["AppleCardCarousel"]},"vue":{"package":"fancy-ui-vue","names":["AppleCardCarousel"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/apple-card-carousel.md","react":"https://fancy-ui.rama.app/docs/components/react/apple-card-carousel.md","vue":"https://fancy-ui.rama.app/docs/components/vue/apple-card-carousel.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/apple-card-carousel.json","react":"https://fancy-ui.rama.app/r/apple-card-carousel.json","vue":"https://fancy-ui.rama.app/r/vue/apple-card-carousel.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/apple-card-carousel","props":[{"name":"cards","type":"AppleCardData[]","description":"Cards to display in the carousel","required":true},{"name":"sound","type":"boolean","default":"false","description":"Plays open when a card expands and close when it is dismissed, once the user has enabled sound"}],"snippets":[],"events":[],"examples":["Basic Usage"]},{"name":"BentoGrid","slug":"bento-grid","description":"Grid of framed tiles, each a hairline frame around a softly top-lit panel, where an accent glow rises from below on hover while the content lifts and the call to action slides in, and the tiles fade up in a stagger the first time the grid scrolls into view.","category":"cards","group":"fancy","tags":["grid","layout","bento","cards","dashboard"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["BentoGrid"]},"react":{"package":"fancy-ui-react","names":["BentoGrid"]},"vue":{"package":"fancy-ui-vue","names":["BentoGrid"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/bento-grid.md","react":"https://fancy-ui.rama.app/docs/components/react/bento-grid.md","vue":"https://fancy-ui.rama.app/docs/components/vue/bento-grid.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/bento-grid.json","react":"https://fancy-ui.rama.app/r/bento-grid.json","vue":"https://fancy-ui.rama.app/r/vue/bento-grid.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/bento-grid","props":[{"name":"class","type":"string","default":"''","description":"Additional grid classes"},{"name":"reveal","type":"boolean","default":"true","description":"Tiles fade up in a short stagger the first time the grid scrolls into view"},{"name":"accent","type":"string","default":"undefined","description":"Colour of the hover glow, the lit bottom edge, the icon ring and the CTA arrow; writes --bento-accent (falls back to #8e9cff)"},{"name":"BentoGridItem.class","type":"string","default":"\"\"","description":"Additional classes for the tile"},{"name":"BentoGridItem.header","type":"Snippet","description":"Snippet rendered at the top of the tile, typically an image or visual"},{"name":"BentoGridItem.icon","type":"Snippet","description":"Snippet for the tile's icon"},{"name":"BentoGridItem.title","type":"Snippet","description":"Snippet for the tile's title"},{"name":"BentoGridItem.description","type":"Snippet","description":"Snippet for the tile's description"},{"name":"BentoGridCard.name","type":"string","description":"Title of the card"},{"name":"BentoGridCard.description","type":"string","description":"Short text under the title"},{"name":"BentoGridCard.href","type":"string","description":"Link target of the call to action"},{"name":"BentoGridCard.cta","type":"string","description":"Label of the call to action"},{"name":"BentoGridCard.class","type":"string","default":"\"\"","description":"Additional classes for the card"},{"name":"BentoGridCard.icon","type":"Snippet","description":"Snippet for the card's icon"},{"name":"BentoGridCard.background","type":"Snippet","description":"Snippet rendered behind the card's content"}],"snippets":[{"name":"children","description":"BentoGridItem components to arrange in the grid"}],"events":[],"examples":["Basic Usage","Card Variant"]},{"name":"Book","slug":"book","description":"3D book component with cover, spine, and back face that opens on hover","category":"cards","group":"fancy","tags":["card","book","3d","hover","animation"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Book"]},"react":{"package":"fancy-ui-react","names":["Book"]},"vue":{"package":"fancy-ui-vue","names":["Book"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/book.md","react":"https://fancy-ui.rama.app/docs/components/react/book.md","vue":"https://fancy-ui.rama.app/docs/components/vue/book.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/book.json","react":"https://fancy-ui.rama.app/r/book.json","vue":"https://fancy-ui.rama.app/r/vue/book.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/book","props":[{"name":"duration","type":"number","default":"1000","description":"Hover animation duration in ms"},{"name":"color","type":"BookColor","default":"\"zinc\"","description":"Color theme for the book cover gradient"},{"name":"isStatic","type":"boolean","default":"false","description":"Show book in open position without hover animation"},{"name":"size","type":"BookSize","default":"\"md\"","description":"Size variant of the book"},{"name":"radius","type":"BookRadius","default":"\"md\"","description":"Border radius variant"},{"name":"shadowSize","type":"BookShadowSize","default":"\"lg\"","description":"Drop shadow size variant"}],"snippets":[{"name":"children","description":"Content rendered on the book cover (front face)"}],"events":[],"examples":["Basic Usage","Color Variants","Sizes"]},{"name":"Card3D","slug":"card-3d","description":"Interactive 3D perspective card with depth effects on child elements","category":"cards","group":"fancy","tags":["card","3d","perspective","hover","animation","interactive"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["CardBody","CardContainer","CardItem"]},"react":{"package":"fancy-ui-react","names":["CardContainer","CardBody","CardItem"]},"vue":{"package":"fancy-ui-vue","names":["CardContainer","CardBody","CardItem"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/card-3d.md","react":"https://fancy-ui.rama.app/docs/components/react/card-3d.md","vue":"https://fancy-ui.rama.app/docs/components/vue/card-3d.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/card-3d.json","react":"https://fancy-ui.rama.app/r/card-3d.json","vue":"https://fancy-ui.rama.app/r/vue/card-3d.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/card-3d","props":[{"name":"containerClass","type":"string","default":"\"\"","description":"CSS classes for the outer perspective wrapper"}],"snippets":[{"name":"children","description":"CardBody and CardItem elements"}],"events":[],"examples":["Basic Usage","High Depth"]},{"name":"CardSpotlight","slug":"card-spotlight","description":"Card whose radial-gradient spotlight tracks the cursor as it moves inside, fading in on hover and parking itself off-canvas when the pointer leaves, with configurable gradient size, color, and opacity","category":"cards","group":"fancy","tags":["card","spotlight","mouse","gradient","interactive","hover"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["CardSpotlight"]},"react":{"package":"fancy-ui-react","names":["CardSpotlight"]},"vue":{"package":"fancy-ui-vue","names":["CardSpotlight"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/card-spotlight.md","react":"https://fancy-ui.rama.app/docs/components/react/card-spotlight.md","vue":"https://fancy-ui.rama.app/docs/components/vue/card-spotlight.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/card-spotlight.json","react":"https://fancy-ui.rama.app/r/card-spotlight.json","vue":"https://fancy-ui.rama.app/r/vue/card-spotlight.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/card-spotlight","props":[{"name":"slotClass","type":"string","default":"\"\"","description":"CSS classes for the inner content wrapper"},{"name":"gradientSize","type":"number","default":"200","description":"Size of the spotlight gradient in pixels"},{"name":"gradientColor","type":"string","default":"\"#262626\"","description":"Color of the spotlight gradient"},{"name":"gradientOpacity","type":"number","default":"0.8","description":"Opacity of the spotlight gradient"}],"snippets":[{"name":"children","description":"Card content"}],"events":[],"examples":["Basic Usage","Custom Colors"]},{"name":"DirectionAwareHover","slug":"direction-aware-hover","description":"Image card with overlay that slides in from the mouse entry direction","category":"cards","group":"fancy","tags":["card","hover","image","animation","direction","interactive"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["DirectionAwareHover"]},"react":{"package":"fancy-ui-react","names":["DirectionAwareHover"]},"vue":{"package":"fancy-ui-vue","names":["DirectionAwareHover"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/direction-aware-hover.md","react":"https://fancy-ui.rama.app/docs/components/react/direction-aware-hover.md","vue":"https://fancy-ui.rama.app/docs/components/vue/direction-aware-hover.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/direction-aware-hover.json","react":"https://fancy-ui.rama.app/r/direction-aware-hover.json","vue":"https://fancy-ui.rama.app/r/vue/direction-aware-hover.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/direction-aware-hover","props":[{"name":"imageUrl","type":"string","description":"URL of the background image","required":true},{"name":"imageAlt","type":"string","default":"\"image\"","description":"Alt text for the image"},{"name":"childrenClass","type":"string","default":"\"\"","description":"CSS classes for the overlay content wrapper"},{"name":"imageClass","type":"string","default":"\"\"","description":"CSS classes for the image element"}],"snippets":[{"name":"children","description":"Content shown in the overlay when hovered"}],"events":[],"examples":["Basic Usage","Multiple Cards"]},{"name":"FlipCard","slug":"flip-card","description":"Card that flips in 3D to reveal its back, on hover (plus focus and tap) or as a click toggle; it lifts and lands with a slight overshoot, keeps turning the way the pointer travels, and its faces catch a sweeping sheen and shade edge-on","category":"cards","group":"fancy","tags":["card","flip","3d","hover","click","toggle","animation","interactive"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["FlipCard"]},"react":{"package":"fancy-ui-react","names":["FlipCard"]},"vue":{"package":"fancy-ui-vue","names":["FlipCard"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/flip-card.md","react":"https://fancy-ui.rama.app/docs/components/react/flip-card.md","vue":"https://fancy-ui.rama.app/docs/components/vue/flip-card.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/flip-card.json","react":"https://fancy-ui.rama.app/r/flip-card.json","vue":"https://fancy-ui.rama.app/r/vue/flip-card.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/flip-card","props":[{"name":"rotate","type":"\"x\" | \"y\"","default":"\"y\"","description":"Axis of rotation for the flip effect"},{"name":"trigger","type":"\"hover\" | \"click\"","default":"\"hover\"","description":"Hover flips on pointer hover, keyboard focus and tap; click makes the card a toggle button (click, tap, Enter, Space)"},{"name":"flipped","type":"boolean","default":"false","description":"Whether the back is showing. Bindable"},{"name":"onflip","type":"(flipped: boolean) => void","description":"Called with the new state after every flip"},{"name":"duration","type":"number","default":"700","description":"Length of one flip in milliseconds"},{"name":"glare","type":"boolean","default":"true","description":"Light the faces as they turn: a sweeping sheen and an edge-on shade"},{"name":"label","type":"string","description":"Accessible name for the card"},{"name":"class","type":"string","description":"Additional classes; size the card here (default h-72 w-56)"}],"snippets":[{"name":"children","description":"Front face content"},{"name":"back","description":"Back face content"}],"events":[],"examples":["Basic Usage","X-Axis Rotation","Click to Flip","Multiple Cards"]},{"name":"GlareCard","slug":"glare-card","description":"Holographic trading card effect with mouse-tracking glare and rainbow foil","category":"cards","group":"fancy","tags":["card","glare","holographic","mouse","3d","foil","interactive"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["GlareCard"]},"react":{"package":"fancy-ui-react","names":["GlareCard"]},"vue":{"package":"fancy-ui-vue","names":["GlareCard"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/glare-card.md","react":"https://fancy-ui.rama.app/docs/components/react/glare-card.md","vue":"https://fancy-ui.rama.app/docs/components/vue/glare-card.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/glare-card.json","react":"https://fancy-ui.rama.app/r/glare-card.json","vue":"https://fancy-ui.rama.app/r/vue/glare-card.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/glare-card","props":[],"snippets":[{"name":"children","description":"Card content rendered inside the holographic surface"}],"events":[],"examples":["Basic Usage","Multiple Cards"]},{"name":"TextRevealCard","slug":"text-reveal-card","description":"Card that reveals text on horizontal mouse drag with animated star particles","category":"cards","group":"fancy","tags":["card","text","reveal","drag","interactive","particles"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["TextRevealCard"]},"react":{"package":"fancy-ui-react","names":["TextRevealCard"]},"vue":{"package":"fancy-ui-vue","names":["TextRevealCard"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/text-reveal-card.md","react":"https://fancy-ui.rama.app/docs/components/react/text-reveal-card.md","vue":"https://fancy-ui.rama.app/docs/components/vue/text-reveal-card.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/text-reveal-card.json","react":"https://fancy-ui.rama.app/r/text-reveal-card.json","vue":"https://fancy-ui.rama.app/r/vue/text-reveal-card.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/text-reveal-card","props":[{"name":"starsCount","type":"number","default":"130","description":"Number of star particles in the background"},{"name":"starsClass","type":"string","default":"\"\"","description":"CSS classes for the stars container"}],"snippets":[{"name":"children","description":"Content rendered above the reveal area (e.g., title)"},{"name":"text","description":"Text shown in the revealed layer (dragged to reveal)"},{"name":"revealText","description":"Text visible in the background star layer"}],"events":[],"examples":["Basic Usage","Fewer Stars"]},{"name":"BlurReveal","slug":"blur-reveal","description":"Scroll-triggered reveal that unblurs and slides each direct child into place as the container enters the viewport, staggering up to 10 children via CSS nth-child delays and respecting reduced motion","category":"text","group":"fancy","tags":["animation","reveal","blur","scroll","stagger"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["BlurReveal"]},"react":{"package":"fancy-ui-react","names":["BlurReveal"]},"vue":{"package":"fancy-ui-vue","names":["BlurReveal"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/blur-reveal.md","react":"https://fancy-ui.rama.app/docs/components/react/blur-reveal.md","vue":"https://fancy-ui.rama.app/docs/components/vue/blur-reveal.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/blur-reveal.json","react":"https://fancy-ui.rama.app/r/blur-reveal.json","vue":"https://fancy-ui.rama.app/r/vue/blur-reveal.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/blur-reveal","props":[{"name":"duration","type":"number","default":"1","description":"Animation duration in seconds"},{"name":"delay","type":"number","default":"0.2","description":"Stagger delay between children in seconds"},{"name":"blur","type":"string","default":"\"20px\"","description":"Initial blur amount (CSS value)"},{"name":"yOffset","type":"number","default":"20","description":"Initial vertical offset in pixels"},{"name":"mode","type":"\"blur\" | \"hard\"","default":"\"blur\"","description":"Reveal style: blur softens in with blur/translate, hard snaps opacity with no easing"}],"snippets":[{"name":"children","description":"Content elements to reveal with staggered animation"}],"events":[],"examples":["Basic Usage","Custom Duration","Heavy Blur","Staggered Cards","Hard Snap"]},{"name":"BoxReveal","slug":"box-reveal","description":"Reveal animation where a solid color box slides left to right across content on viewport entry, unveiling it as it fades up into place underneath, triggered once via IntersectionObserver","category":"text","group":"fancy","tags":["text","animation","reveal","scroll","entrance"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["BoxReveal"]},"react":{"package":"fancy-ui-react","names":["BoxReveal"]},"vue":{"package":"fancy-ui-vue","names":["BoxReveal"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/box-reveal.md","react":"https://fancy-ui.rama.app/docs/components/react/box-reveal.md","vue":"https://fancy-ui.rama.app/docs/components/vue/box-reveal.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/box-reveal.json","react":"https://fancy-ui.rama.app/r/box-reveal.json","vue":"https://fancy-ui.rama.app/r/vue/box-reveal.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/box-reveal","props":[{"name":"color","type":"string","default":"\"#5046e6\"","description":"Color of the reveal box"},{"name":"duration","type":"number","default":"0.5","description":"Animation duration in seconds"},{"name":"delay","type":"number","default":"0.25","description":"Delay before animation starts in seconds"}],"snippets":[{"name":"children","description":"Content to reveal"}],"events":[],"examples":["Basic Usage","Custom Colors","Slow Animation"]},{"name":"ColourfulText","slug":"colourful-text","description":"Per-character text animation where each glyph transitions to a new color from a shuffled palette, staggered across characters and reshuffling automatically every 5 seconds using pure CSS transitions","category":"text","group":"fancy","tags":["text","animation","color","gradient","typography"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["ColourfulText"]},"react":{"package":"fancy-ui-react","names":["ColourfulText"]},"vue":{"package":"fancy-ui-vue","names":["ColourfulText"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/colourful-text.md","react":"https://fancy-ui.rama.app/docs/components/react/colourful-text.md","vue":"https://fancy-ui.rama.app/docs/components/vue/colourful-text.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/colourful-text.json","react":"https://fancy-ui.rama.app/r/colourful-text.json","vue":"https://fancy-ui.rama.app/r/vue/colourful-text.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/colourful-text","props":[{"name":"text","type":"string","description":"Text to animate","required":true},{"name":"colors","type":"string[]","default":"[10 preset colors]","description":"Array of colors to cycle through"},{"name":"startColor","type":"string","default":"\"rgb(255, 255, 255)\"","description":"Initial color before animation"},{"name":"duration","type":"number","default":"0.5","description":"Transition duration in seconds for each character"}],"snippets":[],"events":[],"examples":["Basic Usage","Custom Colors","Transition Speed","Longer Text"]},{"name":"ContainerTextFlip","slug":"container-text-flip","description":"Text container that cycles through words with per-character blur animation","category":"text","group":"fancy","tags":["text","animation","words","cycling","blur","typography"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["ContainerTextFlip"]},"react":{"package":"fancy-ui-react","names":["ContainerTextFlip"]},"vue":{"package":"fancy-ui-vue","names":["ContainerTextFlip"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/container-text-flip.md","react":"https://fancy-ui.rama.app/docs/components/react/container-text-flip.md","vue":"https://fancy-ui.rama.app/docs/components/vue/container-text-flip.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/container-text-flip.json","react":"https://fancy-ui.rama.app/r/container-text-flip.json","vue":"https://fancy-ui.rama.app/r/vue/container-text-flip.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/container-text-flip","props":[{"name":"words","type":"string[]","default":"[\"better\",\"modern\",\"beautiful\",\"awesome\"]","description":"Array of words to cycle through"},{"name":"interval","type":"number","default":"3000","description":"Time between word changes in ms"},{"name":"animationDuration","type":"number","default":"700","description":"Per-character animation duration in ms"},{"name":"textClass","type":"string","default":"\"\"","description":"CSS classes for the text content span"}],"snippets":[],"events":[],"examples":["Basic Usage","Custom Words","Fast Interval"]},{"name":"DisplacementText","slug":"displacement-text","description":"3D text with WebGL displacement that follows the cursor using Three.js shaders","category":"text","group":"fancy","tags":["text","webgl","3d","displacement","cursor","shader","threejs"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["DisplacementText"]},"react":{"package":"fancy-ui-react","names":["DisplacementText"]},"vue":{"package":"fancy-ui-vue","names":["DisplacementText"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/displacement-text.md","react":"https://fancy-ui.rama.app/docs/components/react/displacement-text.md","vue":"https://fancy-ui.rama.app/docs/components/vue/displacement-text.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/displacement-text.json","react":"https://fancy-ui.rama.app/r/displacement-text.json","vue":"https://fancy-ui.rama.app/r/vue/displacement-text.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/displacement-text","props":[{"name":"text","type":"string","default":"\"Hover Me\"","description":"Text to display"},{"name":"fontSize","type":"number","default":"200","description":"Font size in pixels"},{"name":"font","type":"string","default":"\"Inter, sans-serif\"","description":"Font family"},{"name":"color","type":"string","description":"Fixed text color (overrides theme colors)"},{"name":"lightColor","type":"string","default":"\"#000000\"","description":"Text color in light mode"},{"name":"darkColor","type":"string","default":"\"#ffffff\"","description":"Text color in dark mode"},{"name":"maxDpr","type":"number","default":"2","description":"Upper bound for the renderer's device pixel ratio"}],"snippets":[],"events":[],"examples":["Basic Usage","Custom Color","Theme Aware"]},{"name":"EditorialEngine","slug":"editorial-engine","description":"Live magazine layout: multi-column text flowing around draggable orbs with zero DOM reads, powered by pretext","category":"text","group":"fancy","tags":["text","layout","magazine","columns","pretext","interactive","typography"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["EditorialEngine"]},"react":{"package":"fancy-ui-react","names":["EditorialEngine"]},"vue":{"package":"fancy-ui-vue","names":["EditorialEngine"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/editorial-engine.md","react":"https://fancy-ui.rama.app/docs/components/react/editorial-engine.md","vue":"https://fancy-ui.rama.app/docs/components/vue/editorial-engine.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/editorial-engine.json","react":"https://fancy-ui.rama.app/r/editorial-engine.json","vue":"https://fancy-ui.rama.app/r/vue/editorial-engine.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/editorial-engine","props":[{"name":"headline","type":"string","default":"built-in copy","description":"Auto-sized headline (largest font size that breaks no word)"},{"name":"body","type":"string","default":"built-in copy","description":"Body text, paragraphs separated by blank lines"},{"name":"pullquotes","type":"string[]","default":"built-in quotes","description":"Up to two pullquotes embedded in the columns"},{"name":"fontFamily","type":"string","default":"Palatino serif stack","description":"Font family stack used for all text"},{"name":"class","type":"string","description":"Additional CSS classes for the stage"}],"snippets":[],"events":[],"examples":["Basic Usage"]},{"name":"FlipWords","slug":"flip-words","description":"Cycling word animation with per-letter fade-in and blur effects","category":"text","group":"fancy","tags":["text","animation","words","cycling","typography","blur"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["FlipWords"]},"react":{"package":"fancy-ui-react","names":["FlipWords"]},"vue":{"package":"fancy-ui-vue","names":["FlipWords"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/flip-words.md","react":"https://fancy-ui.rama.app/docs/components/react/flip-words.md","vue":"https://fancy-ui.rama.app/docs/components/vue/flip-words.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/flip-words.json","react":"https://fancy-ui.rama.app/r/flip-words.json","vue":"https://fancy-ui.rama.app/r/vue/flip-words.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/flip-words","props":[{"name":"words","type":"string[]","description":"Array of words to cycle through","required":true},{"name":"duration","type":"number","default":"3000","description":"Time each word stays visible in ms"}],"snippets":[],"events":[],"examples":["Basic Usage","Fast Cycling","Multi-Word Phrases"]},{"name":"Focus","slug":"focus","description":"Text component that cycles focus through words with blur and corner frame","category":"text","group":"fancy","tags":["text","animation","focus","blur","words","typography"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Focus"]},"react":{"package":"fancy-ui-react","names":["Focus"]},"vue":{"package":"fancy-ui-vue","names":["Focus"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/focus.md","react":"https://fancy-ui.rama.app/docs/components/react/focus.md","vue":"https://fancy-ui.rama.app/docs/components/vue/focus.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/focus.json","react":"https://fancy-ui.rama.app/r/focus.json","vue":"https://fancy-ui.rama.app/r/vue/focus.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/focus","props":[{"name":"sentence","type":"string","default":"\"Fancy Focus\"","description":"Space-separated words to cycle focus through"},{"name":"manualMode","type":"boolean","default":"false","description":"Enable manual control via mouse hover instead of auto-cycling"},{"name":"blurAmount","type":"number","default":"5","description":"Blur amount in pixels for unfocused words"},{"name":"borderColor","type":"string","default":"\"green\"","description":"Color of the corner frame border"},{"name":"animationDuration","type":"number","default":"0.5","description":"Transition duration in seconds"},{"name":"pauseBetweenAnimations","type":"number","default":"1","description":"Pause between word cycles in seconds"}],"snippets":[],"events":[],"examples":["Basic Usage","Custom Border Color","Manual Mode","High Blur"]},{"name":"HyperText","slug":"hyper-text","description":"Text that scrambles into random uppercase letters and resolves character-by-character back to the original on hover, with a staggered per-letter reveal and an optional animate-on-load mode","category":"text","group":"fancy","tags":["text","animation","scramble","hover","glitch","typography"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["HyperText"]},"react":{"package":"fancy-ui-react","names":["HyperText"]},"vue":{"package":"fancy-ui-vue","names":["HyperText"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/hyper-text.md","react":"https://fancy-ui.rama.app/docs/components/react/hyper-text.md","vue":"https://fancy-ui.rama.app/docs/components/vue/hyper-text.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/hyper-text.json","react":"https://fancy-ui.rama.app/r/hyper-text.json","vue":"https://fancy-ui.rama.app/r/vue/hyper-text.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/hyper-text","props":[{"name":"text","type":"string","description":"Text to display and scramble","required":true},{"name":"duration","type":"number","default":"800","description":"Total animation duration in ms"},{"name":"animateOnLoad","type":"boolean","default":"false","description":"Whether to animate on initial load"}],"snippets":[],"events":[],"examples":["Basic Usage","Animate on Load","Slow Animation"]},{"name":"LetterPullup","slug":"letter-pullup","description":"Staggered letter pull-up animation with wave entrance effect","category":"text","group":"fancy","tags":["text","animation","letters","stagger","entrance","typography"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["LetterPullup"]},"react":{"package":"fancy-ui-react","names":["LetterPullup"]},"vue":{"package":"fancy-ui-vue","names":["LetterPullup"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/letter-pullup.md","react":"https://fancy-ui.rama.app/docs/components/react/letter-pullup.md","vue":"https://fancy-ui.rama.app/docs/components/vue/letter-pullup.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/letter-pullup.json","react":"https://fancy-ui.rama.app/r/letter-pullup.json","vue":"https://fancy-ui.rama.app/r/vue/letter-pullup.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/letter-pullup","props":[{"name":"words","type":"string","description":"Text to animate (each character gets its own animation)","required":true},{"name":"delay","type":"number","default":"0.05","description":"Delay between each letter animation in seconds"}],"snippets":[],"events":[],"examples":["Basic Usage","Slower Stagger","Custom Styling"]},{"name":"LineReveal","slug":"line-reveal","description":"Staggered line-by-line text reveal with lines computed by pretext instead of DOM splitting","category":"text","group":"fancy","tags":["text","animation","reveal","stagger","pretext","typography"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["LineReveal"]},"react":{"package":"fancy-ui-react","names":["LineReveal"]},"vue":{"package":"fancy-ui-vue","names":["LineReveal"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/line-reveal.md","react":"https://fancy-ui.rama.app/docs/components/react/line-reveal.md","vue":"https://fancy-ui.rama.app/docs/components/vue/line-reveal.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/line-reveal.json","react":"https://fancy-ui.rama.app/r/line-reveal.json","vue":"https://fancy-ui.rama.app/r/vue/line-reveal.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/line-reveal","props":[{"name":"text","type":"string","description":"Text to reveal","required":true},{"name":"font","type":"string","default":"'600 32px \"Helvetica Neue\", Helvetica, Arial, sans-serif'","description":"CSS font shorthand used for both measurement and rendering"},{"name":"lineHeight","type":"number","default":"1.2 × font size","description":"Line height in pixels"},{"name":"stagger","type":"number","default":"0.08","description":"Delay between lines in seconds"},{"name":"duration","type":"number","default":"0.7","description":"Animation duration per line in seconds"},{"name":"delay","type":"number","default":"0","description":"Initial delay in seconds"},{"name":"once","type":"boolean","default":"true","description":"Animate only on first viewport entry"},{"name":"class","type":"string","description":"Additional CSS classes"}],"snippets":[],"events":[],"examples":["Basic Usage","Custom Stagger & Duration"]},{"name":"LineShadowText","slug":"line-shadow-text","description":"Text with animated diagonal line shadow pattern that scrolls continuously","category":"text","group":"fancy","tags":["text","animation","shadow","pattern","typography","decoration"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["LineShadowText"]},"react":{"package":"fancy-ui-react","names":["LineShadowText"]},"vue":{"package":"fancy-ui-vue","names":["LineShadowText"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/line-shadow-text.md","react":"https://fancy-ui.rama.app/docs/components/react/line-shadow-text.md","vue":"https://fancy-ui.rama.app/docs/components/vue/line-shadow-text.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/line-shadow-text.json","react":"https://fancy-ui.rama.app/r/line-shadow-text.json","vue":"https://fancy-ui.rama.app/r/vue/line-shadow-text.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/line-shadow-text","props":[{"name":"text","type":"string","description":"Text content to display","required":true},{"name":"shadowColor","type":"string","default":"\"black\"","description":"Color of the diagonal line shadow"},{"name":"as","type":"\"span\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\" | \"div\"","default":"\"span\"","description":"HTML element to render as"}],"snippets":[],"events":[],"examples":["Basic Usage","Custom Shadow Color","Dark Background"]},{"name":"LiquidText","slug":"liquid-text","description":"Big text that liquefies along the cursor's path via a raw-WebGL fluid solver, with chromatic-aberration fringing that relaxes back over time","category":"text","group":"fancy","tags":["text","webgl","fluid","displacement","cursor","shader","chromatic-aberration"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["LiquidText"]},"react":{"package":"fancy-ui-react","names":["LiquidText"]},"vue":{"package":"fancy-ui-vue","names":["LiquidText"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/liquid-text.md","react":"https://fancy-ui.rama.app/docs/components/react/liquid-text.md","vue":"https://fancy-ui.rama.app/docs/components/vue/liquid-text.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/liquid-text.json","react":"https://fancy-ui.rama.app/r/liquid-text.json","vue":"https://fancy-ui.rama.app/r/vue/liquid-text.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/liquid-text","props":[{"name":"text","type":"string","default":"\"Liquid\"","description":"Text to display"},{"name":"font","type":"string","default":"\"\"","description":"Font family; empty string resolves via getComputedStyle(host).fontFamily"},{"name":"fontSize","type":"number","default":"0","description":"Font size in pixels; 0 auto-fits to the container width"},{"name":"fontWeight","type":"number | string","default":"700","description":"Font weight"},{"name":"lightColor","type":"string","default":"\"#000000\"","description":"Text color in light mode"},{"name":"darkColor","type":"string","default":"\"#ffffff\"","description":"Text color in dark mode"},{"name":"class","type":"string","description":"Additional CSS classes"},{"name":"strength","type":"number","default":"0.5","description":"Geometric UV warp gain"},{"name":"radius","type":"number","default":"160","description":"Splat radius in screen pixels"},{"name":"forceGain","type":"number","default":"17","description":"Mouse-delta to force multiplier"},{"name":"dissipation","type":"number","default":"0.98","description":"Per-frame velocity decay factor"},{"name":"viscosity","type":"number","default":"4","description":"Jacobi viscous diffusion strength (8 iterations)"},{"name":"chromaticRatio","type":"number","default":"0.2","description":"Chromatic offset as a ratio of the warp"},{"name":"staticBelow","type":"number","default":"1024","description":"innerWidth at/below which the component renders as static DOM text (also used at mount)"},{"name":"interactive","type":"boolean","default":"true","description":"Whether pointer movement drives the fluid simulation"},{"name":"pauseWhenHidden","type":"boolean","default":"true","description":"Pause the render loop while the document is hidden"}],"snippets":[],"events":[],"examples":["Basic Usage","Interactive Playground"]},{"name":"NumberTicker","slug":"number-ticker","description":"Animated number counter with easing, triggered on viewport entry","category":"text","group":"fancy","tags":["text","counter","animation","number","scroll","statistics"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["NumberTicker"]},"react":{"package":"fancy-ui-react","names":["NumberTicker"]},"vue":{"package":"fancy-ui-vue","names":["NumberTicker"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/number-ticker.md","react":"https://fancy-ui.rama.app/docs/components/react/number-ticker.md","vue":"https://fancy-ui.rama.app/docs/components/vue/number-ticker.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/number-ticker.json","react":"https://fancy-ui.rama.app/r/number-ticker.json","vue":"https://fancy-ui.rama.app/r/vue/number-ticker.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/number-ticker","props":[{"name":"value","type":"number","default":"0","description":"Target number to animate to"},{"name":"direction","type":"\"up\" | \"down\"","default":"\"up\"","description":"Animation direction: \"up\" counts 0→value, \"down\" counts value→0"},{"name":"duration","type":"number","default":"1000","description":"Animation duration in ms"},{"name":"delay","type":"number","default":"0","description":"Delay before animation starts in ms"},{"name":"decimalPlaces","type":"number","default":"0","description":"Number of decimal places to display"}],"snippets":[],"events":[],"examples":["Basic Usage","Decimal Places","Count Down","With Delay","Interactive Playground"]},{"name":"SparklesText","slug":"sparkles-text","description":"Text overlaid with small SVG star sparkles that scale, rotate, and fade in a continuous loop, each one regenerating at a random position once its lifespan expires, cycling between two configurable colors","category":"text","group":"fancy","tags":["text","sparkles","animation","stars","decoration","typography"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["SparklesText"]},"react":{"package":"fancy-ui-react","names":["SparklesText"]},"vue":{"package":"fancy-ui-vue","names":["SparklesText"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/sparkles-text.md","react":"https://fancy-ui.rama.app/docs/components/react/sparkles-text.md","vue":"https://fancy-ui.rama.app/docs/components/vue/sparkles-text.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/sparkles-text.json","react":"https://fancy-ui.rama.app/r/sparkles-text.json","vue":"https://fancy-ui.rama.app/r/vue/sparkles-text.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/sparkles-text","props":[{"name":"text","type":"string","description":"Text to display","required":true},{"name":"sparklesCount","type":"number","default":"10","description":"Number of sparkle stars"},{"name":"colors","type":"{ first: string; second: string }","default":"{ first: \"#9E7AFF\", second: \"#FE8BBB\" }","description":"Two colors for sparkle stars"}],"snippets":[],"events":[],"examples":["Basic Usage","Custom Colors","Lots of Sparkles"]},{"name":"TerminalText","slug":"terminal-text","description":"Terminal-style text streamer with per-character animation, blinking cursor, and glitch effect","category":"text","group":"fancy","tags":["text","terminal","animation","typewriter","glitch","code"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["TerminalText"]},"react":{"package":"fancy-ui-react","names":["TerminalText"]},"vue":{"package":"fancy-ui-vue","names":["TerminalText"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/terminal-text.md","react":"https://fancy-ui.rama.app/docs/components/react/terminal-text.md","vue":"https://fancy-ui.rama.app/docs/components/vue/terminal-text.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/terminal-text.json","react":"https://fancy-ui.rama.app/r/terminal-text.json","vue":"https://fancy-ui.rama.app/r/vue/terminal-text.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/terminal-text","props":[{"name":"lines","type":"string[]","description":"Array of lines to stream character by character","required":true},{"name":"speed","type":"number","default":"40","description":"Delay between each character in ms"},{"name":"delay","type":"number","default":"0","description":"Initial delay before streaming starts in ms"},{"name":"cursor","type":"boolean","default":"true","description":"Show blinking cursor"},{"name":"cursorChar","type":"string","default":"\"█\"","description":"Character used as the cursor"},{"name":"glitch","type":"boolean","default":"false","description":"Enable random character glitch effect after streaming"},{"name":"onComplete","type":"() => void","description":"Callback fired when all lines finish streaming"}],"snippets":[],"events":[],"examples":["Basic Usage","No Cursor","With Glitch"]},{"name":"TextGenerateEffect","slug":"text-generate-effect","description":"Typewriter-style text reveal that fades in words one by one with optional blur","category":"text","group":"fancy","tags":["text","animation","typewriter","reveal","blur","typography"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["TextGenerateEffect"]},"react":{"package":"fancy-ui-react","names":["TextGenerateEffect"]},"vue":{"package":"fancy-ui-vue","names":["TextGenerateEffect"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/text-generate-effect.md","react":"https://fancy-ui.rama.app/docs/components/react/text-generate-effect.md","vue":"https://fancy-ui.rama.app/docs/components/vue/text-generate-effect.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/text-generate-effect.json","react":"https://fancy-ui.rama.app/r/text-generate-effect.json","vue":"https://fancy-ui.rama.app/r/vue/text-generate-effect.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/text-generate-effect","props":[{"name":"words","type":"string","description":"Text to reveal word by word","required":true},{"name":"filter","type":"boolean","default":"true","description":"Apply blur filter during reveal animation"},{"name":"duration","type":"number","default":"0.7","description":"Fade-in duration per word in seconds"},{"name":"delay","type":"number","default":"0","description":"Initial delay before animation starts in ms"},{"name":"stagger","type":"number","default":"200","description":"Delay between each word in ms"}],"snippets":[],"events":[],"examples":["Basic Usage","Without Blur","Fast Reveal","Slow Dramatic","Delayed Start"]},{"name":"TextRoll","slug":"text-roll","description":"Single-line text that rolls to its new value per grapheme, odometer-style, whenever the value prop changes — while the real, unsplit text stays selectable and readable","category":"text","group":"fancy","tags":["text","animation","roll","counter","micro-interaction"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["TextRoll"]},"react":{"package":"fancy-ui-react","names":["TextRoll"]},"vue":{"package":"fancy-ui-vue","names":["TextRoll"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/text-roll.md","react":"https://fancy-ui.rama.app/docs/components/react/text-roll.md","vue":"https://fancy-ui.rama.app/docs/components/vue/text-roll.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/text-roll.json","react":"https://fancy-ui.rama.app/r/text-roll.json","vue":"https://fancy-ui.rama.app/r/vue/text-roll.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/text-roll","props":[{"name":"value","type":"string","description":"The text to display; a change after mount triggers a per-grapheme roll to the new value","required":true},{"name":"direction","type":"\"auto\" | \"up\" | \"down\"","default":"\"auto\"","description":"Which way the cells travel; \"auto\" compares the trimmed old and new values as numbers and falls back to \"up\" for a tie, a non-numeric change, or an empty side"},{"name":"duration","type":"number","default":"300","description":"Roll duration in ms, collapsed to 0 under reduced motion"},{"name":"stagger","type":"number","default":"15","description":"Per-cell stagger step in ms, compressed to a 200ms total spread"},{"name":"from","type":"\"first\" | \"last\" | \"center\" | number","default":"\"first\"","description":"Stagger origin"},{"name":"tabular","type":"boolean","default":"false","description":"font-variant-numeric: tabular-nums on both layers, to keep digit width locked"},{"name":"live","type":"\"off\" | \"polite\" | \"assertive\"","default":"\"off\"","description":"Live-region role/aria-live pair on the real text layer; off by default"},{"name":"class","type":"string","description":"Additional CSS classes"},{"name":"ref","type":"HTMLSpanElement | null","default":"null","description":"Bindable reference to the root element"}],"snippets":[],"events":[],"examples":["Basic Usage","Auto Ticker"]},{"name":"FallingStarsBg","slug":"bg-falling-stars","description":"Canvas-based 3D starfield with perspective projection, motion trails, and glow","category":"backgrounds","group":"fancy","tags":["background","stars","canvas","animation","3d","space"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["FallingStarsBg"]},"react":{"package":"fancy-ui-react","names":["FallingStarsBg"]},"vue":{"package":"fancy-ui-vue","names":["FallingStarsBg"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/bg-falling-stars.md","react":"https://fancy-ui.rama.app/docs/components/react/bg-falling-stars.md","vue":"https://fancy-ui.rama.app/docs/components/vue/bg-falling-stars.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/bg-falling-stars.json","react":"https://fancy-ui.rama.app/r/bg-falling-stars.json","vue":"https://fancy-ui.rama.app/r/vue/bg-falling-stars.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/bg-falling-stars","props":[{"name":"color","type":"string","default":"\"currentColor\"","description":"Star color: a hex string, or currentColor to follow the text colour"},{"name":"count","type":"number","default":"200","description":"Number of stars"}],"snippets":[],"events":[],"examples":["Basic Usage","Custom Color","Star Count"]},{"name":"FlickeringGrid","slug":"flickering-grid","description":"Canvas grid of squares that flicker in and out of opacity at random each frame, pausing automatically via IntersectionObserver when scrolled off-screen and resizing to fit its container via ResizeObserver","category":"backgrounds","group":"fancy","tags":["background","grid","canvas","animation","pattern"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["FlickeringGrid"]},"react":{"package":"fancy-ui-react","names":["FlickeringGrid"]},"vue":{"package":"fancy-ui-vue","names":["FlickeringGrid"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/flickering-grid.md","react":"https://fancy-ui.rama.app/docs/components/react/flickering-grid.md","vue":"https://fancy-ui.rama.app/docs/components/vue/flickering-grid.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/flickering-grid.json","react":"https://fancy-ui.rama.app/r/flickering-grid.json","vue":"https://fancy-ui.rama.app/r/vue/flickering-grid.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/flickering-grid","props":[{"name":"squareSize","type":"number","default":"4","description":"Size of each grid square in pixels"},{"name":"gridGap","type":"number","default":"6","description":"Gap between squares in pixels"},{"name":"flickerChance","type":"number","default":"0.3","description":"Probability of a square changing opacity each second (0-1)"},{"name":"color","type":"string","default":"\"currentColor\"","description":"Color of the squares: a hex string, or currentColor to follow the text colour"},{"name":"maxOpacity","type":"number","default":"0.3","description":"Maximum opacity of squares (0-1)"},{"name":"width","type":"number","description":"Fixed width in pixels (defaults to container width)"},{"name":"height","type":"number","description":"Fixed height in pixels (defaults to container height)"}],"snippets":[],"events":[],"examples":["Basic Usage","Custom Colors","Grid Size Variations","Interactive Playground"]},{"name":"MatrixRain","slug":"matrix-rain","description":"Canvas-based falling glyph rain with configurable color, speed, and density","category":"backgrounds","group":"fancy","tags":["background","matrix","canvas","animation","glyphs","cyberpunk"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["MatrixRain"]},"react":{"package":"fancy-ui-react","names":["MatrixRain"]},"vue":{"package":"fancy-ui-vue","names":["MatrixRain"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/matrix-rain.md","react":"https://fancy-ui.rama.app/docs/components/react/matrix-rain.md","vue":"https://fancy-ui.rama.app/docs/components/vue/matrix-rain.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/matrix-rain.json","react":"https://fancy-ui.rama.app/r/matrix-rain.json","vue":"https://fancy-ui.rama.app/r/vue/matrix-rain.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/matrix-rain","props":[{"name":"color","type":"string","default":"\"#00ff41\"","description":"Glyph color (classic terminal green)"},{"name":"speed","type":"number","default":"1.0","description":"Fall speed multiplier (< 1 slower, > 1 faster)"},{"name":"density","type":"number","default":"1.0","description":"Column density multiplier"},{"name":"glyphSize","type":"number","default":"16","description":"Font size of each glyph in pixels"},{"name":"fadeOpacity","type":"number","default":"0.05","description":"Opacity of the black overlay used to create trailing fade effect"}],"snippets":[],"events":[],"examples":["Basic Usage","Composed Hero","Interactive Playground"]},{"name":"MosaicGlow","slug":"mosaic-glow","description":"Canvas mosaic of small tiles on a dark surface where a soft halo follows the cursor with a lag, lighting tiles to random gold intensities that decay into a comet trail, with an additive bloom over the gaps, a glassy per-tile highlight, ambient flicker and an autonomous drift when idle","category":"backgrounds","group":"fancy","tags":["canvas","grid","mosaic","glow","cursor","halo","trail","background","interactive"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["MosaicGlow"]},"react":{"package":"fancy-ui-react","names":["MosaicGlow"]},"vue":{"package":"fancy-ui-vue","names":["MosaicGlow"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/mosaic-glow.md","react":"https://fancy-ui.rama.app/docs/components/react/mosaic-glow.md","vue":"https://fancy-ui.rama.app/docs/components/vue/mosaic-glow.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/mosaic-glow.json","react":"https://fancy-ui.rama.app/r/mosaic-glow.json","vue":"https://fancy-ui.rama.app/r/vue/mosaic-glow.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/mosaic-glow","props":[{"name":"hdr","type":"boolean","default":"true","description":"On a display that reports HDR, adds the light above SDR white in a WebGPU layer with extended tone mapping: the hottest tiles peak around 1000 nits and the halo gets a hot core. Elsewhere nothing starts and the mosaic is unchanged"},{"name":"tileSize","type":"number","default":"18","description":"Tile edge in CSS px"},{"name":"gap","type":"number","default":"2","description":"Gap between tiles in CSS px"},{"name":"color","type":"string","default":"\"#f2c318\"","description":"Halo and tile colour, hex or rgb()"},{"name":"background","type":"string","default":"\"#0a0a0a\"","description":"Surface colour behind the tiles, hex or rgb()"},{"name":"radius","type":"number","default":"170","description":"Halo radius in CSS px"},{"name":"intensity","type":"number","default":"1","description":"Overall brightness of lit tiles, 0 to 1"},{"name":"trail","type":"number","default":"0.6","description":"How long lit tiles linger after the halo moves on, 0 to 1"},{"name":"smoothing","type":"number","default":"0.15","description":"Pointer lag, 0 (instant) to 1 (very laggy)"},{"name":"noise","type":"number","default":"0.7","description":"Spread of per-tile random brightness inside the halo, 0 to 1"},{"name":"ambient","type":"number","default":"0.35","description":"Visibility of the random faint tiles outside the halo, 0 to 1"},{"name":"flicker","type":"boolean","default":"true","description":"Slowly re-roll the faint tiles over time"},{"name":"idle","type":"\"drift\" | \"none\"","default":"\"drift\"","description":"With no pointer for 1.5s: drift wanders the halo on a slow path, none switches it off"},{"name":"interactive","type":"boolean","default":"true","description":"Follow the pointer. Off leaves only the idle behaviour"},{"name":"seed","type":"number","default":"1","description":"Seed for the per-tile randomness; same seed, same mosaic"},{"name":"ref","type":"HTMLDivElement | null","default":"null","description":"Bindable host element"},{"name":"class","type":"string","description":"Additional classes on the host"}],"snippets":[{"name":"children","description":"Content rendered above the canvas; give the host a height"}],"events":[],"examples":["Basic Usage","Colors","Dense Grid","Trail and Idle","Interactive Playground"]},{"name":"Sparkles","slug":"sparkles","description":"Canvas-based floating particle sparkle effect with configurable density and colors","category":"backgrounds","group":"fancy","tags":["background","particles","canvas","animation","sparkles"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Sparkles"]},"react":{"package":"fancy-ui-react","names":["Sparkles"]},"vue":{"package":"fancy-ui-vue","names":["Sparkles"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/sparkles.md","react":"https://fancy-ui.rama.app/docs/components/react/sparkles.md","vue":"https://fancy-ui.rama.app/docs/components/vue/sparkles.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/sparkles.json","react":"https://fancy-ui.rama.app/r/sparkles.json","vue":"https://fancy-ui.rama.app/r/vue/sparkles.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/sparkles","props":[{"name":"background","type":"string","default":"\"#0d47a1\"","description":"Background color of the canvas container"},{"name":"particleColor","type":"string","default":"\"#ffffff\"","description":"Color of the particles: a hex string, or currentColor to follow the text colour"},{"name":"minSize","type":"number","default":"1","description":"Minimum particle radius in pixels"},{"name":"maxSize","type":"number","default":"3","description":"Maximum particle radius in pixels"},{"name":"speed","type":"number","default":"4","description":"Particle speed multiplier"},{"name":"particleDensity","type":"number","default":"120","description":"Number of particles"}],"snippets":[],"events":[],"examples":["Basic Usage","Custom Colors","Dense & Fast"]},{"name":"StarsBackground","slug":"bg-stars","description":"Three-layer starfield background that scrolls continuously while parallax-shifting in response to cursor movement via spring physics, with stars rendered as box-shadow dots across near, mid, and far depth layers","category":"backgrounds","group":"fancy","tags":["background","stars","parallax","animation","space","mouse"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["StarsBackground"]},"react":{"package":"fancy-ui-react","names":["StarsBackground"]},"vue":{"package":"fancy-ui-vue","names":["StarsBackground"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/bg-stars.md","react":"https://fancy-ui.rama.app/docs/components/react/bg-stars.md","vue":"https://fancy-ui.rama.app/docs/components/vue/bg-stars.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/bg-stars.json","react":"https://fancy-ui.rama.app/r/bg-stars.json","vue":"https://fancy-ui.rama.app/r/vue/bg-stars.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/bg-stars","props":[{"name":"factor","type":"number","default":"0.05","description":"Parallax factor for mouse movement"},{"name":"speed","type":"number","default":"50","description":"Base animation speed in seconds"},{"name":"stiffness","type":"number","default":"50","description":"Spring stiffness for parallax"},{"name":"damping","type":"number","default":"20","description":"Spring damping for parallax"},{"name":"starColor","type":"string","default":"\"#fff\"","description":"Color of the stars"}],"snippets":[{"name":"children","description":"Child content to render over the stars"}],"events":[],"examples":["Basic Usage","Custom Color","Animation Speed"]},{"name":"AnimatedBeam","slug":"animated-beam","description":"Fibre-optic connector between two elements: a light packet with a dispersing chromatic tail runs along a glass fibre and blooms behind the destination on arrival; theme-aware, seeded and still under reduced motion.","category":"effects","group":"fancy","tags":["animation","svg","beam","gradient","connection"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["AnimatedBeam"]},"react":{"package":"fancy-ui-react","names":["AnimatedBeam"]},"vue":{"package":"fancy-ui-vue","names":["AnimatedBeam"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/animated-beam.md","react":"https://fancy-ui.rama.app/docs/components/react/animated-beam.md","vue":"https://fancy-ui.rama.app/docs/components/vue/animated-beam.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/animated-beam.json","react":"https://fancy-ui.rama.app/r/animated-beam.json","vue":"https://fancy-ui.rama.app/r/vue/animated-beam.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/animated-beam","props":[{"name":"containerRef","type":"HTMLElement","description":"Reference to the container element that holds both endpoints","required":true},{"name":"fromRef","type":"HTMLElement","description":"Reference to the source element","required":true},{"name":"toRef","type":"HTMLElement","description":"Reference to the destination element","required":true},{"name":"curvature","type":"number","default":"0","description":"Vertical curvature of the beam path"},{"name":"reverse","type":"boolean","default":"false","description":"Reverse the animation direction"},{"name":"pathColor","type":"string","default":"theme-aware glass","description":"CHANGED DEFAULT (was \"gray\"): unset draws the theme-aware glass fibre; a colour draws a plain line in that colour, as before."},{"name":"pathWidth","type":"number","default":"2","description":"Stroke width of the path"},{"name":"pathOpacity","type":"number","default":"1 (glass) / 0.2 (with pathColor)","description":"CHANGED DEFAULT (was 0.2): fibre opacity; stays 0.2 whenever pathColor is set."},{"name":"gradientStartColor","type":"string","default":"\"#FFAA40\"","description":"Start color of the animated gradient"},{"name":"gradientStopColor","type":"string","default":"\"#9C40FF\"","description":"End color of the animated gradient"},{"name":"delay","type":"number","default":"0","description":"Animation delay in seconds"},{"name":"duration","type":"number","default":"from seed","description":"CHANGED DEFAULT (was random): seconds per packet cycle; unset = mulberry32(seed)*3+4."},{"name":"pulses","type":"number","default":"1","description":"Packets in flight at once (1–12), spaced evenly over one cycle."},{"name":"tail","type":"number","default":"0.35","description":"Length of the packet's dispersing tail as a fraction of the fibre (0.05–0.9)."},{"name":"glow","type":"number","default":"0.6","description":"Strength of the blurred glow under the packet and of the arrival bloom (0–1)."},{"name":"seed","type":"number","default":"1","description":"Seed for the default duration (between 4 and 7 s), so server and browser agree."},{"name":"startXOffset","type":"number","default":"0","description":"Horizontal offset for the start point"},{"name":"startYOffset","type":"number","default":"0","description":"Vertical offset for the start point"},{"name":"endXOffset","type":"number","default":"0","description":"Horizontal offset for the end point"},{"name":"endYOffset","type":"number","default":"0","description":"Vertical offset for the end point"}],"snippets":[],"events":[],"examples":["Basic Usage","Dispersion"]},{"name":"BorderBeam","slug":"border-beam","description":"A single comet of light riding a container's border: a white-hot head, a long feathered tail fading between two colours, a dim hairline that lights up only within the comet's reach, and a soft bloom that sits on the edge.","category":"effects","group":"fancy","tags":["animation","border","gradient","beam","comet","glow"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["BorderBeam"]},"react":{"package":"fancy-ui-react","names":["BorderBeam"]},"vue":{"package":"fancy-ui-vue","names":["BorderBeam"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/border-beam.md","react":"https://fancy-ui.rama.app/docs/components/react/border-beam.md","vue":"https://fancy-ui.rama.app/docs/components/vue/border-beam.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/border-beam.json","react":"https://fancy-ui.rama.app/r/border-beam.json","vue":"https://fancy-ui.rama.app/r/vue/border-beam.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/border-beam","props":[{"name":"size","type":"number","default":"200","description":"Diameter of the pool of light around the comet's head, in pixels"},{"name":"duration","type":"number","default":"9","description":"Time for one full lap of the border, in seconds"},{"name":"borderWidth","type":"number","default":"1.5","description":"Border width in pixels"},{"name":"anchor","type":"number","default":"90","description":"Where the comet starts (and rests with reduced motion), as a percentage of the perimeter clockwise from the top-left (0-100)"},{"name":"colorFrom","type":"string","default":"\"#8ec5ff\"","description":"Colour of the head and the start of the tail"},{"name":"colorTo","type":"string","default":"\"#c084fc\"","description":"Colour the tail fades into"},{"name":"delay","type":"number","default":"0","description":"Seconds behind the start position; the comet runs from the first frame"},{"name":"tail","type":"number","default":"0.25","description":"Length of the tail as a share of the perimeter (0-1)"},{"name":"glow","type":"number","default":"0.6","description":"Strength of the bloom, halo and inner spill of light (0-1)"},{"name":"reverse","type":"boolean","default":"false","description":"Travel counter-clockwise instead of clockwise"}],"snippets":[],"events":[],"examples":["Basic Usage","Custom Colors","Animation Speed","Size & Width","Tail & Glow","Multiple Beams","Interactive Playground"]},{"name":"Confetti","slug":"confetti","description":"Confetti celebration effect powered by canvas-confetti with button trigger support","category":"effects","group":"fancy","tags":["confetti","celebration","animation","canvas","particles"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Confetti"]},"react":{"package":"fancy-ui-react","names":["Confetti"]},"vue":{"package":"fancy-ui-vue","names":["Confetti"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/confetti.md","react":"https://fancy-ui.rama.app/docs/components/react/confetti.md","vue":"https://fancy-ui.rama.app/docs/components/vue/confetti.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/confetti.json","react":"https://fancy-ui.rama.app/r/confetti.json","vue":"https://fancy-ui.rama.app/r/vue/confetti.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/confetti","props":[{"name":"options","type":"ConfettiOptions","default":"{}","description":"canvas-confetti options passed to each fire() call"},{"name":"globalOptions","type":"ConfettiGlobalOptions","default":"{}","description":"Global canvas-confetti initialization options"},{"name":"manualStart","type":"boolean","default":"false","description":"Prevent auto-firing on mount; call fire() manually"},{"name":"ConfettiButton.sound","type":"boolean","default":"false","description":"Plays the press cue when the confetti button fires a burst, once the user has enabled sound"}],"snippets":[{"name":"children","description":"ConfettiButton or other trigger elements"}],"events":[],"examples":["Basic Usage","Custom Options"]},{"name":"DatamoshTransition","slug":"datamosh-transition","description":"Page-transition overlay that looks like a corrupted video decode: a fixed grid of columns, narrow on the left and wide on the right, fills with flat blocks of saturated colour that fall, snap open through the middle of the frame and squeeze shut again; cover() drops the columns over the page right to left and reveal() lets them fall away, both as promises for any router's navigation hook","category":"effects","group":"fancy","tags":["page transition","route","navigation","overlay","canvas","datamosh","glitch","columns"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["DatamoshTransition"]},"react":{"package":"fancy-ui-react","names":["DatamoshTransition"]},"vue":{"package":"fancy-ui-vue","names":["DatamoshTransition"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/datamosh-transition.md","react":"https://fancy-ui.rama.app/docs/components/react/datamosh-transition.md","vue":"https://fancy-ui.rama.app/docs/components/vue/datamosh-transition.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/datamosh-transition.json","react":"https://fancy-ui.rama.app/r/datamosh-transition.json","vue":"https://fancy-ui.rama.app/r/vue/datamosh-transition.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/datamosh-transition","props":[{"name":"colors","type":"\"broadcast\" | \"sunset\" | \"thermal\" | \"mono\" | \"acid\" | string[]","default":"\"broadcast\"","description":"Palette preset or colour list, hex or rgb(); the lightest and darkest colours recur most often"},{"name":"variant","type":"\"curtain\" | \"rise\" | \"split\" | \"interlace\"","default":"\"curtain\"","description":"Shape of the cover: drop from the top, climb from the bottom, open from the centre line, or alternate curtain and rise per column"},{"name":"sweep","type":"\"right\" | \"left\" | \"center\" | \"edges\" | \"random\"","default":"\"right\"","description":"Order the columns move in: from the right, from the left, out from the middle, in from both sides, or a seeded shuffle"},{"name":"source","type":"string | HTMLImageElement | HTMLCanvasElement","description":"Picture to decode: tiles take their colours from it, auto-levelled and saturated, instead of the palette; URLs must be same-origin or CORS-enabled"},{"name":"seed","type":"number","default":"1","description":"Seed for the colour order; same seed, same strip"},{"name":"columns","type":"number","default":"11","description":"Number of columns"},{"name":"power","type":"number","default":"1.65","description":"Column edge exponent: 1 is a uniform grid, higher widens the columns to the right"},{"name":"tiles","type":"number","default":"15","description":"Tiles per column stack, forced odd so one tile takes the centre"},{"name":"coverDuration","type":"number","default":"380","description":"Time for one column to cover, in ms"},{"name":"revealDuration","type":"number","default":"480","description":"Time for one column to clear, in ms"},{"name":"stagger","type":"number","default":"28","description":"Delay between neighbouring columns in ms, rightmost first"},{"name":"speed","type":"number","default":"1","description":"Speed of the falling tiles"},{"name":"contained","type":"boolean","default":"false","description":"Fill the positioned parent instead of the viewport"},{"name":"zIndex","type":"number","default":"9999","description":"Stacking order of the overlay"},{"name":"phase","type":"\"idle\" | \"covering\" | \"covered\" | \"revealing\"","default":"\"idle\"","description":"Current phase; bindable, read-only"},{"name":"oncovered","type":"() => void","description":"Called once the page is fully covered"},{"name":"onrevealed","type":"() => void","description":"Called once the page is fully revealed"},{"name":"ref","type":"HTMLDivElement | null","default":"null","description":"Bindable overlay element"},{"name":"class","type":"string","description":"Additional classes on the overlay"}],"snippets":[],"events":[],"examples":["Basic Usage","Variants","Sunset"]},{"name":"DimSiblings","slug":"dim-siblings","description":"Wraps a group of cards, links, or list items so hovering or keyboard-focusing one dims (or blurs) every other one — a pure CSS :has() affordance with zero pointer-tracking JavaScript","category":"effects","group":"fancy","tags":["hover","focus","dim","blur","has-selector","css-only","micro-interaction"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["DimSiblings"]},"react":{"package":"fancy-ui-react","names":["DimSiblings"]},"vue":{"package":"fancy-ui-vue","names":["DimSiblings"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/dim-siblings.md","react":"https://fancy-ui.rama.app/docs/components/react/dim-siblings.md","vue":"https://fancy-ui.rama.app/docs/components/vue/dim-siblings.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/dim-siblings.json","react":"https://fancy-ui.rama.app/r/dim-siblings.json","vue":"https://fancy-ui.rama.app/r/vue/dim-siblings.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/dim-siblings","props":[{"name":"effect","type":"\"dim\" | \"blur\" | \"both\"","default":"\"dim\"","description":"Which visual property the non-active siblings lose"},{"name":"opacity","type":"number","default":"0.4","description":"Opacity the non-active siblings settle to — a floor, not zero"},{"name":"blur","type":"number","default":"2","description":"Blur radius in px, applied only when effect includes blur"},{"name":"duration","type":"number","default":"150","description":"Transition duration in ms for the opacity/blur change"},{"name":"as","type":"keyof HTMLElementTagNameMap","default":"\"div\"","description":"The rendered root element — \"ul\"/\"ol\" for a list whose CSS list semantics need to survive the wrapper"},{"name":"class","type":"string","description":"Additional CSS classes"},{"name":"ref","type":"HTMLElement | null","default":"null","description":"Bindable reference to the root element"}],"snippets":[{"name":"children","description":"The sibling group — every direct child participates"}],"events":[],"examples":["Basic Usage","With Blur"]},{"name":"FireworksHdr","slug":"fireworks-hdr","description":"GPU fireworks background with a deterministic, DOM-free physics core (rockets, peony/willow/ring/glyph shells, sparks, embers, smoke) rendered by a WebGPU engine into a wide-gamut, extended-tone-mapping canvas so bursts and comet trails burn brighter than SDR white on HDR displays, degrading silently through a WebGL2 fallback and a soft-knee SDR path everywhere else","category":"effects","group":"fancy","tags":["hdr","webgpu","particles","fireworks","background"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["FireworksHdr"]},"react":{"package":"fancy-ui-react","names":["FireworksHdr"]},"vue":{"package":"fancy-ui-vue","names":["FireworksHdr"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/fireworks-hdr.md","react":"https://fancy-ui.rama.app/docs/components/react/fireworks-hdr.md","vue":"https://fancy-ui.rama.app/docs/components/vue/fireworks-hdr.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/fireworks-hdr.json","react":"https://fancy-ui.rama.app/r/fireworks-hdr.json","vue":"https://fancy-ui.rama.app/r/vue/fireworks-hdr.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/fireworks-hdr","props":[{"name":"palette","type":"string[]","default":"[\"#ff2fd6\",\"#a142ff\",\"#3d5bff\",\"#42cfff\"]","description":"Brand hues (hex); order-independent, sorted cool→warm for the shell sweep"},{"name":"hdr","type":"boolean","default":"true","description":"Opt into the GPU engine (WebGPU HDR first, then a WebGL2 fallback); when false, no engine boots"},{"name":"exposure","type":"number","default":"2.2","description":"Display exposure multiplier, clamped to [1, 4]"},{"name":"ambient","type":"boolean","default":"true","description":"Run the ambient auto-scheduler (Poisson-timed background shells)"},{"name":"ambientIntensity","type":"number","default":"0.35","description":"Ambient energy [0,1] — scales shell size"},{"name":"interactive","type":"boolean","default":"true","description":"Launch a shell toward the pointer on pointerdown"},{"name":"quality","type":"\"auto\" | \"high\" | \"mid\" | \"low\"","default":"\"auto\"","description":"Particle budget; auto picks from the render level and device pixel ratio"},{"name":"respectReducedMotion","type":"boolean","default":"true","description":"Force ambient off under prefers-reduced-motion (explicit launches still work)"},{"name":"class","type":"string","default":"\"\"","description":"Extra classes on the canvas wrapper"},{"name":"ambientShells","type":"ShellKind[]","description":"Restrict the ambient scheduler to these shells, picked uniformly — including the pattern shells 'heart' and 'star'; defaults to a weighted peony/willow/ring mix ('glyph' and 'shape' are ignored, they need caller-supplied points)"},{"name":"onReady","type":"(handle: FireworksHandle) => void","description":"Fired when the engine is live with an imperative handle, and again with a fresh handle after a recovered GPU context loss; never fired when no GPU renderer comes up"},{"name":"onLost","type":"() => void","description":"Fired once when a GPU context loss could not be recovered; the component has torn itself down and any handle it gave out is inert"}],"snippets":[],"events":[],"examples":["Basic Usage","Pattern shells"]},{"name":"FluidCursor","slug":"fluid-cursor","description":"Full Navier-Stokes fluid simulation that swirls color in response to cursor and touch movement, running on WebGL2 with a WebGL1 fallback and an optional WebGPU HDR path for wide-gamut, brighter-than-white glow","category":"effects","group":"fancy","tags":["cursor","webgl","fluid","simulation","interactive"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["FluidCursor"]},"react":{"package":"fancy-ui-react","names":["FluidCursor"]},"vue":{"package":"fancy-ui-vue","names":["FluidCursor"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/fluid-cursor.md","react":"https://fancy-ui.rama.app/docs/components/react/fluid-cursor.md","vue":"https://fancy-ui.rama.app/docs/components/vue/fluid-cursor.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/fluid-cursor.json","react":"https://fancy-ui.rama.app/r/fluid-cursor.json","vue":"https://fancy-ui.rama.app/r/vue/fluid-cursor.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/fluid-cursor","props":[{"name":"simResolution","type":"number","default":"128","description":"Simulation grid resolution"},{"name":"dyeResolution","type":"number","default":"1440","description":"Dye/color buffer resolution"},{"name":"captureResolution","type":"number","default":"512","description":"Capture buffer resolution"},{"name":"densityDissipation","type":"number","default":"3.5","description":"Rate at which density fades"},{"name":"velocityDissipation","type":"number","default":"2","description":"Rate at which velocity fades"},{"name":"pressure","type":"number","default":"0.1","description":"Pressure solver strength"},{"name":"pressureIterations","type":"number","default":"20","description":"Number of pressure solver iterations"},{"name":"curl","type":"number","default":"3","description":"Amount of curl/vorticity"},{"name":"splatRadius","type":"number","default":"0.2","description":"Radius of fluid splats"},{"name":"splatForce","type":"number","default":"6000","description":"Force of fluid splats"},{"name":"shading","type":"boolean","default":"true","description":"Enable fluid shading"},{"name":"colorUpdateSpeed","type":"number","default":"10","description":"Speed of color changes"},{"name":"backColor","type":"ColorRGB | string","default":"{ r: 0.5, g: 0, b: 0 }","description":"Background color"},{"name":"transparent","type":"boolean","default":"true","description":"Transparent background"},{"name":"fluidColor","type":"string","description":"Override all fluid with a single color"},{"name":"fluidColors","type":"string[]","description":"Array of colors to cycle through for fluid splats"},{"name":"colorIntensity","type":"number","default":"0.15","description":"Intensity of color mixing"},{"name":"autoSplat","type":"boolean","default":"false","description":"Automatically create random splats"},{"name":"autoSplatInterval","type":"number","default":"1500","description":"Interval between auto-splats in ms"},{"name":"interactive","type":"boolean","default":"true","description":"React to mouse/touch input"},{"name":"pauseWhenHidden","type":"boolean","default":"true","description":"Pause simulation when tab is hidden"},{"name":"splatOnMount","type":"boolean","default":"false","description":"Create a splat on mount"},{"name":"allowMultiple","type":"boolean","default":"false","description":"Allow multiple instances simultaneously"},{"name":"contained","type":"boolean","default":"true","description":"Confine simulation to parent container"},{"name":"hdr","type":"boolean","default":"false","description":"Render via the WebGPU HDR engine — wide gamut + brighter-than-white glow on HDR displays. Needs Chrome/Edge 129+ or Safari 26+; falls back to wide-gamut WebGL (Chrome 104+, Safari 16.4+, Firefox 132+), then to standard rendering"},{"name":"hdrBoost","type":"number","default":"1.5","description":"Display exposure multiplier in HDR mode, clamped to [1, 4]"},{"name":"dither","type":"boolean","default":"false","description":"Experimental retro bitmap dithering — pixelates the fluid to a chunky grid and quantizes color with an ordered 4x4 Bayer threshold. Forces the WebGL renderer; hdr is ignored while set"},{"name":"ditherPixelSize","type":"number","default":"3","description":"Size of one dithered pixel in CSS pixels, minimum 1"},{"name":"ditherLevels","type":"number","default":"4","description":"Color levels per channel in dither mode, clamped to [2, 16]"}],"snippets":[],"events":[],"examples":["Basic Usage","Custom Colors","HDR Mode","Bitmap Dithering"]},{"name":"FrostedGlass","slug":"frosted-glass","description":"Frosted glass surface with organic turbulence-noise refraction, an alternative to LiquidGlass","category":"effects","group":"fancy","tags":["glass","effect","svg","filter","turbulence","displacement","blur","navbar"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["FrostedGlass"]},"react":{"package":"fancy-ui-react","names":["FrostedGlass"]},"vue":{"package":"fancy-ui-vue","names":["FrostedGlass"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/frosted-glass.md","react":"https://fancy-ui.rama.app/docs/components/react/frosted-glass.md","vue":"https://fancy-ui.rama.app/docs/components/vue/frosted-glass.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/frosted-glass.json","react":"https://fancy-ui.rama.app/r/frosted-glass.json","vue":"https://fancy-ui.rama.app/r/vue/frosted-glass.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/frosted-glass","props":[{"name":"radius","type":"number","default":"24","description":"Border radius in pixels"},{"name":"baseFrequency","type":"number","default":"0.008","description":"Turbulence noise frequency (lower = wider waves)"},{"name":"numOctaves","type":"number","default":"2","description":"Turbulence octaves controlling noise detail"},{"name":"seed","type":"number","default":"92","description":"Turbulence random seed"},{"name":"noiseBlur","type":"number","default":"2","description":"Gaussian blur softening the noise before displacement"},{"name":"scale","type":"number","default":"70","description":"Displacement intensity"},{"name":"tint","type":"string","default":"\"hsla(0, 0%, 100%, 0.25)\"","description":"Overlay tint color"},{"name":"highlight","type":"string","default":"\"hsla(0, 0%, 100%, 0.75)\"","description":"Specular rim highlight color"},{"name":"border","type":"boolean","default":"true","description":"Show the conic-gradient glass border"},{"name":"fallbackBlur","type":"number","default":"20","description":"Backdrop blur in pixels for the Safari fallback"},{"name":"fallbackSaturation","type":"number","default":"180","description":"Backdrop saturation percentage for the Safari fallback"},{"name":"containerClass","type":"string","default":"\"\"","description":"CSS classes for the outer container"}],"snippets":[{"name":"children","description":"Content rendered on top of the glass"}],"events":[],"examples":["Basic Usage","Landing Page Navbar"]},{"name":"GlowBorder","slug":"glow-border","description":"Liquid-metal ring for a container's edge: two metallic conic fields turning against each other make iridescent reflections flow along a dark chrome border, while a glint rides around it and spills a soft glow; chromatic, silver and gold presets or custom tints","category":"effects","group":"fancy","tags":["border","glow","animation","gradient","decoration","metal","chrome","beam"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["GlowBorder"]},"react":{"package":"fancy-ui-react","names":["GlowBorder"]},"vue":{"package":"fancy-ui-vue","names":["GlowBorder"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/glow-border.md","react":"https://fancy-ui.rama.app/docs/components/react/glow-border.md","vue":"https://fancy-ui.rama.app/docs/components/vue/glow-border.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/glow-border.json","react":"https://fancy-ui.rama.app/r/glow-border.json","vue":"https://fancy-ui.rama.app/r/vue/glow-border.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/glow-border","props":[{"name":"preset","type":"\"chromatic\" | \"silver\" | \"gold\"","default":"\"chromatic\"","description":"Metal palette: iridescent chrome, cool steel or warm gold"},{"name":"color","type":"string | string[]","description":"Custom tints for the metal's reflections, woven with neutral metal tones; overrides preset"},{"name":"strength","type":"number","default":"0.8","description":"Intensity of the glint and its glow, 0 to 1"},{"name":"borderRadius","type":"number","default":"10","description":"Border radius in pixels; the ring also inherits its parent's radius"},{"name":"borderWidth","type":"number","default":"1.5","description":"Width of the metal ring in pixels"},{"name":"duration","type":"number","default":"10","description":"Length of one flow cycle of the metal in seconds; the glint laps in 0.4x that"},{"name":"class","type":"string","description":"Additional classes on the overlay"}],"snippets":[],"events":[],"examples":["Basic Usage","Presets","Strength","Custom Colors","Multi-Color Gradient","Border Width","Card Example"]},{"name":"GlowingEffect","slug":"glowing-effect","description":"Mouse-proximity based glowing border effect with animated conic gradient","category":"effects","group":"fancy","tags":["border","glow","mouse","gradient","conic","animation"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["GlowingEffect"]},"react":{"package":"fancy-ui-react","names":["GlowingEffect"]},"vue":{"package":"fancy-ui-vue","names":["GlowingEffect"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/glowing-effect.md","react":"https://fancy-ui.rama.app/docs/components/react/glowing-effect.md","vue":"https://fancy-ui.rama.app/docs/components/vue/glowing-effect.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/glowing-effect.json","react":"https://fancy-ui.rama.app/r/glowing-effect.json","vue":"https://fancy-ui.rama.app/r/vue/glowing-effect.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/glowing-effect","props":[{"name":"blur","type":"number","default":"0","description":"Blur amount applied to the glow layer"},{"name":"inactiveZone","type":"number","default":"0.7","description":"Fraction of element radius where glow is inactive"},{"name":"proximity","type":"number","default":"0","description":"Extra pixel range outside element bounds where glow activates"},{"name":"spread","type":"number","default":"20","description":"Angular spread of the conic gradient in degrees"},{"name":"variant","type":"\"default\" | \"white\"","default":"\"default\"","description":"Color variant of the glow"},{"name":"glow","type":"boolean","default":"false","description":"Always show glow regardless of mouse position"},{"name":"disabled","type":"boolean","default":"true","description":"Disable the glowing effect"},{"name":"movementDuration","type":"number","default":"2","description":"Duration of the angle lerp animation"},{"name":"borderWidth","type":"number","default":"1","description":"Border width in pixels"}],"snippets":[],"events":[],"examples":["Basic Usage","White Variant","With Blur"]},{"name":"ImageTrailCursor","slug":"image-trail-cursor","description":"Trail of images that spawn and animate along the cursor's path, powered by GSAP timelines, with 18 selectable variants: fades, momentum drift, rotation flings, 3D perspective tilt, a hard-edge pixelated snap, a bouncy scale pop, images that fall or bounce under gravity, a flame flicker, and five fragment reveals (venetian, curtain, hexagon, liquid, zoom split)","category":"effects","group":"fancy","tags":["cursor","animation","images","trail","interactive"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["ImageTrailCursor"]},"react":{"package":"fancy-ui-react","names":["ImageTrailCursor"]},"vue":{"package":"fancy-ui-vue","names":["ImageTrailCursor"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/image-trail-cursor.md","react":"https://fancy-ui.rama.app/docs/components/react/image-trail-cursor.md","vue":"https://fancy-ui.rama.app/docs/components/vue/image-trail-cursor.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/image-trail-cursor.json","react":"https://fancy-ui.rama.app/r/image-trail-cursor.json","vue":"https://fancy-ui.rama.app/r/vue/image-trail-cursor.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/image-trail-cursor","props":[{"name":"images","type":"string[]","default":"[]","description":"Array of image URLs to show in the trail"},{"name":"variant","type":"\"type1\" | ... | \"type8\" | \"pixelated\" | \"scale\" | \"fall\" | \"gravity\" | \"flame\" | \"venetian\" | \"curtain\" | \"hexagon\" | \"liquid\" | \"zoom-split\"","default":"\"type1\"","description":"Animation variant controlling how images appear and move (see the README for what each one does)"},{"name":"class","type":"string","default":"\"\"","description":"Additional CSS classes for the container"}],"snippets":[],"events":[],"examples":["Basic Usage","Animation Variants"]},{"name":"InteractiveGridPattern","slug":"interactive-grid-pattern","description":"SVG grid of squares that highlight on hover with smooth fade transitions","category":"effects","group":"fancy","tags":["grid","pattern","interactive","hover","svg","background"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["InteractiveGridPattern"]},"react":{"package":"fancy-ui-react","names":["InteractiveGridPattern"]},"vue":{"package":"fancy-ui-vue","names":["InteractiveGridPattern"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/interactive-grid-pattern.md","react":"https://fancy-ui.rama.app/docs/components/react/interactive-grid-pattern.md","vue":"https://fancy-ui.rama.app/docs/components/vue/interactive-grid-pattern.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/interactive-grid-pattern.json","react":"https://fancy-ui.rama.app/r/interactive-grid-pattern.json","vue":"https://fancy-ui.rama.app/r/vue/interactive-grid-pattern.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/interactive-grid-pattern","props":[{"name":"squaresClassName","type":"string","description":"Additional CSS classes for individual squares"},{"name":"strokeClassName","type":"string","default":"\"stroke-gray-400/30\"","description":"Additional CSS classes controlling the square outline color"},{"name":"width","type":"number","default":"40","description":"Width of each square in pixels"},{"name":"height","type":"number","default":"40","description":"Height of each square in pixels"},{"name":"squares","type":"[number, number]","default":"[24, 24]","description":"Grid dimensions as [columns, rows]"},{"name":"interactive","type":"boolean","default":"true","description":"Whether squares respond to hover; when false, renders a static graph-paper grid with no per-rect listeners"}],"snippets":[],"events":[],"examples":["Basic Usage","Colored Variant","Static Graph Paper"]},{"name":"LiquidGlass","slug":"liquid-glass","description":"Glass-like visual effect using SVG filters for chromatic displacement","category":"effects","group":"fancy","tags":["glass","effect","svg","filter","chromatic","displacement","blur"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["LiquidGlass"]},"react":{"package":"fancy-ui-react","names":["LiquidGlass"]},"vue":{"package":"fancy-ui-vue","names":["LiquidGlass"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/liquid-glass.md","react":"https://fancy-ui.rama.app/docs/components/react/liquid-glass.md","vue":"https://fancy-ui.rama.app/docs/components/vue/liquid-glass.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/liquid-glass.json","react":"https://fancy-ui.rama.app/r/liquid-glass.json","vue":"https://fancy-ui.rama.app/r/vue/liquid-glass.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/liquid-glass","props":[{"name":"radius","type":"number","default":"16","description":"Border radius in pixels"},{"name":"border","type":"number","default":"0.07","description":"Border thickness as fraction of min dimension"},{"name":"lightness","type":"number","default":"50","description":"Background lightness percentage"},{"name":"displace","type":"number","description":"Optional Gaussian blur on the displacement output"},{"name":"blend","type":"string","default":"\"difference\"","description":"SVG blend mode for the displacement channels"},{"name":"xChannel","type":"\"R\" | \"G\" | \"B\"","default":"\"R\"","description":"X displacement channel selector"},{"name":"yChannel","type":"\"R\" | \"G\" | \"B\"","default":"\"B\"","description":"Y displacement channel selector"},{"name":"alpha","type":"number","default":"0.93","description":"Background fill alpha"},{"name":"blur","type":"number","default":"11","description":"Blur applied to the background fill layer"},{"name":"rOffset","type":"number","default":"0","description":"Red channel displacement offset"},{"name":"gOffset","type":"number","default":"10","description":"Green channel displacement offset"},{"name":"bOffset","type":"number","default":"20","description":"Blue channel displacement offset"},{"name":"scale","type":"number","default":"-180","description":"Displacement scale"},{"name":"frost","type":"number","default":"0.05","description":"Frosted glass opacity"},{"name":"fallbackBlur","type":"number","default":"20","description":"Backdrop blur in pixels for the Safari fallback"},{"name":"fallbackSaturation","type":"number","default":"180","description":"Backdrop saturation percentage for the Safari fallback"},{"name":"containerClass","type":"string","default":"\"\"","description":"CSS classes for the outer container"}],"snippets":[{"name":"children","description":"Content rendered inside the glass effect"}],"events":[],"examples":["Basic Usage","Landing Page Navbar"]},{"name":"Magnetic","slug":"magnetic","description":"A generic wrapper that pulls its child toward the pointer once it enters an activation field larger than the child's own box, and springs back to rest the instant the pointer leaves — a fine-pointer affordance with no touch or keyboard equivalent","category":"effects","group":"fancy","tags":["pointer","hover","cursor","magnetic","micro-interaction"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Magnetic"]},"react":{"package":"fancy-ui-react","names":["Magnetic"]},"vue":{"package":"fancy-ui-vue","names":["Magnetic"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/magnetic.md","react":"https://fancy-ui.rama.app/docs/components/react/magnetic.md","vue":"https://fancy-ui.rama.app/docs/components/vue/magnetic.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/magnetic.json","react":"https://fancy-ui.rama.app/r/magnetic.json","vue":"https://fancy-ui.rama.app/r/vue/magnetic.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/magnetic","props":[{"name":"strength","type":"number","default":"0.35","description":"Pull multiplier applied to the pointer's offset from the child's centre."},{"name":"radius","type":"number","default":"40","description":"Pixels the activation field extends beyond the outer element's own box, on every side. Also sizes the (transparent by default) `::before` halo."},{"name":"max","type":"number","default":"24","description":"Per-axis clamp (px) on the translated offset — a hard travel cap independent of element geometry, radius, or strength."},{"name":"disabled","type":"boolean","default":"false","description":"Disables the pull: no listeners are attached at all, and both translation vars are pinned at `0px`. Never touches the wrapped child's own `disabled` state."},{"name":"class","type":"string","description":"Additional CSS classes, merged onto the static outer wrapper."},{"name":"ref","type":"HTMLDivElement | null","default":"null","description":"Bindable reference to the outer (static, untransformed) wrapper element."}],"snippets":[{"name":"children","description":"The single wrapped element — a button, icon link, or card."}],"events":[],"examples":["Basic Usage","Strength"]},{"name":"MagneticField","slug":"magnetic-field","description":"Items are pulled toward a magnet and lean toward it, light ones more than heavy ones, then spring home. The magnet is the pointer or a draggable puck.","category":"effects","group":"fancy","tags":["magnet","pointer","spring","physics","attract","repel","drag","compound"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["MagneticField"]},"react":{"package":"fancy-ui-react","names":["MagneticField"]},"vue":{"package":"fancy-ui-vue","names":["MagneticField"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/magnetic-field.md","react":"https://fancy-ui.rama.app/docs/components/react/magnetic-field.md","vue":"https://fancy-ui.rama.app/docs/components/vue/magnetic-field.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/magnetic-field.json","react":"https://fancy-ui.rama.app/r/magnetic-field.json","vue":"https://fancy-ui.rama.app/r/vue/magnetic-field.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/magnetic-field","props":[{"name":"source","type":"\"pointer\" | \"manual\"","default":"\"pointer\"","description":"Where the magnet comes from. `\"pointer\"` follows a mouse or pen anywhere within `radius` of an item (touch is ignored); `\"manual\"` reads `position` instead. A `MagnetPuck` placed inside the field drives it in either mode while it is held."},{"name":"position","type":"MagneticPoint | null","default":"null","description":"The magnet's position in px, relative to the field's padding box, used when `source` is `\"manual\"`. `null` means no magnet, and the items spring back to rest."},{"name":"radius","type":"number","default":"220","description":"Falloff distance from the item's nearest edge, in px: an item pulls hardest when the magnet touches or overlaps it and stops moving once the magnet is `radius` px away. It can still lean up to twice as far."},{"name":"strength","type":"number","default":"1","description":"Global pull multiplier, applied on top of each item's own `strength`. `0` turns the effect off without detaching anything."},{"name":"maxTranslate","type":"number","default":"24","description":"Largest distance, in px, that any item travels toward the magnet."},{"name":"maxRotate","type":"number","default":"6","description":"Largest lean, in degrees. Items lean toward the magnet's side like a crowd turning its head: clockwise when it is to their left, counter-clockwise when it is to their right."},{"name":"spring","type":"MagneticSpringPreset | Partial<MagneticSpring>","default":"\"default\"","description":"How items move and settle: `\"soft\"`, `\"default\"` or `\"snappy\"`, or your own `{ stiffness, damping, mass }` (missing keys come from `\"default\"`)."},{"name":"polarity","type":"1 | -1","default":"1","description":"`1` attracts and `-1` repels. Only translation flips; the lean stays the same."},{"name":"disabled","type":"boolean","default":"false","description":"Detaches every listener and springs each item back to rest."},{"name":"onActiveChange","type":"(active: boolean) => void","description":"Called when the field wakes up (a magnet is engaged or an item is still settling) and when it goes back to sleep."},{"name":"class","type":"string","description":"Additional CSS classes."},{"name":"ref","type":"HTMLDivElement | null","default":"null","description":"Element reference (bindable)."},{"name":"MagneticItem.mass","type":"number","default":"1","description":"How heavy the item is. Above 1 it moves and leans less and settles more slowly; below 1 it is livelier."},{"name":"MagneticItem.strength","type":"number","default":"1","description":"Per-item pull multiplier, applied on top of the field's `strength`."},{"name":"MagneticItem.pull","type":"boolean","default":"true","description":"Whether the item moves toward the magnet."},{"name":"MagneticItem.rotate","type":"boolean","default":"true","description":"Whether the item leans toward the magnet."},{"name":"MagneticItem.inline","type":"boolean","default":"false","description":"Renders `<span>` wrappers with `display: inline-block` instead of block `<div>`s, for items that sit inside a line of text or an inline row."},{"name":"MagneticItem.class","type":"string","description":"Additional CSS classes, on the static outer wrapper."},{"name":"MagneticItem.ref","type":"HTMLElement | null","default":"null","description":"Reference to the static outer wrapper (bindable)."},{"name":"MagnetPuck.position","type":"MagneticPoint","default":"{ x: 48, y: 48 }","description":"The puck's centre in px, relative to its positioned parent (the field's padding box when it sits inside a `MagneticField`, where the field must be that parent: no positioned element in between). Bindable; dragging and the arrow keys update it."},{"name":"MagnetPuck.onPositionChange","type":"(position: MagneticPoint) => void","description":"Called with each new position while the puck is dragged or moved with the keyboard."},{"name":"MagnetPuck.size","type":"number","default":"40","description":"Diameter in px."},{"name":"MagnetPuck.sticky","type":"boolean","default":"false","description":"Whether the puck keeps attracting once released. By default it attracts only while held, and the items spring back when it is let go."},{"name":"MagnetPuck.label","type":"string","default":"\"Magnet\"","description":"Accessible name. A built-in hint naming the keys describes the puck; pass your own `aria-describedby` to replace it."},{"name":"MagnetPuck.onHeldChange","type":"(held: boolean) => void","description":"Called when the puck is picked up (pointer down, or Space/Enter) and put down."},{"name":"MagnetPuck.class","type":"string","description":"Additional CSS classes."},{"name":"MagnetPuck.ref","type":"HTMLDivElement | null","default":"null","description":"Element reference (bindable)."}],"snippets":[{"name":"children","description":"The content. Wrap each element that should react in a `MagneticItem`."},{"name":"MagneticItem.children","description":"The element that reacts."},{"name":"MagnetPuck.children","description":"A custom face. Leave it out for the default black disc."}],"events":[],"examples":["Basic Usage","Pointer Field","Repel","Interactive Playground"]},{"name":"Meteors","slug":"meteors","description":"Meteor shower in depth: seeded meteors with glowing heads and tapering tails fall diagonally in parallax (near ones larger, brighter and faster), fading in and burning out, a few flaring before they go","category":"effects","group":"fancy","tags":["animation","meteors","particles","decoration","space","shooting stars"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Meteors"]},"react":{"package":"fancy-ui-react","names":["Meteors"]},"vue":{"package":"fancy-ui-vue","names":["Meteors"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/meteors.md","react":"https://fancy-ui.rama.app/docs/components/react/meteors.md","vue":"https://fancy-ui.rama.app/docs/components/vue/meteors.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/meteors.json","react":"https://fancy-ui.rama.app/r/meteors.json","vue":"https://fancy-ui.rama.app/r/vue/meteors.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/meteors","props":[{"name":"count","type":"number","default":"20","description":"Number of meteors to render"},{"name":"angle","type":"number","default":"215","description":"Direction of travel in degrees (215 = down and to the right)"},{"name":"speed","type":"number","default":"1","description":"Speed multiplier"},{"name":"color","type":"string","description":"Head and tail colour; defaults to pale blue-white on dark pages and slate on light ones"},{"name":"seed","type":"number","default":"1","description":"Seed for the field; same seed, same shower on server and client"},{"name":"class","type":"string","description":"Additional CSS classes on each meteor"}],"snippets":[],"events":[],"examples":["Basic Usage","Custom Count","Card Example","Options"]},{"name":"NeonBorder","slug":"neon-border","description":"Two-colour neon tube around its content: two beams with white-hot cores chase each other along a faint tube, their glow spilling inside and outside the edge, humming slowly after a flicker on ignition","category":"effects","group":"fancy","tags":["border","neon","glow","animation","gradient","decoration"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["NeonBorder"]},"react":{"package":"fancy-ui-react","names":["NeonBorder"]},"vue":{"package":"fancy-ui-vue","names":["NeonBorder"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/neon-border.md","react":"https://fancy-ui.rama.app/docs/components/react/neon-border.md","vue":"https://fancy-ui.rama.app/docs/components/vue/neon-border.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/neon-border.json","react":"https://fancy-ui.rama.app/r/neon-border.json","vue":"https://fancy-ui.rama.app/r/vue/neon-border.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/neon-border","props":[{"name":"color1","type":"string","default":"\"#0496ff\"","description":"First neon color"},{"name":"color2","type":"string","default":"\"#ff0a54\"","description":"Second neon color"},{"name":"animationType","type":"\"none\" | \"half\" | \"full\"","default":"\"half\"","description":"How much of the tube is lit: none (two lit corners, static), half (two short beams chasing), full (two long beams that nearly close the ring)"},{"name":"duration","type":"number","default":"6","description":"Time for the beams to travel once around, in seconds"}],"snippets":[{"name":"children","description":"Content to display inside the neon border container"}],"events":[],"examples":["Basic Usage","Animation Types","Custom Colors","Speed Variations","Interactive Playground"]},{"name":"PixelScene","slug":"pixel-scene","description":"An animated pixel-art landscape on a dot grid: sparse ink dots at rest, full colour under a round lens that follows the pointer, separate day and night palettes, and on HDR displays lit windows, stars and the sun drawn as squares brighter than SDR white. Four scenes: alpine, meadow, sea and mountains.","category":"effects","group":"fancy","tags":["pixel","dither","canvas","scene","lens","hdr","landscape"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["PixelScene"]},"react":{"package":"fancy-ui-react","names":["PixelScene"]},"vue":{"package":"fancy-ui-vue","names":["PixelScene"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/pixel-scene.md","react":"https://fancy-ui.rama.app/docs/components/react/pixel-scene.md","vue":"https://fancy-ui.rama.app/docs/components/vue/pixel-scene.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/pixel-scene.json","react":"https://fancy-ui.rama.app/r/pixel-scene.json","vue":"https://fancy-ui.rama.app/r/vue/pixel-scene.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/pixel-scene","props":[{"name":"scene","type":"\"alpine\" | \"meadow\" | \"sea\" | \"mountains\"","default":"\"alpine\"","description":"Which landscape to paint."},{"name":"night","type":"boolean","default":"false","description":"Night palette: stars, moonlit snow, lit windows. The component never changes it; toggle it from your own click or theme."},{"name":"cell","type":"number","default":"5","description":"Grid pitch in CSS pixels. Very large boxes use a coarser pitch so a frame stays under about 72 000 cells."},{"name":"dot","type":"number","default":"4","description":"Edge of each square dot in CSS pixels (at most `cell`)."},{"name":"lens","type":"boolean","default":"true","description":"Shows the picture in full colour under a round lens that follows the pointer."},{"name":"lensRadius","type":"number","default":"21","description":"Lens radius in cells. Its rim is dithered on the grid."},{"name":"hdr","type":"boolean","default":"true","description":"On a display that reports HDR, redraws the sun, windows, stars and the lens in a WebGPU layer brighter than SDR white. Elsewhere nothing is created."},{"name":"hdrLook","type":"\"calibrated\" | \"vivid\"","default":"\"calibrated\"","description":"HDR rendering: calibrated levels (glow 1 is the SDR dot, sRGB), or vivid, a hotter, wider-gamut look (display-p3) with lamps at the panel peak."},{"name":"ink","type":"string","default":"\"currentColor\"","description":"Colour of the resting dots outside the lens. Resolved on the host, so it follows the theme."},{"name":"paused","type":"boolean","default":"false","description":"Freezes clouds, birds and lights; the lens still follows the pointer."},{"name":"wave","type":"boolean","default":"true","description":"Plays a change of `night` as a dithered wave spreading from the sun (or moon), led by a halo that glows on HDR displays. Off under reduced motion."},{"name":"surfaces","type":"readonly [day: string, night: string]","default":"—","description":"Background painted by the scene for each theme; the wave carries it from one to the other. Without it the canvas is transparent."},{"name":"inks","type":"readonly [day: string, night: string]","default":"—","description":"Dot colour for each theme, swapped by the wave. Overrides `ink`."},{"name":"class","type":"string","description":"Additional classes on the host. Give it a height."}],"snippets":[{"name":"children","description":"Copy rendered above the picture. Keep it in the top-left corner, which every scene leaves open."}],"events":[],"examples":["Basic Usage","Scenes","Hours of low light","Interactive Playground"]},{"name":"Presence","slug":"presence","description":"Mounts and unmounts content with a real entrance and exit through one direction-aware transition, tracking opening/open/closing state, marking the panel inert while it closes, and firing lifecycle callbacks","category":"effects","group":"fancy","tags":["animation","presence","transition","mount","exit","micro-interaction"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Presence"]},"react":{"package":"fancy-ui-react","names":["Presence"]},"vue":{"package":"fancy-ui-vue","names":["Presence"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/presence.md","react":"https://fancy-ui.rama.app/docs/components/react/presence.md","vue":"https://fancy-ui.rama.app/docs/components/vue/presence.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/presence.json","react":"https://fancy-ui.rama.app/r/presence.json","vue":"https://fancy-ui.rama.app/r/vue/presence.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/presence","props":[{"name":"open","type":"boolean","required":true,"description":"Whether the content is mounted and, once the entrance settles, visible"},{"name":"preset","type":"\"fade\" | \"fade-up\" | \"fade-down\" | \"fade-left\" | \"fade-right\" | \"scale\" | \"blur\" | \"zoom\"","default":"\"fade\"","description":"The entrance/exit look"},{"name":"duration","type":"number","default":"300","description":"Entrance duration in ms"},{"name":"exitDuration","type":"number","default":"200","description":"Exit duration in ms — shorter than the entrance by default; leaving reads faster than arriving"},{"name":"delay","type":"number","default":"0","description":"Delay in ms before the entrance starts; applied to the exit too"},{"name":"distance","type":"number","default":"16","description":"Entrance travel distance in px for the four directional presets — the exit travels half as far"},{"name":"inert","type":"boolean","default":"true","description":"Whether the panel is inert while closing (Svelte already does this natively for any transitioning element — false is an explicit opt-out)"},{"name":"onEnterEnd","type":"() => void","description":"Fires once the entrance transition settles (onintroend)"},{"name":"onExitEnd","type":"() => void","description":"Fires once the exit transition settles (onoutroend) — not guaranteed if the component is destroyed mid-exit"},{"name":"class","type":"string","description":"Additional CSS classes, merged onto the root"},{"name":"ref","type":"HTMLDivElement | null","default":"null","description":"Bindable reference to the root element — null while closed"}],"snippets":[{"name":"children","description":"Panel content"}],"events":[],"examples":["Basic Usage","Presets"]},{"name":"PulseBeam","slug":"pulse-beam","description":"Breathing border glow that wraps any card: colour blobs drift along the edges as a crisp 1px ring, a feathered inner glow and a blurred bloom, with slow hue rotation, fade in/out on an active flag, four palettes and an outside halo variant","category":"effects","group":"fancy","tags":["border","glow","pulse","gradient","mask","animation","ai","loading"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["PulseBeam"]},"react":{"package":"fancy-ui-react","names":["PulseBeam"]},"vue":{"package":"fancy-ui-vue","names":["PulseBeam"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/pulse-beam.md","react":"https://fancy-ui.rama.app/docs/components/react/pulse-beam.md","vue":"https://fancy-ui.rama.app/docs/components/vue/pulse-beam.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/pulse-beam.json","react":"https://fancy-ui.rama.app/r/pulse-beam.json","vue":"https://fancy-ui.rama.app/r/vue/pulse-beam.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/pulse-beam","props":[{"name":"active","type":"boolean","default":"true","description":"Show the glow. Turning it off fades out over 500ms and stops the animation loop; turning it on fades in over 600ms"},{"name":"variant","type":"\"inner\" | \"outside\"","default":"\"inner\"","description":"inner paints a 1px ring, a 28px feather and a bloom inside the box; outside keeps the ring and adds a blurred halo behind the content"},{"name":"palette","type":"\"colorful\" | \"mono\" | \"ocean\" | \"sunset\"","default":"\"colorful\"","description":"Built-in nine-slot colour set. mono halves the opacities and disables hue drift"},{"name":"colors","type":"string[]","description":"Up to nine CSS colours overriding the palette slots in order"},{"name":"strength","type":"number","default":"1","description":"Overall intensity, 0 to 1"},{"name":"radius","type":"number","default":"16","description":"Corner radius in px applied to the wrapper and every layer"},{"name":"speed","type":"number","default":"1","description":"Multiplier for the breathing and drift periods"},{"name":"tone","type":"\"dark\" | \"light\"","default":"\"dark\"","description":"Opacity, brightness and saturation preset for the surface the card sits on"},{"name":"hueShift","type":"boolean","default":"true","description":"Slowly rotate all hues over a 14 to 16 second cycle"},{"name":"brightness","type":"number","description":"Override the preset brightness filter"},{"name":"saturation","type":"number","description":"Override the preset saturation filter"},{"name":"onfadein","type":"() => void","description":"Called once the fade-in has completed"},{"name":"onfadeout","type":"() => void","description":"Called once the fade-out has completed and the loop has stopped"},{"name":"ref","type":"HTMLDivElement | null","default":"null","description":"Bindable wrapper element"},{"name":"class","type":"string","description":"Additional classes on the wrapper"}],"snippets":[{"name":"children","description":"Content the glow wraps; give it an opaque background and the same radius"}],"events":[],"examples":["Basic Usage","Working State","Outside Variant","Palettes","Pill Button","Interactive Playground"]},{"name":"Reveal","slug":"reveal","description":"Content-agnostic entrance animation triggered by scroll, mount, or a manual switch, with six directional/scale presets and an arbitrary-length JS-computed stagger for direct children","category":"effects","group":"fancy","tags":["animation","reveal","scroll","stagger","entrance","micro-interaction"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Reveal"]},"react":{"package":"fancy-ui-react","names":["Reveal"]},"vue":{"package":"fancy-ui-vue","names":["Reveal"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/reveal.md","react":"https://fancy-ui.rama.app/docs/components/react/reveal.md","vue":"https://fancy-ui.rama.app/docs/components/vue/reveal.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/reveal.json","react":"https://fancy-ui.rama.app/r/reveal.json","vue":"https://fancy-ui.rama.app/r/vue/reveal.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/reveal","props":[{"name":"preset","type":"\"fade\" | \"fade-up\" | \"fade-down\" | \"fade-left\" | \"fade-right\" | \"scale\"","default":"\"fade-up\"","description":"Which directional/scale look to animate with"},{"name":"trigger","type":"\"view\" | \"mount\" | \"manual\"","default":"\"view\"","description":"What starts the reveal — viewport, next frame after mount, or the active prop"},{"name":"active","type":"boolean","default":"false","description":"Read only when trigger=\"manual\" — true reveals, false re-arms"},{"name":"once","type":"boolean","default":"true","description":"Disconnects the observer after the first reveal; false re-arms on leaving the viewport (trigger=\"view\" only)"},{"name":"threshold","type":"number","default":"0.1","description":"IntersectionObserver threshold (trigger=\"view\" only)"},{"name":"rootMargin","type":"string","default":"\"0px 0px -10% 0px\"","description":"IntersectionObserver rootMargin (trigger=\"view\" only)"},{"name":"duration","type":"number","default":"600","description":"Entrance duration in ms"},{"name":"delay","type":"number","default":"0","description":"Delay before the entrance starts, in ms"},{"name":"easing","type":"string","default":"\"cubic-bezier(0.16, 1, 0.3, 1)\"","description":"CSS easing for the entrance"},{"name":"distance","type":"number","default":"16","description":"Travel distance in px for the four directional presets — ignored by scale"},{"name":"stagger","type":"number","default":"0","description":"Milliseconds per stagger step; 0 animates the root, any positive value animates direct element children instead"},{"name":"from","type":"\"first\" | \"last\" | \"center\" | number","default":"\"first\"","description":"Where the stagger counts distance from — only meaningful when stagger is greater than 0"},{"name":"initial","type":"\"hidden\" | \"visible\"","default":"\"hidden\"","description":"Server-rendered starting state: \"hidden\" paints the content hidden until it reveals (no flash); \"visible\" paints it visible and hides it on mount, accepting a flash in exchange for no-JS and non-hydrated safety"},{"name":"as","type":"keyof HTMLElementTagNameMap","default":"\"div\"","description":"The element tag Reveal renders as, via <svelte:element>"},{"name":"onReveal","type":"() => void","description":"Fires once per reveal, the moment the state reaches visible — every re-reveal when once is false"},{"name":"class","type":"string","description":"Additional CSS classes, merged onto the root"},{"name":"ref","type":"HTMLElement | null","default":"null","description":"Bindable reference to the root element"}],"snippets":[{"name":"children","description":"Content to reveal"}],"events":[],"examples":["Basic Usage","Stagger","Manual Trigger"]},{"name":"Ripple","slug":"ripple","description":"Set of concentric circles that pulse in a staggered wave, each ring larger, more transparent, and more delayed than the last, with the outermost ring rendered dashed to suggest a fading signal","category":"effects","group":"fancy","tags":["animation","ripple","circles","decoration","pulse"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Ripple"]},"react":{"package":"fancy-ui-react","names":["Ripple"]},"vue":{"package":"fancy-ui-vue","names":["Ripple"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/ripple.md","react":"https://fancy-ui.rama.app/docs/components/react/ripple.md","vue":"https://fancy-ui.rama.app/docs/components/vue/ripple.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/ripple.json","react":"https://fancy-ui.rama.app/r/ripple.json","vue":"https://fancy-ui.rama.app/r/vue/ripple.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/ripple","props":[{"name":"baseCircleSize","type":"number","default":"210","description":"Diameter of the smallest (innermost) circle in pixels"},{"name":"baseCircleOpacity","type":"number","default":"0.24","description":"Opacity of the innermost circle"},{"name":"spaceBetweenCircle","type":"number","default":"70","description":"Extra pixels added to each successive circle"},{"name":"circleOpacityDowngradeRatio","type":"number","default":"0.03","description":"Opacity reduction per circle outward"},{"name":"circleClass","type":"string","default":"\"\"","description":"Additional CSS classes applied to each circle"},{"name":"waveSpeed","type":"number","default":"80","description":"Animation delay between circles in ms"},{"name":"numberOfCircles","type":"number","default":"7","description":"Total number of concentric circles"}],"snippets":[],"events":[],"examples":["Basic Usage","Styled Circles","Interactive Playground"]},{"name":"SmoothCursor","slug":"smooth-cursor","description":"Multiplayer-style cursor: an upright coloured arrow with a white rim follows the pointer on a spring, and a name pill trails it on a softer spring and dims when idle.","category":"effects","group":"fancy","tags":["cursor","animation","spring","physics","interactive","multiplayer","collaboration","presence"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["SmoothCursor"]},"react":{"package":"fancy-ui-react","names":["SmoothCursor"]},"vue":{"package":"fancy-ui-vue","names":["SmoothCursor"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/smooth-cursor.md","react":"https://fancy-ui.rama.app/docs/components/react/smooth-cursor.md","vue":"https://fancy-ui.rama.app/docs/components/vue/smooth-cursor.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/smooth-cursor.json","react":"https://fancy-ui.rama.app/r/smooth-cursor.json","vue":"https://fancy-ui.rama.app/r/vue/smooth-cursor.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/smooth-cursor","props":[{"name":"springConfig","type":"SpringConfig","default":"{}","description":"Spring physics configuration with damping, stiffness, and mass"},{"name":"label","type":"string","default":"undefined","description":"Name shown in a pill that trails the arrow on its own softer spring. No pill when omitted."},{"name":"color","type":"string","default":"\"#0e9f6e\"","description":"Fill colour of the arrow and the name pill (any CSS colour). Can also be overridden from a class with --smooth-cursor-color."},{"name":"rotate","type":"boolean","default":"false","description":"Rotate the cursor toward its direction of travel (pivoting on its centre). When false, the arrow stays upright with its tip as the hotspot."},{"name":"idleFade","type":"number","default":"1500","description":"Milliseconds without pointer movement before the name pill dims to 35% opacity; 0 disables it."},{"name":"labelSpring","type":"SpringConfig","default":"derived","description":"Spring for the name pill. Missing fields derive from springConfig (stiffness × 0.55, damping × 1.1, same mass)."}],"snippets":[{"name":"cursor","description":"Custom cursor element (replaces the default arrow; the name pill still renders when label is set)"}],"events":[],"examples":["Basic Usage","Multiplayer Canvas"]},{"name":"TracingBeam","slug":"tracing-beam","description":"A reading lamp on a rail beside long-form content: it trails the reader's eye on a spring, leaves what has been read softly lit, and ticks off each heading as it passes","category":"effects","group":"fancy","tags":["scroll","animation","beam","progress","reading","sidebar","headings"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["TracingBeam"]},"react":{"package":"fancy-ui-react","names":["TracingBeam"]},"vue":{"package":"fancy-ui-vue","names":["TracingBeam"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/tracing-beam.md","react":"https://fancy-ui.rama.app/docs/components/react/tracing-beam.md","vue":"https://fancy-ui.rama.app/docs/components/vue/tracing-beam.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/tracing-beam.json","react":"https://fancy-ui.rama.app/r/tracing-beam.json","vue":"https://fancy-ui.rama.app/r/vue/tracing-beam.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/tracing-beam","props":[{"name":"accent","type":"string","default":"undefined (follows --primary, falls back to oklch(0.7 0.13 285))","description":"Colour of the lamp, its trail and the lit markers. Any CSS colour; also settable via the --tracing-beam-accent CSS variable."},{"name":"readingLine","type":"number","default":"0.38","description":"Where the reader's eye is assumed to be, as a fraction of the viewport height from the top. The lamp sits on that line, clamped to the content."},{"name":"markers","type":"boolean","default":"true","description":"Draw a marker on the rail for every heading (h1–h4) inside the content, or for every direct child when there is none. Markers light up as the lamp passes them."}],"snippets":[{"name":"children","description":"Long-form content the beam reads alongside"}],"events":[],"examples":["Basic Usage"]},{"name":"ContainerScroll","slug":"container-scroll","description":"Scroll-driven aperture: the card opens from a bright seam as it enters the viewport while its content settles into focus and the title blurs away, with no 3D tilt","category":"layout","group":"fancy","tags":["layout","scroll","animation","aperture","reveal"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["ContainerScroll"]},"react":{"package":"fancy-ui-react","names":["ContainerScroll"]},"vue":{"package":"fancy-ui-vue","names":["ContainerScroll"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/container-scroll.md","react":"https://fancy-ui.rama.app/docs/components/react/container-scroll.md","vue":"https://fancy-ui.rama.app/docs/components/vue/container-scroll.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/container-scroll.json","react":"https://fancy-ui.rama.app/r/container-scroll.json","vue":"https://fancy-ui.rama.app/r/vue/container-scroll.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/container-scroll","props":[{"name":"accent","type":"string","default":"undefined (soft blue #8fb2ff via --cs-accent)","description":"Seam colour; its white-hot core is mixed from it"},{"name":"accentSecondary","type":"string","default":"undefined (soft lilac #c3b1ff via --cs-accent-2)","description":"Second seam tint, blended towards the ends of the seam and lips"}],"snippets":[{"name":"titleContent","description":"Header/title content that blurs and fades as the card opens"},{"name":"cardContent","description":"Content revealed through the aperture; settles from a slight zoom into focus"}],"events":[],"examples":["Basic Usage"]},{"name":"Marquee","slug":"marquee","description":"An eased conveyor of repeated content that dissolves into soft edge fades and, on hover or focus, brakes smoothly to a stop and pulls away again instead of freezing.","category":"layout","group":"fancy","tags":["marquee","scrolling","animation","layout","infinite","edge fade","web animations"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Marquee"]},"react":{"package":"fancy-ui-react","names":["Marquee"]},"vue":{"package":"fancy-ui-vue","names":["Marquee"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/marquee.md","react":"https://fancy-ui.rama.app/docs/components/react/marquee.md","vue":"https://fancy-ui.rama.app/docs/components/vue/marquee.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/marquee.json","react":"https://fancy-ui.rama.app/r/marquee.json","vue":"https://fancy-ui.rama.app/r/vue/marquee.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/marquee","props":[{"name":"reverse","type":"boolean","default":"false","description":"Reverse the scroll direction"},{"name":"pauseOnHover","type":"boolean","default":"false","description":"Ease the conveyor to a stop while hovered or focused, and back up on leave"},{"name":"vertical","type":"boolean","default":"false","description":"Scroll vertically instead of horizontally"},{"name":"repeat","type":"number","default":"4","description":"Number of times to repeat children for seamless loop"},{"name":"fade","type":"boolean","default":"true","description":"Dissolve items at both edges with an eased gradient mask (width via --marquee-fade, default 12%)"},{"name":"speed","type":"number","default":"1","description":"Speed multiplier on top of --duration (2 = twice as fast)"},{"name":"ReviewCard.img","type":"string","description":"Avatar image URL"},{"name":"ReviewCard.name","type":"string","description":"Reviewer's name"},{"name":"ReviewCard.username","type":"string","description":"Reviewer's handle, shown under the name"},{"name":"ReviewCard.body","type":"string","description":"Text of the review"}],"snippets":[{"name":"children","description":"Content to repeat and scroll"}],"events":[],"examples":["Basic Usage","Vertical","Eased Stop"]},{"name":"StickyScroll","slug":"sticky-scroll","description":"Two-column scroll narrative with a scrolling item list and a sticky panel that swaps its content to the item centred in view, stacking to a single top-sticky panel over the items on narrow containers","category":"layout","group":"fancy","tags":["scroll","layout","sticky","narrative","scrollytelling","micro-interaction"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["StickyScroll"]},"react":{"package":"fancy-ui-react","names":["StickyScroll"]},"vue":{"package":"fancy-ui-vue","names":["StickyScroll"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/sticky-scroll.md","react":"https://fancy-ui.rama.app/docs/components/react/sticky-scroll.md","vue":"https://fancy-ui.rama.app/docs/components/vue/sticky-scroll.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/sticky-scroll.json","react":"https://fancy-ui.rama.app/r/sticky-scroll.json","vue":"https://fancy-ui.rama.app/r/vue/sticky-scroll.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/sticky-scroll","props":[{"name":"items","type":"T[]","description":"Required. The items rendered down the scrolling column.","required":true},{"name":"activeIndex","type":"number","default":"0","description":"Bindable. The active item's index. Holds its last value when nothing intersects the centre line."},{"name":"panelSide","type":"\"start\" | \"end\"","default":"\"end\"","description":"Which logical side the panel sits on. Flips physically under dir=\"rtl\"."},{"name":"crossfade","type":"boolean","default":"true","description":"Whether the panel crossfades between items. Effective value is always false under reduced motion."},{"name":"panelClass","type":"string","description":"Additional CSS classes for the sticky panel wrapper."},{"name":"panelHidden","type":"boolean","default":"true","description":"Whether the panel is aria-hidden. Set false when the panel holds content found nowhere else."},{"name":"onChange","type":"(index: number, item: T) => void","description":"Called only when the active index actually changes."},{"name":"class","type":"string","description":"Additional CSS classes for the root"},{"name":"ref","type":"HTMLDivElement | null","default":"null","description":"Bindable reference to the root element"}],"snippets":[{"name":"item","description":"Renders one row, given the item, its index, and whether it's the active one: (item, index, active). (Snippet<[T, number, boolean]>)"},{"name":"panel","description":"Renders the sticky panel's content for the active item: (item, index). (Snippet<[T, number]>)"}],"events":[],"examples":["Basic Usage"]},{"name":"Accordion","slug":"accordion","description":"A stack of headed sections where one or several open at a time, with a collapse that animates without measuring, arrow-key navigation between headers and labelled regions for assistive tech.","category":"navigation","group":"core","tags":["accordion","disclosure","faq","collapse","compound","navigation"],"dependencies":["collapsible"],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Accordion"]},"react":{"package":"fancy-ui-react","names":["Accordion"]},"vue":{"package":"fancy-ui-vue","names":["Accordion"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/accordion.md","react":"https://fancy-ui.rama.app/docs/components/react/accordion.md","vue":"https://fancy-ui.rama.app/docs/components/vue/accordion.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/accordion.json","react":"https://fancy-ui.rama.app/r/accordion.json","vue":"https://fancy-ui.rama.app/r/vue/accordion.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/accordion","props":[{"name":"type","type":"\"single\" | \"multiple\"","default":"\"single\"","description":"\"single\" keeps one item open at a time, \"multiple\" lets any number be open."},{"name":"value","type":"string | string[]","description":"The open item, bindable. A string for type=\"single\" (\"\" when none is open), a string array for type=\"multiple\"."},{"name":"onValueChange","type":"(value: string | string[]) => void","description":"Called with the new value each time an item toggles."},{"name":"collapsible","type":"boolean","default":"false","description":"With type=\"single\", lets the open item be closed again. Without it one item stays open once opened."},{"name":"disabled","type":"boolean","default":"false","description":"Disables every item."},{"name":"orientation","type":"\"horizontal\" | \"vertical\"","default":"\"vertical\"","description":"The axis the items stack on, and which arrow-key pair moves focus."},{"name":"class","type":"string","description":"Additional CSS classes, merged onto the root."},{"name":"ref","type":"HTMLDivElement | null","default":"null","description":"Bindable reference to the root element."},{"name":"AccordionItem.value","type":"string","required":true,"description":"This item's value: what the accordion's value holds while it is open."},{"name":"AccordionItem.disabled","type":"boolean","default":"false","description":"Disables just this item; its trigger is skipped by the arrow keys."},{"name":"AccordionItem.class","type":"string","description":"Additional CSS classes, merged onto the item."},{"name":"AccordionItem.ref","type":"HTMLDivElement | null","default":"null","description":"Bindable reference to the item element."},{"name":"AccordionTrigger.headingLevel","type":"1 | 2 | 3 | 4 | 5 | 6","default":"3","description":"The level of the heading that wraps the trigger button."},{"name":"AccordionTrigger.disabled","type":"boolean","default":"false","description":"Disables just this trigger, on top of its item and the accordion."},{"name":"AccordionTrigger.class","type":"string","description":"Additional CSS classes, merged onto the trigger button."},{"name":"AccordionTrigger.ref","type":"HTMLButtonElement | null","default":"null","description":"Bindable reference to the trigger's button element."},{"name":"AccordionContent.forceMount","type":"boolean","default":"true","description":"Keeps the children mounted while the item is closed. Pass false to unmount them once the collapse has finished."},{"name":"AccordionContent.class","type":"string","description":"Additional CSS classes, merged onto the inner body so padding collapses with the panel."},{"name":"AccordionContent.ref","type":"HTMLDivElement | null","default":"null","description":"Bindable reference to the region element that animates."}],"snippets":[{"name":"children","description":"The AccordionItems."},{"name":"AccordionItem.children","description":"An AccordionTrigger and an AccordionContent."},{"name":"AccordionTrigger.children","description":"The trigger's label."},{"name":"AccordionContent.children","description":"The item's content."}],"events":[],"examples":["Basic Usage","Multiple","Controlled"]},{"name":"Breadcrumb","slug":"breadcrumb","description":"A data-driven trail of links with automatic truncation, a decorative separator, and the current page marked for assistive tech.","category":"navigation","group":"core","tags":["breadcrumb","trail","navigation","truncation"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Breadcrumb"]},"react":{"package":"fancy-ui-react","names":["Breadcrumb"]},"vue":{"package":"fancy-ui-vue","names":["Breadcrumb"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/breadcrumb.md","react":"https://fancy-ui.rama.app/docs/components/react/breadcrumb.md","vue":"https://fancy-ui.rama.app/docs/components/vue/breadcrumb.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/breadcrumb.json","react":"https://fancy-ui.rama.app/r/breadcrumb.json","vue":"https://fancy-ui.rama.app/r/vue/breadcrumb.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/breadcrumb","props":[{"name":"items","type":"BreadcrumbItem[]","required":true,"description":"The full trail, first to last. The last entry is always the current page."},{"name":"maxItems","type":"number","default":"0","description":"Collapse the trail once it holds more than this many items. 0 never collapses."},{"name":"itemsBeforeCollapse","type":"number","default":"1","description":"How many leading items stay visible once collapsed."},{"name":"itemsAfterCollapse","type":"number","default":"1","description":"How many trailing items stay visible once collapsed. Floored at 1 — the current page is never hidden."},{"name":"separator","type":"string","default":"\"/\"","description":"Separator glyph rendered between crumbs. Decorative — never read by a screen reader."},{"name":"label","type":"string","default":"\"Breadcrumb\"","description":"Accessible name for the nav."},{"name":"class","type":"string","description":"Additional CSS classes, merged onto the nav."},{"name":"ref","type":"HTMLElement | null","default":"null","description":"Bindable reference to the nav element."},{"name":"sound","type":"boolean","default":"false","description":"Plays select when a default-rendered crumb link is activated, once the user has enabled sound"}],"snippets":[{"name":"item","description":"Custom rendering for one crumb, given the item and its index in items (Snippet<[BreadcrumbItem, number]>). Optional — fully replaces the default link/current-page rendering, including aria-current, once supplied."}],"events":[],"examples":["Basic Usage","Truncated","Custom Separator"]},{"name":"Collapsible","slug":"collapsible","description":"A single disclosure: a trigger that expands and collapses a region, animated without measuring so an interrupted toggle simply reverses, with the closed content kept in the page.","category":"navigation","group":"core","tags":["collapsible","disclosure","expand","collapse","compound","navigation"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Collapsible"]},"react":{"package":"fancy-ui-react","names":["Collapsible"]},"vue":{"package":"fancy-ui-vue","names":["Collapsible"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/collapsible.md","react":"https://fancy-ui.rama.app/docs/components/react/collapsible.md","vue":"https://fancy-ui.rama.app/docs/components/vue/collapsible.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/collapsible.json","react":"https://fancy-ui.rama.app/r/collapsible.json","vue":"https://fancy-ui.rama.app/r/vue/collapsible.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/collapsible","props":[{"name":"open","type":"boolean","default":"false","description":"Whether the content is expanded, bindable."},{"name":"onOpenChange","type":"(open: boolean) => void","description":"Called with the new state each time the trigger toggles it."},{"name":"disabled","type":"boolean","default":"false","description":"Makes the trigger inert. A bound open can still be changed from outside."},{"name":"class","type":"string","description":"Additional CSS classes, merged onto the root."},{"name":"ref","type":"HTMLDivElement | null","default":"null","description":"Bindable reference to the root element."},{"name":"CollapsibleTrigger.disabled","type":"boolean","default":"false","description":"Disables this trigger on top of the root's own disabled."},{"name":"CollapsibleTrigger.class","type":"string","description":"Additional CSS classes, merged onto the trigger button."},{"name":"CollapsibleTrigger.ref","type":"HTMLButtonElement | null","default":"null","description":"Bindable reference to the trigger's button element."},{"name":"CollapsibleContent.forceMount","type":"boolean","default":"true","description":"Keeps the children mounted while closed (inert and hidden). Pass false to unmount them once the collapse has finished and mount them again on open."},{"name":"CollapsibleContent.class","type":"string","description":"Additional CSS classes, merged onto the inner body so padding collapses with the panel."},{"name":"CollapsibleContent.ref","type":"HTMLDivElement | null","default":"null","description":"Bindable reference to the region element that animates."}],"snippets":[{"name":"children","description":"A CollapsibleTrigger and a CollapsibleContent."},{"name":"CollapsibleTrigger.children","description":"The trigger's content."},{"name":"CollapsibleContent.children","description":"The content."}],"events":[],"examples":["Basic Usage","Multiple","Controlled"]},{"name":"CommandMenu","slug":"command-menu","description":"A modal search palette over a flat vocabulary of items — grouped results, diacritic-insensitive filtering, match highlighting, and full keyboard navigation with focus that never leaves the search field.","category":"navigation","group":"core","tags":["command","palette","search","modal","listbox","accessibility"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["CommandMenu"]},"react":{"package":"fancy-ui-react","names":["CommandMenu"]},"vue":{"package":"fancy-ui-vue","names":["CommandMenu"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/command-menu.md","react":"https://fancy-ui.rama.app/docs/components/react/command-menu.md","vue":"https://fancy-ui.rama.app/docs/components/vue/command-menu.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/command-menu.json","react":"https://fancy-ui.rama.app/r/command-menu.json","vue":"https://fancy-ui.rama.app/r/vue/command-menu.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/command-menu","props":[{"name":"open","type":"boolean","default":"false","description":"Whether the menu is open; bindable"},{"name":"onOpenChange","type":"(open: boolean) => void","description":"Fires whenever open changes — Escape, an outside click, or committing an item"},{"name":"items","type":"CommandItem[]","required":true,"description":"The full, unfiltered vocabulary"},{"name":"query","type":"string","default":"\"\"","description":"The current search text; bindable. Reset every time the menu reopens"},{"name":"onQueryChange","type":"(query: string) => void","description":"Fires whenever query changes"},{"name":"onSelect","type":"(item: CommandItem) => void","description":"Called with the committed item, after that item's own onSelect"},{"name":"placeholder","type":"string","default":"\"Search...\"","description":"Placeholder for the search field"},{"name":"emptyMessage","type":"string","default":"\"No results\"","description":"Shown in place of the list when nothing matches"},{"name":"label","type":"string","default":"\"Command menu\"","description":"Accessible name for the dialog and the search field"},{"name":"filter","type":"(item: CommandItem, query: string) => boolean","description":"Overrides the default case- and diacritic-insensitive substring filter entirely"},{"name":"class","type":"string","description":"Additional CSS classes for the panel"},{"name":"id","type":"string","description":"The panel's id, for the aria-controls of a trigger rendered outside the component"},{"name":"ref","type":"HTMLDivElement | null","default":"null","description":"Bindable reference to the panel element."},{"name":"sound","type":"boolean","default":"false","description":"Plays select on a committed row and close on a dismissal, once the user has enabled sound"}],"snippets":[{"name":"icon","description":"Rendered before each row's label, given that row's item. Treated as decorative"},{"name":"empty","description":"Rendered in place of the list when nothing matches, instead of emptyMessage"}],"events":[],"examples":["Basic Usage","Grouped Items","Empty State","Custom Filter","With Keywords"]},{"name":"ContextMenu","slug":"context-menu","description":"A menu that opens at the pointer on right-click, sharing DropdownMenu's item, submenu and keyboard behaviour but anchored to a virtual point instead of a trigger element.","category":"navigation","group":"core","tags":["menu","context-menu","right-click","compound","submenu","accessibility"],"dependencies":["dropdown-menu"],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["ContextMenu"]},"react":{"package":"fancy-ui-react","names":["ContextMenu"]},"vue":{"package":"fancy-ui-vue","names":["ContextMenu"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/context-menu.md","react":"https://fancy-ui.rama.app/docs/components/react/context-menu.md","vue":"https://fancy-ui.rama.app/docs/components/vue/context-menu.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/context-menu.json","react":"https://fancy-ui.rama.app/r/context-menu.json","vue":"https://fancy-ui.rama.app/r/vue/context-menu.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/context-menu","props":[{"name":"open","type":"boolean","default":"false","description":"Whether the menu is open. Bindable"},{"name":"onOpenChange","type":"(open: boolean) => void","description":"Called whenever the menu opens or closes, however it happened"},{"name":"side","type":"\"top\" | \"bottom\" | \"left\" | \"right\"","default":"\"bottom\"","description":"Side of the pointer to place the menu on. Flips when it would overflow"},{"name":"align","type":"\"start\" | \"center\" | \"end\"","default":"\"start\"","description":"Alignment along the pointer's cross axis"},{"name":"offset","type":"number","default":"2","description":"Gap in pixels between the pointer and the menu"},{"name":"loop","type":"boolean","default":"true","description":"Whether arrow-key navigation wraps at the ends"},{"name":"sound","type":"boolean","default":"false","description":"Plays open/close on the menu and its submenus and select on an item, once the user has enabled sound"}],"snippets":[{"name":"children","description":"The ContextMenuTrigger and ContextMenuContent"}],"events":[],"examples":["Basic Usage","With Submenu","Disabled Items"]},{"name":"Dock","slug":"dock","description":"Icon dock on a lit glass shelf: icons swell on a smooth cosine curve toward the pointer, a soft pool of light and a brightening edge follow it across the shelf, and a small dot and floor reflection mark the icon underneath.","category":"navigation","group":"fancy","tags":["dock","navigation","launcher","magnification","hover","spotlight"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Dock"]},"react":{"package":"fancy-ui-react","names":["Dock"]},"vue":{"package":"fancy-ui-vue","names":["Dock"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/dock.md","react":"https://fancy-ui.rama.app/docs/components/react/dock.md","vue":"https://fancy-ui.rama.app/docs/components/vue/dock.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/dock.json","react":"https://fancy-ui.rama.app/r/dock.json","vue":"https://fancy-ui.rama.app/r/vue/dock.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/dock","props":[{"name":"magnification","type":"number","default":"60","description":"Maximum icon size in pixels when magnified"},{"name":"distance","type":"number","default":"140","description":"Pointer distance over which the magnification falls off (cosine curve)"},{"name":"direction","type":"\"top\" | \"middle\" | \"bottom\"","default":"\"middle\"","description":"Cross-axis alignment of the icons"},{"name":"orientation","type":"\"horizontal\" | \"vertical\"","default":"\"horizontal\"","description":"Dock orientation"},{"name":"spotlight","type":"boolean","default":"true","description":"Soft pool of accent light that follows the pointer inside the shelf, plus a lit shelf edge near the pointer"},{"name":"reflection","type":"boolean","default":"true","description":"Soft contact shadow (light) / accent glow (dark) ellipse under each icon that grows with it"},{"name":"ariaLabel","type":"string","default":"undefined","description":"Accessible name for the toolbar, rendered as aria-label"}],"snippets":[{"name":"children","description":"DockIcon and DockSeparator elements"}],"events":[],"examples":["Basic Usage","Direction","Vertical"]},{"name":"DropdownMenu","slug":"dropdown-menu","description":"A menu of actions or options that opens from a trigger button, with full keyboard navigation, submenus and real DOM focus on every item.","category":"navigation","group":"core","tags":["menu","dropdown","actions","compound","submenu","accessibility"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["DropdownMenu"]},"react":{"package":"fancy-ui-react","names":["DropdownMenu"]},"vue":{"package":"fancy-ui-vue","names":["DropdownMenu"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/dropdown-menu.md","react":"https://fancy-ui.rama.app/docs/components/react/dropdown-menu.md","vue":"https://fancy-ui.rama.app/docs/components/vue/dropdown-menu.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/dropdown-menu.json","react":"https://fancy-ui.rama.app/r/dropdown-menu.json","vue":"https://fancy-ui.rama.app/r/vue/dropdown-menu.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/dropdown-menu","props":[{"name":"open","type":"boolean","default":"false","description":"Whether the menu is open. Bindable"},{"name":"onOpenChange","type":"(open: boolean) => void","description":"Called whenever the menu opens or closes, however it happened"},{"name":"side","type":"\"top\" | \"bottom\" | \"left\" | \"right\"","default":"\"bottom\"","description":"Side of the trigger to place the menu on. Flips when it would overflow"},{"name":"align","type":"\"start\" | \"center\" | \"end\"","default":"\"start\"","description":"Alignment along the trigger's cross axis"},{"name":"offset","type":"number","default":"4","description":"Gap in pixels between the trigger and the menu"},{"name":"loop","type":"boolean","default":"true","description":"Whether arrow-key navigation wraps at the ends"},{"name":"sound","type":"boolean","default":"false","description":"Plays open and close on the trigger and submenus, and select on an item — one cue per interaction — once the user has enabled sound"}],"snippets":[{"name":"children","description":"The DropdownMenuTrigger and DropdownMenuContent"}],"events":[],"examples":["Basic Usage","With Shortcuts","Destructive Item","With Submenu","Disabled Items"]},{"name":"LineHoverLink","slug":"line-hover-link","description":"Link component with 12 animated underline hover effects — pure CSS, no JS on hover","category":"navigation","group":"fancy","tags":["link","navigation","hover","animation","underline","css"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["LineHoverLink"]},"react":{"package":"fancy-ui-react","names":["LineHoverLink"]},"vue":{"package":"fancy-ui-vue","names":["LineHoverLink"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/line-hover-link.md","react":"https://fancy-ui.rama.app/docs/components/react/line-hover-link.md","vue":"https://fancy-ui.rama.app/docs/components/vue/line-hover-link.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/line-hover-link.json","react":"https://fancy-ui.rama.app/r/line-hover-link.json","vue":"https://fancy-ui.rama.app/r/vue/line-hover-link.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/line-hover-link","props":[{"name":"variant","type":"\"slide\" | \"double\" | \"grow\" | \"strike\" | \"fade\" | \"pulse\" | \"swap\" | \"sweep\" | \"bounce\" | \"arc\" | \"scribble\" | \"ink\"","default":"\"slide\"","description":"The animation variant"},{"name":"href","type":"string","default":"\"#\"","description":"Link href"},{"name":"target","type":"string","description":"Link target attribute"},{"name":"rel","type":"string","description":"Link rel attribute"},{"name":"aria-label","type":"string","description":"Accessible label"},{"name":"sound","type":"boolean","default":"false","description":"Plays the press cue on activation, once the user has enabled sound"}],"snippets":[{"name":"children","description":"Link text content"}],"events":[],"examples":["All Variants","Navigation Example"]},{"name":"Navbar","slug":"navbar","description":"A horizontal top-of-page bar with a brand mark, navigation links, and actions on the right.","category":"navigation","group":"core","tags":["nav","header","top-bar","links","sticky"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Navbar"]},"react":{"package":"fancy-ui-react","names":["Navbar"]},"vue":{"package":"fancy-ui-vue","names":["Navbar"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/navbar.md","react":"https://fancy-ui.rama.app/docs/components/react/navbar.md","vue":"https://fancy-ui.rama.app/docs/components/vue/navbar.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/navbar.json","react":"https://fancy-ui.rama.app/r/navbar.json","vue":"https://fancy-ui.rama.app/r/vue/navbar.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/navbar","props":[{"name":"label","type":"string","default":"\"Main\"","description":"Accessible name for the nav landmark."},{"name":"sticky","type":"boolean","default":"false","description":"Pins the bar to the top with `position: sticky` and a translucent, blurred background."},{"name":"bordered","type":"boolean","default":"true","description":"Draws a 1px hairline along the bottom edge."},{"name":"class","type":"string","description":"Additional CSS classes, merged onto the root."},{"name":"ref","type":"HTMLElement | null","default":"null","description":"Bindable reference to the root nav element."},{"name":"NavbarLink.href","type":"string","required":true,"description":"Destination URL."},{"name":"NavbarLink.current","type":"boolean","default":"false","description":"Marks this as the current page — aria-current=\"page\" plus a visible weight/colour change."},{"name":"NavbarLink.external","type":"boolean","default":"false","description":"Opens in a new tab with a safe rel, and notes it for assistive tech."},{"name":"NavbarLink.disabled","type":"boolean","default":"false","description":"Strips the link out of the click and keyboard-activation paths."},{"name":"NavbarLink.onclick","type":"(event: MouseEvent) => void","description":"Native click handler. Never called while disabled."},{"name":"NavbarLink.class","type":"string","description":"Additional CSS classes, merged onto the anchor."},{"name":"NavbarLink.ref","type":"HTMLAnchorElement | null","default":"null","description":"Bindable reference to the anchor element."},{"name":"NavbarLink.sound","type":"boolean","default":"false","description":"Plays select when a navbar link that is not already current is activated, once the user has enabled sound"}],"snippets":[{"name":"brand","description":"The brand mark / wordmark, on the left."},{"name":"children","description":"The navigation links, between the brand and the actions."},{"name":"actions","description":"Actions on the right — search, sign-in, a theme switch."},{"name":"NavbarLink.children","description":"The link's label."}],"events":[],"examples":["Basic Usage","With Actions","Sticky Bar"]},{"name":"NavigationMenu","slug":"navigation-menu","description":"A horizontal row of triggers that each open a rich, multi-column panel below the row — disclosure-pattern site navigation, not an application menu.","category":"navigation","group":"core","tags":["navigation","menu","disclosure","mega menu","dropdown","header"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["NavigationMenu"]},"react":{"package":"fancy-ui-react","names":["NavigationMenu"]},"vue":{"package":"fancy-ui-vue","names":["NavigationMenu"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/navigation-menu.md","react":"https://fancy-ui.rama.app/docs/components/react/navigation-menu.md","vue":"https://fancy-ui.rama.app/docs/components/vue/navigation-menu.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/navigation-menu.json","react":"https://fancy-ui.rama.app/r/navigation-menu.json","vue":"https://fancy-ui.rama.app/r/vue/navigation-menu.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/navigation-menu","props":[{"name":"value","type":"string","default":"\"\"","description":"The open item's value, bindable. Empty string when every panel is closed."},{"name":"onValueChange","type":"(value: string) => void","description":"Called whenever the open item changes, from any trigger."},{"name":"label","type":"string","default":"\"Main\"","description":"Accessible name for the nav landmark."},{"name":"openDelay","type":"number","default":"150","description":"Delay in ms before a hovered trigger opens its panel."},{"name":"closeDelay","type":"number","default":"200","description":"Delay in ms before a panel closes after the pointer leaves it and its trigger."},{"name":"class","type":"string","description":"Additional CSS classes for the nav."},{"name":"ref","type":"HTMLElement | null","default":"null","description":"Bindable reference to the nav element."}],"snippets":[{"name":"children","description":"Typically a single NavigationMenuList. Snippet<[]> — the compound's own sub-components (NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink) are exported from the same module and used inside it."}],"events":[],"examples":["Basic Usage","Simple Links","With Current Page"]},{"name":"Pagination","slug":"pagination","description":"A page-number control with Previous/Next, ellipsis collapsing for long runs, and optional First/Last jump buttons; the current-page pill slides between numbers and the numbers glide when the visible run shifts.","category":"navigation","group":"core","tags":["pagination","pager","page-numbers","navigation"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Pagination"]},"react":{"package":"fancy-ui-react","names":["Pagination"]},"vue":{"package":"fancy-ui-vue","names":["Pagination"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/pagination.md","react":"https://fancy-ui.rama.app/docs/components/react/pagination.md","vue":"https://fancy-ui.rama.app/docs/components/vue/pagination.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/pagination.json","react":"https://fancy-ui.rama.app/r/pagination.json","vue":"https://fancy-ui.rama.app/r/vue/pagination.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/pagination","props":[{"name":"page","type":"number","default":"1","description":"Current page, 1-based. Bindable."},{"name":"count","type":"number","required":true,"description":"Total number of pages."},{"name":"onPageChange","type":"(page: number) => void","description":"Called with the new page whenever it changes, however the change happened."},{"name":"siblingCount","type":"number","default":"1","description":"Pages shown on each side of the current page."},{"name":"boundaryCount","type":"number","default":"1","description":"Pages always shown at each end of the run."},{"name":"showEdges","type":"boolean","default":"false","description":"Shows First/Last jump buttons alongside Previous/Next."},{"name":"disabled","type":"boolean","default":"false","description":"Disables every control in the nav."},{"name":"label","type":"string","default":"\"Pagination\"","description":"Accessible name for the nav landmark."},{"name":"class","type":"string","description":"Additional CSS classes, merged onto the nav element."},{"name":"ref","type":"HTMLElement | null","default":"null","description":"Bindable reference to the nav element."},{"name":"sound","type":"boolean","default":"false","description":"Plays select when the page actually changes, once the user has enabled sound"}],"snippets":[{"name":"previousLabel","description":"Overrides the Previous button's content."},{"name":"nextLabel","description":"Overrides the Next button's content."}],"events":[],"examples":["Basic Usage","Many Pages","With First/Last","Disabled State"]},{"name":"ScrollProgress","slug":"scroll-progress","description":"Thin reading-progress bar that fills as the page — or a target element — scrolls, driven by a zero-JS CSS scroll-timeline where supported and a throttled scroll listener everywhere else, with an optional accessible progressbar label","category":"navigation","group":"fancy","tags":["scroll","progress","reading-progress","navigation","scroll-timeline","micro-interaction"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["ScrollProgress"]},"react":{"package":"fancy-ui-react","names":["ScrollProgress"]},"vue":{"package":"fancy-ui-vue","names":["ScrollProgress"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/scroll-progress.md","react":"https://fancy-ui.rama.app/docs/components/react/scroll-progress.md","vue":"https://fancy-ui.rama.app/docs/components/vue/scroll-progress.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/scroll-progress.json","react":"https://fancy-ui.rama.app/r/scroll-progress.json","vue":"https://fancy-ui.rama.app/r/vue/scroll-progress.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/scroll-progress","props":[{"name":"target","type":"HTMLElement | null","default":"null","description":"An element to track instead of the document. Forces JS mode — reactively, so a target that only becomes available after mount is still picked up correctly."},{"name":"position","type":"\"top\" | \"bottom\" | \"inline\"","default":"\"top\"","description":"\"top\"/\"bottom\" pin the bar to that viewport edge (position: fixed); \"inline\" renders it in normal flow."},{"name":"label","type":"string","description":"Announces the bar as role=\"progressbar\" with this accessible name. Forces JS mode; omitted, the bar is aria-hidden."},{"name":"class","type":"string","description":"Additional CSS classes"},{"name":"ref","type":"HTMLDivElement | null","default":"null","description":"Bindable reference to the root element"}],"snippets":[],"events":[],"examples":["Basic Usage","Labelled"]},{"name":"Sidebar","slug":"sidebar","description":"A collapsible, grouped navigation rail with labelled sections, a current-item accent, and badges folded into each item's accessible name.","category":"navigation","group":"core","tags":["sidebar","nav","rail","collapsible","compound","badge"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Sidebar"]},"react":{"package":"fancy-ui-react","names":["Sidebar"]},"vue":{"package":"fancy-ui-vue","names":["Sidebar"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/sidebar.md","react":"https://fancy-ui.rama.app/docs/components/react/sidebar.md","vue":"https://fancy-ui.rama.app/docs/components/vue/sidebar.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/sidebar.json","react":"https://fancy-ui.rama.app/r/sidebar.json","vue":"https://fancy-ui.rama.app/r/vue/sidebar.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/sidebar","props":[{"name":"label","type":"string","default":"\"Sidebar\"","description":"Accessible name for the nav landmark."},{"name":"collapsed","type":"boolean","default":"false","description":"Whether the sidebar is collapsed to an icon-only rail. Plain, not bindable — nothing inside the compound ever changes it itself."},{"name":"class","type":"string","description":"Additional CSS classes, merged onto the root."},{"name":"ref","type":"HTMLElement | null","default":"null","description":"Bindable reference to the root nav element."},{"name":"SidebarGroup.label","type":"string","required":true,"description":"The section heading, e.g. \"General\"."},{"name":"SidebarGroup.class","type":"string","description":"Additional CSS classes, merged onto the group."},{"name":"SidebarItem.href","type":"string","description":"Renders an <a> when set; a <button type=\"button\"> otherwise."},{"name":"SidebarItem.current","type":"boolean","default":"false","description":"Marks this as the current item — aria-current=\"page\" plus the accent left bar."},{"name":"SidebarItem.badge","type":"string | number","description":"A count or short flag, e.g. 4, rendered as a pill."},{"name":"SidebarItem.badgeLabel","type":"string","description":"What the badge means, folded into the accessible name. Defaults to just the badge value."},{"name":"SidebarItem.disabled","type":"boolean","default":"false","description":"Disables both the click and keyboard-activation paths."},{"name":"SidebarItem.onclick","type":"(event: MouseEvent) => void","description":"Native click handler, for the button branch. Never called while disabled."},{"name":"SidebarItem.class","type":"string","description":"Additional CSS classes, merged onto the item."},{"name":"SidebarItem.ref","type":"HTMLAnchorElement | HTMLButtonElement | null","default":"null","description":"Bindable reference to the item's interactive element."},{"name":"SidebarItem.sound","type":"boolean","default":"false","description":"Plays select when a sidebar item that is not already current is activated, once the user has enabled sound"},{"name":"SidebarSeparator.class","type":"string","description":"Additional CSS classes, merged onto the hairline."},{"name":"SidebarSeparator.ref","type":"HTMLHRElement | null","default":"null","description":"Bindable reference to the <hr> element."},{"name":"SidebarFooter.class","type":"string","description":"Additional CSS classes, merged onto the footer row."},{"name":"SidebarFooter.ref","type":"HTMLDivElement | null","default":"null","description":"Bindable reference to the footer's root element."}],"snippets":[{"name":"children","description":"SidebarGroup, SidebarSeparator and SidebarFooter."},{"name":"SidebarGroup.children","description":"The SidebarItems in this section."},{"name":"SidebarItem.icon","description":"A decorative glyph or icon, shown even while the sidebar is collapsed."},{"name":"SidebarItem.children","description":"The item's label. Moves to sr-only text while collapsed — never removed."},{"name":"SidebarFooter.avatar","description":"A decorative avatar, shown even while the sidebar is collapsed."},{"name":"SidebarFooter.children","description":"The name / text next to the avatar. sr-only while collapsed."}],"events":[],"examples":["Basic Usage","With Badges","Collapsed","With Footer"]},{"name":"Stepper","slug":"stepper","description":"A multi-step progress indicator on light rails: each completed step sends a single sweep of light down the rail to the next, the current bullet breathes a soft halo, and each check draws itself.","category":"navigation","group":"core","tags":["stepper","steps","wizard","progress","compound","navigation"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Stepper"]},"react":{"package":"fancy-ui-react","names":["Stepper"]},"vue":{"package":"fancy-ui-vue","names":["Stepper"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/stepper.md","react":"https://fancy-ui.rama.app/docs/components/react/stepper.md","vue":"https://fancy-ui.rama.app/docs/components/vue/stepper.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/stepper.json","react":"https://fancy-ui.rama.app/r/stepper.json","vue":"https://fancy-ui.rama.app/r/vue/stepper.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/stepper","props":[{"name":"current","type":"number","default":"0","description":"The active step's 0-based index. Bindable."},{"name":"onCurrentChange","type":"(current: number) => void","description":"Called with the new index whenever it changes, however the change happened."},{"name":"orientation","type":"\"horizontal\" | \"vertical\"","default":"\"horizontal\"","description":"The rail's stacking axis."},{"name":"clickable","type":"boolean","default":"false","description":"Whether steps render as buttons a reader can click to jump between them."},{"name":"onStepClick","type":"(index: number) => void","description":"Called with a step's index when it's activated by a click. Only fires when clickable."},{"name":"class","type":"string","description":"Additional CSS classes, merged onto the root."},{"name":"ref","type":"HTMLOListElement | null","default":"null","description":"Bindable reference to the root element."},{"name":"sound","type":"boolean","default":"false","description":"Plays select when a clickable step changes the current step, once the user has enabled sound"},{"name":"Step.label","type":"string","required":true,"description":"The step's primary label."},{"name":"Step.description","type":"string","description":"Optional secondary line shown under the label."},{"name":"Step.class","type":"string","description":"Additional CSS classes, merged onto the step's li."},{"name":"Step.ref","type":"HTMLLIElement | null","default":"null","description":"Bindable reference to the step's li element."}],"snippets":[{"name":"children","description":"The Steps."},{"name":"Step.children","description":"Overrides the bullet's default content (checkmark / number / outline)."}],"events":[],"examples":["Basic Usage","Vertical Stepper","Clickable Steps","With Descriptions"]},{"name":"StoryThread","slug":"story-thread","description":"A narrative thread for scroll stories: the page pans sideways through your sections while a dotted line draws itself from node to node, a glowing head rides its tip, nodes light up as it reaches them, and segments can fork and meet again.","category":"navigation","group":"fancy","tags":["story","storytelling","scrollytelling","path","thread","timeline","horizontal scroll","svg","narrative"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["StoryThread"]},"react":{"package":"fancy-ui-react","names":["StoryThread"]},"vue":{"package":"fancy-ui-vue","names":["StoryThread"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/story-thread.md","react":"https://fancy-ui.rama.app/docs/components/react/story-thread.md","vue":"https://fancy-ui.rama.app/docs/components/vue/story-thread.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/story-thread.json","react":"https://fancy-ui.rama.app/r/story-thread.json","vue":"https://fancy-ui.rama.app/r/vue/story-thread.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/story-thread","props":[{"name":"layout","type":"\"auto\" | \"horizontal\" | \"vertical\"","default":"\"auto\"","description":"`horizontal` pins a full-height viewport and pans the content sideways as the page scrolls; `vertical` keeps a plain stack with the thread running down it. `auto` is horizontal from 900 × 520 px up."},{"name":"segments","type":"StoryThreadSegment[]","default":"[]","description":"Segments as `{ nodes: string[], color? }`, each through a list of StoryNode ids. Empty draws one segment through every node in document order. Segments that leave the same node draw a fork whose branches advance together."},{"name":"lead","type":"number","default":"0.7","description":"Where the tip of the thread sits in the viewport, 0..1 along the reading axis."},{"name":"tension","type":"number","default":"0.55","description":"Curve tension between nodes: 0 draws straight lines, 1 long flat tangents."},{"name":"dash","type":"\"dotted\" | \"dashed\" | \"solid\"","default":"\"dotted\"","description":"Stroke pattern of the thread."},{"name":"head","type":"boolean","default":"true","description":"Draws a glowing dot at the tip of every segment while it is drawing."},{"name":"sound","type":"boolean","default":"false","description":"Plays a soft `tick` each time the thread reaches a node going forward. Only audible once the user has enabled sound."},{"name":"onReach","type":"(id: string) => void","description":"Called with a node's id each time the thread reaches it going forward."},{"name":"ariaLabel","type":"string","default":"\"Story\"","description":"Accessible name of the region."},{"name":"class","type":"string","description":"Additional CSS classes on the root."}],"snippets":[{"name":"children","description":"The story: sections holding `<StoryNode id>` anchors (`variant` `dot` or `ring`). Size the sections yourself; in the horizontal layout they sit side by side at full height."}],"events":[],"examples":["Basic Usage","Branches","Vertical"]},{"name":"Tabs","slug":"tabs","description":"A tablist compound with roving-tabindex keyboard navigation, automatic or manual activation, and an accent-underline or segmented visual style.","category":"navigation","group":"core","tags":["tabs","tablist","roving-tabindex","compound","navigation"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Tabs"]},"react":{"package":"fancy-ui-react","names":["Tabs"]},"vue":{"package":"fancy-ui-vue","names":["Tabs"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/tabs.md","react":"https://fancy-ui.rama.app/docs/components/react/tabs.md","vue":"https://fancy-ui.rama.app/docs/components/vue/tabs.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/tabs.json","react":"https://fancy-ui.rama.app/r/tabs.json","vue":"https://fancy-ui.rama.app/r/vue/tabs.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/tabs","props":[{"name":"value","type":"string","default":"\"\"","description":"The active tab's value, bindable."},{"name":"onValueChange","type":"(value: string) => void","description":"Called with the new value whenever the active tab changes."},{"name":"orientation","type":"\"horizontal\" | \"vertical\"","default":"\"horizontal\"","description":"The tablist's stacking axis and which arrow-key pair moves it."},{"name":"activation","type":"\"automatic\" | \"manual\"","default":"\"automatic\"","description":"Whether arrowing to a trigger selects it immediately, or only moves focus."},{"name":"variant","type":"\"underline\" | \"segmented\"","default":"\"underline\"","description":"Accent underline, or a segmented pill rail."},{"name":"class","type":"string","description":"Additional CSS classes, merged onto the root."},{"name":"ref","type":"HTMLDivElement | null","default":"null","description":"Bindable reference to the root element."},{"name":"sound","type":"boolean","default":"false","description":"Plays select when the active tab actually changes, once the user has enabled sound"},{"name":"TabsList.class","type":"string","description":"Additional CSS classes, merged onto the tablist."},{"name":"TabsList.ref","type":"HTMLDivElement | null","default":"null","description":"Bindable reference to the tablist element."},{"name":"TabsTrigger.value","type":"string","required":true,"description":"This trigger's value — which TabsContent it activates."},{"name":"TabsTrigger.disabled","type":"boolean","default":"false","description":"Disables just this trigger; it is skipped by the arrows and Home/End."},{"name":"TabsTrigger.class","type":"string","description":"Additional CSS classes, merged onto the trigger button."},{"name":"TabsTrigger.ref","type":"HTMLButtonElement | null","default":"null","description":"Bindable reference to the trigger's button element."},{"name":"TabsContent.value","type":"string","required":true,"description":"Which TabsTrigger shows this panel."},{"name":"TabsContent.forceMount","type":"boolean","default":"false","description":"Keeps this panel mounted (with hidden) even while inactive, instead of unmounting it entirely."},{"name":"TabsContent.class","type":"string","description":"Additional CSS classes, merged onto the panel."},{"name":"TabsContent.ref","type":"HTMLDivElement | null","default":"null","description":"Bindable reference to the panel element."}],"snippets":[{"name":"children","description":"A TabsList and one or more TabsContents."},{"name":"TabsList.children","description":"The TabsTriggers."},{"name":"TabsTrigger.children","description":"The trigger's content, typically the tab's label."},{"name":"TabsContent.children","description":"The panel's content."}],"events":[],"examples":["Basic Usage","Segmented Variant","Manual Activation","Vertical Tabs","Disabled Tab"]},{"name":"TickNav","slug":"tick-nav","description":"A navigation list on a ruler of tick marks: every line the pointer crosses plucks like a string, neighbouring lines and ticks stretch and light up on springs, and an optional preview card follows the pointer.","category":"navigation","group":"fancy","tags":["nav","sidebar","ruler","ticks","proximity","spring","preview","hover"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["TickNav"]},"react":{"package":"fancy-ui-react","names":["TickNav"]},"vue":{"package":"fancy-ui-vue","names":["TickNav"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/tick-nav.md","react":"https://fancy-ui.rama.app/docs/components/react/tick-nav.md","vue":"https://fancy-ui.rama.app/docs/components/vue/tick-nav.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/tick-nav.json","react":"https://fancy-ui.rama.app/r/tick-nav.json","vue":"https://fancy-ui.rama.app/r/vue/tick-nav.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/tick-nav","props":[{"name":"items","type":"TickNavItem[]","required":true,"description":"The rows, top to bottom: `{ id, label, href?, badge?, disabled? }`. A row with `href` renders as a link, otherwise as a button."},{"name":"value","type":"string","description":"Id of the current item. Bindable."},{"name":"onValueChange","type":"(id: string) => void","description":"Called with the id of an item that is activated and not already current."},{"name":"preview","type":"Snippet<[TickNavItem]>","description":"Content of the card that follows the pointer while a row is hovered (or sits beside a keyboard-focused row). Leave it out and no card is rendered."},{"name":"reach","type":"number","default":"4","description":"Rows over which the neighbours of the hovered row still react."},{"name":"minorTicks","type":"number","default":"2","description":"Ruler ticks drawn between two rows."},{"name":"variant","type":"\"default\" | \"neon\"","default":"\"default\"","description":"Neon turns the lines into glowing tubes: proximity raises the glow, a beam of light rides every pluck, labels glow on hover, and the current line breathes. Made for dark surfaces."},{"name":"hdr","type":"boolean","default":"true","description":"Neon only: on a display that reports HDR, draws the light in a WebGPU canvas with extended tone mapping, so the tubes reach SDR white and the beam peaks around 1000 nits. Elsewhere the CSS glow carries the effect alone."},{"name":"ariaLabel","type":"string","default":"\"Navigation\"","description":"Accessible name of the nav landmark."},{"name":"sound","type":"boolean","default":"false","description":"Plays a cue for every line a mouse or pen plucks (hover for an item, a softer tick for a ruler tick), once the user has enabled sound"},{"name":"class","type":"string","description":"Additional CSS classes on the nav."}],"snippets":[],"events":[],"examples":["Neon","With Preview","Classic"]},{"name":"Timeline","slug":"timeline","description":"Vertical timeline drawn as a light rail: a glowing head travels a hairline track as you scroll, leaving a soft trail and igniting each entry's dot as it arrives.","category":"navigation","group":"fancy","tags":["timeline","scroll","navigation","progress","vertical"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Timeline"]},"react":{"package":"fancy-ui-react","names":["Timeline"]},"vue":{"package":"fancy-ui-vue","names":["Timeline"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/timeline.md","react":"https://fancy-ui.rama.app/docs/components/react/timeline.md","vue":"https://fancy-ui.rama.app/docs/components/vue/timeline.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/timeline.json","react":"https://fancy-ui.rama.app/r/timeline.json","vue":"https://fancy-ui.rama.app/r/vue/timeline.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/timeline","props":[{"name":"items","type":"TimelineItem[]","default":"[]","description":"Timeline entries with id and label"},{"name":"title","type":"string","description":"Heading text"},{"name":"description","type":"string","description":"Subheading text"},{"name":"accent","type":"string","default":"undefined (follows --primary, falls back to oklch(0.7 0.13 285))","description":"Colour of the travelling head, its trail and the lit dots. Any CSS colour; also settable via the --timeline-accent CSS variable."}],"snippets":[{"name":"content","description":"Content snippet called for each timeline item, receives the item as argument"}],"events":[],"examples":["Basic Usage","Custom Accent"]},{"name":"AnimatedTestimonials","slug":"animated-testimonials","description":"Testimonial carousel with smooth slide animations and optional autoplay","category":"data-display","group":"fancy","tags":["testimonials","carousel","animation","social-proof"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["AnimatedTestimonials"]},"react":{"package":"fancy-ui-react","names":["AnimatedTestimonials"]},"vue":{"package":"fancy-ui-vue","names":["AnimatedTestimonials"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/animated-testimonials.md","react":"https://fancy-ui.rama.app/docs/components/react/animated-testimonials.md","vue":"https://fancy-ui.rama.app/docs/components/vue/animated-testimonials.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/animated-testimonials.json","react":"https://fancy-ui.rama.app/r/animated-testimonials.json","vue":"https://fancy-ui.rama.app/r/vue/animated-testimonials.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/animated-testimonials","props":[{"name":"testimonials","type":"Testimonial[]","description":"Array of testimonials to display","required":true},{"name":"autoplay","type":"boolean","default":"false","description":"Auto-advance testimonials"},{"name":"interval","type":"number","default":"5000","description":"Interval between auto-advances in ms"},{"name":"sound","type":"boolean","default":"false","description":"Plays select when the previous or next control moves to another testimonial, once the user has enabled sound"}],"snippets":[],"events":[],"examples":["Basic Usage","With Autoplay"]},{"name":"Avatar","slug":"avatar","description":"A person or account as an image that shows a skeleton while it loads and falls back to one or two initials on a colour fixed by the name, as a circle or a rounded square","category":"data-display","group":"core","tags":["avatar","profile","user","initials","image","fallback"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Avatar"]},"react":{"package":"fancy-ui-react","names":["Avatar"]},"vue":{"package":"fancy-ui-vue","names":["Avatar"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/avatar.md","react":"https://fancy-ui.rama.app/docs/components/react/avatar.md","vue":"https://fancy-ui.rama.app/docs/components/vue/avatar.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/avatar.json","react":"https://fancy-ui.rama.app/r/avatar.json","vue":"https://fancy-ui.rama.app/r/vue/avatar.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/avatar","props":[{"name":"src","type":"string","description":"Image URL. While it loads a skeleton shows; if it fails the initials show"},{"name":"alt","type":"string","description":"The accessible name, and the one required decision whenever src is set: describe the image, or pass \"\" to mark the avatar decorative beside a visible name. Falls back to name"},{"name":"name","type":"string","description":"Who this is. Gives one or two initials for the fallback and a colour that is always the same for the same name"},{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","default":"\"md\"","description":"Diameter: 28, 36 or 64px"},{"name":"shape","type":"\"circle\" | \"square\"","default":"\"circle\"","description":"Fully round, or a rounded square"},{"name":"class","type":"string","description":"Additional CSS classes"}],"snippets":[],"events":[],"examples":["Basic Usage","Fallbacks"]},{"name":"Badge","slug":"badge","description":"A short pill of status text in five treatments and two sizes, with native span attributes passed through","category":"data-display","group":"core","tags":["badge","label","status","pill","tag","chip"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Badge"]},"react":{"package":"fancy-ui-react","names":["Badge"]},"vue":{"package":"fancy-ui-vue","names":["Badge"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/badge.md","react":"https://fancy-ui.rama.app/docs/components/react/badge.md","vue":"https://fancy-ui.rama.app/docs/components/vue/badge.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/badge.json","react":"https://fancy-ui.rama.app/r/badge.json","vue":"https://fancy-ui.rama.app/r/vue/badge.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/badge","props":[{"name":"variant","type":"\"default\" | \"secondary\" | \"outline\" | \"destructive\" | \"success\"","default":"\"default\"","description":"Visual treatment. Always pair it with a visible word: colour is never the message"},{"name":"size","type":"\"sm\" | \"md\"","default":"\"md\"","description":"Compact or regular"},{"name":"class","type":"string","description":"Additional CSS classes"}],"snippets":[{"name":"children","description":"The label"}],"events":[],"examples":["Basic Usage","Sizes"]},{"name":"LogoCloud","slug":"logo-cloud","description":"Logo display with animated marquee, static grid, and icon variants","category":"data-display","group":"fancy","tags":["logos","marquee","brands","animation","scrolling"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["AnimatedLogoCloud","IconLogoCloud","StaticLogoCloud"]},"react":{"package":"fancy-ui-react","names":["AnimatedLogoCloud","StaticLogoCloud","IconLogoCloud"]},"vue":{"package":"fancy-ui-vue","names":["AnimatedLogoCloud","StaticLogoCloud","IconLogoCloud"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/logo-cloud.md","react":"https://fancy-ui.rama.app/docs/components/react/logo-cloud.md","vue":"https://fancy-ui.rama.app/docs/components/vue/logo-cloud.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/logo-cloud.json","react":"https://fancy-ui.rama.app/r/logo-cloud.json","vue":"https://fancy-ui.rama.app/r/vue/logo-cloud.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/logo-cloud","props":[{"name":"title","type":"string","description":"Optional title displayed above the logos"},{"name":"logos","type":"Logo[]","default":"[]","description":"Array of logos with name and image path"},{"name":"wordmarks","type":"Wordmark[]","description":"StaticLogoCloud only: when provided, renders a static typographic row of wordmarks instead of image logos"}],"snippets":[],"events":[],"examples":["Basic Usage","Icon Grid","Static Grid","Wordmarks"]},{"name":"AnimatedTooltip","slug":"animated-tooltip","description":"Presence stack of overlapping avatars with a thin, dimmed ring each that lights up on hover or focus while the avatar lifts, its neighbours part to make room, and a glass name card rises, leaning toward the pointer, as one line of light sweeps under the name","category":"feedback","group":"fancy","tags":["tooltip","avatar","animation","hover","team"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["AnimatedTooltip"]},"react":{"package":"fancy-ui-react","names":["AnimatedTooltip"]},"vue":{"package":"fancy-ui-vue","names":["AnimatedTooltip"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/animated-tooltip.md","react":"https://fancy-ui.rama.app/docs/components/react/animated-tooltip.md","vue":"https://fancy-ui.rama.app/docs/components/vue/animated-tooltip.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/animated-tooltip.json","react":"https://fancy-ui.rama.app/r/animated-tooltip.json","vue":"https://fancy-ui.rama.app/r/vue/animated-tooltip.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/animated-tooltip","props":[{"name":"items","type":"TooltipItem[]","description":"Array of items with id, name, designation, and image URL","required":true},{"name":"class","type":"string","description":"Additional CSS classes for the container"},{"name":"accent","type":"string","default":"undefined (theme-tuned lilac/ice iridescent pair)","description":"Tint of the presence ring and the light sweep under the name; any CSS colour. Writes --at-accent and a lighter --at-accent-2."},{"name":"size","type":"number","default":"56","description":"Avatar diameter in pixels; overlap, ring and pointer lean scale with it."}],"snippets":[],"events":[],"examples":["Basic Usage","Team Members"]},{"name":"Skeleton","slug":"skeleton","description":"Placeholder bones — a block, one or more text lines, or a circular avatar — with a phase-synced shimmer sweep or opacity pulse, that swaps to real content once loading finishes while keeping aria-busy semantics correct throughout","category":"feedback","group":"core","tags":["skeleton","loading","placeholder","shimmer","pulse","micro-interaction"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Skeleton"]},"react":{"package":"fancy-ui-react","names":["Skeleton"]},"vue":{"package":"fancy-ui-vue","names":["Skeleton"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/skeleton.md","react":"https://fancy-ui.rama.app/docs/components/react/skeleton.md","vue":"https://fancy-ui.rama.app/docs/components/vue/skeleton.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/skeleton.json","react":"https://fancy-ui.rama.app/r/skeleton.json","vue":"https://fancy-ui.rama.app/r/vue/skeleton.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/skeleton","props":[{"name":"variant","type":"\"rect\" | \"text\" | \"circle\"","default":"\"rect\"","description":"Bone shape: a block, one or more text lines, or a circular avatar"},{"name":"lines","type":"number","default":"1","description":"Number of text lines to render; only read when variant is \"text\". The last line renders at 60% width so a paragraph placeholder doesn't read as a perfect rectangle"},{"name":"animation","type":"\"shimmer\" | \"pulse\" | \"none\"","default":"\"shimmer\"","description":"Shimmer sweep, opacity pulse, or a static muted bone (still a valid loading cue on its own)"},{"name":"loading","type":"boolean","default":"true","description":"Whether the placeholder is currently showing. In wrapping mode (children supplied) drives the swap to real content; in standalone mode drives whether anything renders at all"},{"name":"label","type":"string","default":"\"Loading\"","description":"The one screen-reader announcement. Pass \"\" to silence it entirely"},{"name":"class","type":"string","description":"Additional CSS classes; also the sizing hook, since rect/text bones have no intrinsic size"},{"name":"ref","type":"HTMLDivElement | null","default":"null","description":"Bindable reference to the root element; null whenever nothing is rendered"}],"snippets":[{"name":"children","description":"Real content to reveal once loading is false. Its mere presence (not its value) switches Skeleton from standalone to wrapping mode"}],"events":[],"examples":["Basic Usage","Variants","With Children"]},{"name":"StatusMorph","slug":"status-morph","description":"A 1em SVG status icon that morphs between idle, loading, success, and error, closing its spinning ring into a drawn check or cross with a portalled live region announcing each state","category":"feedback","group":"fancy","tags":["status","icon","loading","success","error","morph","micro-interaction"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["StatusMorph"]},"react":{"package":"fancy-ui-react","names":["StatusMorph"]},"vue":{"package":"fancy-ui-vue","names":["StatusMorph"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/status-morph.md","react":"https://fancy-ui.rama.app/docs/components/react/status-morph.md","vue":"https://fancy-ui.rama.app/docs/components/vue/status-morph.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/status-morph.json","react":"https://fancy-ui.rama.app/r/status-morph.json","vue":"https://fancy-ui.rama.app/r/vue/status-morph.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/status-morph","props":[{"name":"state","type":"\"idle\" | \"loading\" | \"success\" | \"error\"","default":"\"idle\"","description":"Current state, two-way bound. The component only ever writes it back to \"idle\" itself, when resetAfter fires — every other write is the caller's, and is always honoured"},{"name":"resetAfter","type":"number","default":"1800","description":"Milliseconds until an automatic reset to \"idle\" after \"success\" or \"error\". 0 disables the timer entirely (manual reset only)"},{"name":"labels","type":"{ loading?: string; success?: string; error?: string }","default":"{ loading: \"Loading\", success: \"Done\", error: \"Failed\" }","description":"Live-region text per state; unset keys fall back to the defaults"},{"name":"tone","type":"\"current\" | \"semantic\"","default":"\"current\"","description":"\"current\" paints every glyph in currentColor; \"semantic\" reads the shared --ft-status-running/-done/-error vocabulary instead"},{"name":"haptic","type":"boolean","default":"false","description":"Best-effort tactile feedback (the success/error haptic patterns) on entering those states; silently a no-op wherever the Vibration API is unsupported or refused"},{"name":"class","type":"string","description":"Additional CSS classes"},{"name":"ref","type":"HTMLSpanElement | null","default":"null","description":"Bindable reference to the root element"}],"snippets":[{"name":"idle","description":"Custom idle content, rendered in the same calc(1em + 1px) footprint instead of the default transparent scaffold, so swapping to it never shifts layout"}],"events":[],"examples":["Basic Usage","Standalone","Semantic Tone"]},{"name":"Compare","slug":"compare","description":"Before/after image comparison slider split by a blade of light: a white-hot seam with a chromatic fringe, pulses running along it and a trail that stretches with the speed of the gesture","category":"media","group":"fancy","tags":["media","image","slider","comparison","before-after","interactive"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Compare"]},"react":{"package":"fancy-ui-react","names":["Compare"]},"vue":{"package":"fancy-ui-vue","names":["Compare"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/compare.md","react":"https://fancy-ui.rama.app/docs/components/react/compare.md","vue":"https://fancy-ui.rama.app/docs/components/vue/compare.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/compare.json","react":"https://fancy-ui.rama.app/r/compare.json","vue":"https://fancy-ui.rama.app/r/vue/compare.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/compare","props":[{"name":"firstImage","type":"string","default":"\"\"","description":"URL of the first (left) image"},{"name":"secondImage","type":"string","default":"\"\"","description":"URL of the second (right) image"},{"name":"firstImageAlt","type":"string","default":"\"First image\"","description":"Alt text for the first image"},{"name":"secondImageAlt","type":"string","default":"\"Second image\"","description":"Alt text for the second image"},{"name":"firstContentClass","type":"string","default":"\"\"","description":"CSS classes for the first content container"},{"name":"secondContentClass","type":"string","default":"\"\"","description":"CSS classes for the second content container"},{"name":"initialSliderPercentage","type":"number","default":"50","description":"Initial slider position (0-100)"},{"name":"slideMode","type":"\"hover\" | \"drag\"","default":"\"hover\"","description":"How the slider is controlled"},{"name":"showHandlebar","type":"boolean","default":"true","description":"Show the drag handle bar"},{"name":"autoplay","type":"boolean","default":"false","description":"Automatically animate the slider back and forth"},{"name":"autoplayDuration","type":"number","default":"5000","description":"Duration of one autoplay cycle in ms"},{"name":"beamColors","type":"string[]","default":"[\"#22d3ee\", \"#818cf8\", \"#f472b6\"]","description":"Beam colours: left fringe, centre, right fringe (one or more colours)"},{"name":"label","type":"string","default":"\"Comparison slider\"","description":"Accessible name of the slider"},{"name":"class","type":"string","default":"\"\"","description":"Additional CSS classes for the root element"},{"name":"onpercentagechange","type":"(percentage: number) => void","description":"Called with the slider position (0-100) whenever it changes"},{"name":"ondragstart","type":"() => void","description":"Called when a drag on the slider begins"},{"name":"ondragend","type":"() => void","description":"Called when the drag ends"},{"name":"onhoverenter","type":"() => void","description":"Called when the pointer enters the comparison area"},{"name":"onhoverleave","type":"() => void","description":"Called when the pointer leaves the comparison area"}],"snippets":[{"name":"firstContent","description":"Custom content to render in the first (left) panel instead of an image"},{"name":"secondContent","description":"Custom content to render in the second (right) panel instead of an image"},{"name":"handle","description":"Custom drag handle element"}],"events":[],"examples":["Basic Usage","Drag Mode","Autoplay","Custom Content","Beam Colors"]},{"name":"NoiseReveal","slug":"noise-reveal","description":"WebGL image reveal with a Perlin-noise dissolve mask, contracting radial gradient, and wave displacement","category":"media","group":"fancy","tags":["media","image","reveal","webgl","shader","threejs","noise"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["NoiseReveal"]},"react":{"package":"fancy-ui-react","names":["NoiseReveal"]},"vue":{"package":"fancy-ui-vue","names":["NoiseReveal"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/noise-reveal.md","react":"https://fancy-ui.rama.app/docs/components/react/noise-reveal.md","vue":"https://fancy-ui.rama.app/docs/components/vue/noise-reveal.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/noise-reveal.json","react":"https://fancy-ui.rama.app/r/noise-reveal.json","vue":"https://fancy-ui.rama.app/r/vue/noise-reveal.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/noise-reveal","props":[{"name":"src","type":"string","description":"Image URL","required":true},{"name":"alt","type":"string","description":"Accessible label for the image"},{"name":"trigger","type":"\"view\" | \"manual\"","default":"\"view\"","description":"Reveal trigger: \"view\" = on viewport entry, \"manual\" = via revealed prop"},{"name":"revealed","type":"boolean","default":"false","description":"Manual reveal state (used with trigger=\"manual\"; also allows re-hiding)"},{"name":"duration","type":"number","default":"1.5","description":"Reveal animation duration in seconds"},{"name":"delay","type":"number","default":"0","description":"Delay before reveal in seconds (trigger=\"view\")"}],"snippets":[],"events":[],"examples":["Basic Usage"]},{"name":"ChatError","slug":"chat-error","description":"Quiet inline failure banner for a chat turn: the error, an optional detail line, and a retry button that disables itself while the retry is in flight","category":"ai-chat","group":"fancy","tags":["ai","chat","error","feedback","retry"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["ChatError"]},"react":{"package":"fancy-ui-react","names":["ChatError"]},"vue":{"package":"fancy-ui-vue","names":["ChatError"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/chat-error.md","react":"https://fancy-ui.rama.app/docs/components/react/chat-error.md","vue":"https://fancy-ui.rama.app/docs/components/vue/chat-error.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/chat-error.json","react":"https://fancy-ui.rama.app/r/chat-error.json","vue":"https://fancy-ui.rama.app/r/vue/chat-error.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/chat-error","props":[{"name":"message","type":"string","default":"\"Something went wrong\"","description":"The failure line"},{"name":"detail","type":"string","description":"Secondary muted line under the message, e.g. the error code"},{"name":"onRetry","type":"() => void","description":"Pressing retry calls this; the retry button only exists when it is set"},{"name":"retryLabel","type":"string","default":"\"Retry\"","description":"Label for the retry button"},{"name":"retrying","type":"boolean","default":"false","description":"Whether a retry is in flight: disables the button and marks the row busy"},{"name":"sound","type":"boolean","default":"false","description":"Plays the press cue on retry, once the user has enabled sound"}],"snippets":[{"name":"icon","description":"Leading icon, replacing the default warning triangle"},{"name":"children","description":"Rendered instead of the message and detail block"}],"events":[],"examples":["Basic Usage"]},{"name":"ChatMessage","slug":"chat-message","description":"One conversation turn, aligned and dressed by its role, streaming its body while the answer arrives, with an action rail that fades in on hover and a version navigator underneath","category":"ai-chat","group":"fancy","tags":["ai","chat","message","compound","streaming"],"dependencies":["streaming-text"],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["ChatMessage"]},"react":{"package":"fancy-ui-react","names":["ChatMessage"]},"vue":{"package":"fancy-ui-vue","names":["ChatMessage"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/chat-message.md","react":"https://fancy-ui.rama.app/docs/components/react/chat-message.md","vue":"https://fancy-ui.rama.app/docs/components/vue/chat-message.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/chat-message.json","react":"https://fancy-ui.rama.app/r/chat-message.json","vue":"https://fancy-ui.rama.app/r/vue/chat-message.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/chat-message","props":[{"name":"role","type":"\"user\" | \"assistant\" | \"system\"","default":"\"assistant\"","description":"Who produced the turn; drives alignment, chrome, and the accessible name"},{"name":"content","type":"string","default":"\"\"","description":"The body so far, not the latest delta; reassign with a longer string as chunks arrive"},{"name":"streaming","type":"boolean","default":"false","description":"Whether content is still growing; shows the trailing cursor"},{"name":"markdown","type":"boolean","default":"false","description":"Render the body as markdown instead of a tinted plain-text stream"},{"name":"timestamp","type":"Date | number","description":"When the turn was produced; rendered relative, with the exact time as its tooltip"},{"name":"sound","type":"boolean","default":"false","description":"Plays press on a message action and select on a branch step, once the user has enabled sound"}],"snippets":[{"name":"avatar","description":"Rendered beside the body: an image, initials, an icon"},{"name":"children","description":"Replaces the default body rendering entirely; content is then ignored"},{"name":"actions","description":"The action rail — put ChatMessageActions here; fades in on hover or focus"},{"name":"footer","description":"Rendered under the body — where ChatMessageBranches belongs"}],"events":[],"examples":["Basic Usage"]},{"name":"ChatPanel","slug":"chat-panel","description":"The shell a conversation lives in: a sticky header, a transcript that pins itself to the bottom while an answer arrives and offers the way back once you scroll up, and a sticky composer row","category":"ai-chat","group":"fancy","tags":["ai","chat","panel","shell","compound"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["ChatPanel"]},"react":{"package":"fancy-ui-react","names":["ChatPanel"]},"vue":{"package":"fancy-ui-vue","names":["ChatPanel"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/chat-panel.md","react":"https://fancy-ui.rama.app/docs/components/react/chat-panel.md","vue":"https://fancy-ui.rama.app/docs/components/vue/chat-panel.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/chat-panel.json","react":"https://fancy-ui.rama.app/r/chat-panel.json","vue":"https://fancy-ui.rama.app/r/vue/chat-panel.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/chat-panel","props":[{"name":"streaming","type":"boolean","default":"false","description":"Whether a reply is still arriving; pins the transcript to its bottom until the reader scrolls up"},{"name":"empty","type":"boolean","default":"false","description":"Renders the emptyState snippet in place of the message stream"},{"name":"returnLabel","type":"string","default":"\"Jump to latest\"","description":"Label on the pill offered once the reader scrolls away from the bottom"},{"name":"sound","type":"boolean","default":"false","description":"Plays press on the jump-to-latest pill, once the user has enabled sound"}],"snippets":[{"name":"header","description":"Sticky top region: a title, a model name, a close button"},{"name":"children","description":"The message stream, filling the scroll region"},{"name":"composer","description":"Sticky bottom region — where Composer belongs"},{"name":"emptyState","description":"Rendered instead of children while empty — where ChatEmptyState belongs"}],"events":[],"examples":["Basic Usage","Full Conversation"]},{"name":"Composer","slug":"composer","description":"The input at the bottom of a chat, taken apart: a root that owns the draft and eight parts that read it — a growing textarea, a send button that becomes a stop button, a toolbar, a model picker, an attachment row with its chips, and a completion menu you can mount twice on the same draft for / commands and @ mentions","category":"ai-chat","group":"fancy","tags":["ai","chat","composer","input","compound"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Composer"]},"react":{"package":"fancy-ui-react","names":["Composer"]},"vue":{"package":"fancy-ui-vue","names":["Composer"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/composer.md","react":"https://fancy-ui.rama.app/docs/components/react/composer.md","vue":"https://fancy-ui.rama.app/docs/components/vue/composer.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/composer.json","react":"https://fancy-ui.rama.app/r/composer.json","vue":"https://fancy-ui.rama.app/r/vue/composer.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/composer","props":[{"name":"value","type":"string","default":"\"\"","description":"The draft text, bindable. Cleared by a successful submit; the attachments are not, since only the consumer knows whether an upload is still in flight"},{"name":"attachments","type":"AttachmentData[]","default":"[]","description":"Files riding along with the draft, bindable. The consumer owns uploading them and pushing the results here"},{"name":"disabled","type":"boolean","default":"false","description":"Blocks typing, sending, and attaching. Every part reads it off the context, so one flag takes the whole composition inert"},{"name":"streaming","type":"boolean","default":"false","description":"A response is arriving: the send button becomes a stop button, the textarea goes readonly rather than disabled, and a submit is refused whatever triggered it"},{"name":"placeholder","type":"string","description":"Placeholder for the default input. Ignored once children replaces the composition — the ComposerInput inside it carries its own"},{"name":"onSubmit","type":"(payload: { text: string; attachments: AttachmentData[] }) => void","description":"Called with the trimmed draft and a snapshot of the attachments. Never fires on an empty draft that carries no files"},{"name":"onStop","type":"() => void","description":"Called when the stop button is pressed while streaming"},{"name":"onAttach","type":"(files: File[]) => void","description":"Called with the files handed to the picker. Upload them, then push the results onto attachments — the composer never uploads anything itself"},{"name":"sound","type":"boolean","default":"false","description":"Plays press on send and stop, select on a model or command pick and open/close on the model menu, once the user has enabled sound"}],"snippets":[{"name":"children","description":"Replaces the default input-and-send-row composition entirely: mount the parts in whatever order the layout needs"},{"name":"accessory","description":"An overlay covering the composer — a voice panel, a drop target, a confirmation. It sits above the composition rather than replacing it, so the draft is still there when it lifts"}],"events":[],"examples":["Basic Usage","Full Composer"]},{"name":"ContextRing","slug":"context-ring","description":"How much of the context window is gone, in the space of a favicon: a donut that fills as the conversation grows, the compact count beside it, and an optional popover breaking the total down by what is holding it","category":"ai-chat","group":"fancy","tags":["ai","chat","tokens","context","indicator"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["ContextRing"]},"react":{"package":"fancy-ui-react","names":["ContextRing"]},"vue":{"package":"fancy-ui-vue","names":["ContextRing"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/context-ring.md","react":"https://fancy-ui.rama.app/docs/components/react/context-ring.md","vue":"https://fancy-ui.rama.app/docs/components/vue/context-ring.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/context-ring.json","react":"https://fancy-ui.rama.app/r/context-ring.json","vue":"https://fancy-ui.rama.app/r/vue/context-ring.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/context-ring","props":[{"name":"usage","type":"TokenUsageData","description":"Context-window consumption: tokens used, out of how many, and optionally the breakdown rows the popover lists","required":true},{"name":"size","type":"number","default":"28","description":"Outer diameter of the ring, in pixels; drives the viewBox and the radius"},{"name":"strokeWidth","type":"number","default":"3","description":"Thickness of the track and the arc, in pixels; clamped to the radius so a thick ring cannot eat its own centre"},{"name":"showLabel","type":"boolean","default":"true","description":"Whether the compact \"12.4k / 200k\" figure is shown beside the ring — exact under a thousand, one decimal under 100k, rounded above"},{"name":"warnAt","type":"number","default":"0.75","description":"Fraction at which the ring leaves the quiet band and takes the running colour"},{"name":"criticalAt","type":"number","default":"0.9","description":"Fraction at which the ring takes the error colour. Floored at warnAt, so a threshold set below the warning cannot create a band that never wins"},{"name":"label","type":"string","default":"\"Context usage\"","description":"Accessible name for the meter, and — when expandable — for the button that contains it"},{"name":"expandable","type":"boolean","default":"false","description":"Turns the ring into a button that toggles a popover listing usage.breakdown; closes on Escape, on a click outside, or on a second press"},{"name":"sound","type":"boolean","default":"false","description":"Plays open/close on the breakdown popover, once the user has enabled sound"}],"snippets":[],"events":[],"examples":["Basic Usage"]},{"name":"ImageGeneration","slug":"image-generation","description":"Fixed frame that holds its place while a model draws: an empty outline, then a pixel grid working over a drifting dot field, then the finished image easing out of a blur","category":"ai-chat","group":"fancy","tags":["ai","chat","image","generation","media"],"dependencies":["pixel-loader"],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["ImageGeneration"]},"react":{"package":"fancy-ui-react","names":["ImageGeneration"]},"vue":{"package":"fancy-ui-vue","names":["ImageGeneration"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/image-generation.md","react":"https://fancy-ui.rama.app/docs/components/react/image-generation.md","vue":"https://fancy-ui.rama.app/docs/components/vue/image-generation.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/image-generation.json","react":"https://fancy-ui.rama.app/r/image-generation.json","vue":"https://fancy-ui.rama.app/r/vue/image-generation.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/image-generation","props":[{"name":"status","type":"\"idle\" | \"generating\" | \"done\" | \"error\"","description":"Which stage of the generation to render","required":true},{"name":"src","type":"string | null","description":"The generated image, shown once status is \"done\""},{"name":"alt","type":"string","description":"Describes the image to assistive tech — typically the prompt","required":true},{"name":"aspectRatio","type":"string","default":"\"1 / 1\"","description":"CSS aspect-ratio of the frame, holding the layout across every state"},{"name":"prompt","type":"string","description":"Muted caption line under the frame"},{"name":"errorText","type":"string","default":"\"Generation failed\"","description":"The failure line shown in the error state"},{"name":"onRetry","type":"() => void","description":"Pressing retry calls this; the retry button only exists when it is set"},{"name":"onLoad","type":"() => void","description":"Called once the generated image has finished loading"},{"name":"sound","type":"boolean","default":"false","description":"Plays the press cue on retry, once the user has enabled sound"}],"snippets":[],"events":[],"examples":["Basic Usage"]},{"name":"InlineCitation","slug":"inline-citation","description":"A numbered reference that sits inside a sentence and reveals the document behind it — title, domain and snippet — in a floating card on hover or focus","category":"ai-chat","group":"fancy","tags":["ai","chat","citations","tooltip"],"dependencies":["sources"],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["InlineCitation"]},"react":{"package":"fancy-ui-react","names":["InlineCitation"]},"vue":{"package":"fancy-ui-vue","names":["InlineCitation"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/inline-citation.md","react":"https://fancy-ui.rama.app/docs/components/react/inline-citation.md","vue":"https://fancy-ui.rama.app/docs/components/vue/inline-citation.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/inline-citation.json","react":"https://fancy-ui.rama.app/r/inline-citation.json","vue":"https://fancy-ui.rama.app/r/vue/inline-citation.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/inline-citation","props":[{"name":"source","type":"SourceData","description":"The document being cited; its title, domain and snippet fill the card","required":true},{"name":"index","type":"number","description":"The reference number shown in the marker, e.g. 3 renders [3]","required":true},{"name":"href","type":"string","default":"source.url","description":"Link target; an explicit empty string renders an unlinked marker that only reveals the card"},{"name":"onOpen","type":"() => void","description":"Called each time the card appears, once per appearance rather than per hover"}],"snippets":[{"name":"preview","description":"Replaces the default card body; receives the source"}],"events":[],"examples":["Basic Usage"]},{"name":"PixelLoader","slug":"pixel-loader","description":"Grid of pixels pulsing in a diagonal wave as a pre-token loading indicator for AI responses","category":"ai-chat","group":"fancy","tags":["ai","reasoning","loading","indicator"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["PixelLoader"]},"react":{"package":"fancy-ui-react","names":["PixelLoader"]},"vue":{"package":"fancy-ui-vue","names":["PixelLoader"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/pixel-loader.md","react":"https://fancy-ui.rama.app/docs/components/react/pixel-loader.md","vue":"https://fancy-ui.rama.app/docs/components/vue/pixel-loader.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/pixel-loader.json","react":"https://fancy-ui.rama.app/r/pixel-loader.json","vue":"https://fancy-ui.rama.app/r/vue/pixel-loader.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/pixel-loader","props":[{"name":"cols","type":"number","default":"5","description":"Number of pixel columns"},{"name":"rows","type":"number","default":"5","description":"Number of pixel rows"},{"name":"cellSize","type":"number","default":"6","description":"Size of a single pixel in px"},{"name":"gap","type":"number","default":"2","description":"Space between pixels in px"},{"name":"color","type":"string","default":"\"var(--ft-pixel-color, currentColor)\"","description":"Pixel colour, any CSS colour value"},{"name":"speed","type":"number","default":"1.6","description":"Duration of one full pulse cycle in seconds"},{"name":"label","type":"string","default":"\"Loading\"","description":"Accessible label announced by assistive tech"}],"snippets":[],"events":[],"examples":["Basic Usage"]},{"name":"PromptSuggestions","slug":"prompt-suggestions","description":"Row of prompt pills that cascade in after a reply lands, offering the user a next turn without composing one","category":"ai-chat","group":"fancy","tags":["ai","chat","suggestions","pills"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["PromptSuggestions"]},"react":{"package":"fancy-ui-react","names":["PromptSuggestions"]},"vue":{"package":"fancy-ui-vue","names":["PromptSuggestions"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/prompt-suggestions.md","react":"https://fancy-ui.rama.app/docs/components/react/prompt-suggestions.md","vue":"https://fancy-ui.rama.app/docs/components/vue/prompt-suggestions.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/prompt-suggestions.json","react":"https://fancy-ui.rama.app/r/prompt-suggestions.json","vue":"https://fancy-ui.rama.app/r/vue/prompt-suggestions.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/prompt-suggestions","props":[{"name":"suggestions","type":"string[]","description":"Prompt texts offered to the user, in display order","required":true},{"name":"onSelect","type":"(suggestion: string, index: number) => void","description":"Called with the chosen prompt and its index when a pill is activated"},{"name":"visible","type":"boolean","default":"true","description":"Whether the pills are shown; flipping this to true replays the entrance"},{"name":"staggerMs","type":"number","default":"60","description":"Delay between two consecutive pills entering, in milliseconds"},{"name":"label","type":"string","default":"\"Suggestions\"","description":"Accessible name of the group wrapping the pills"},{"name":"sound","type":"boolean","default":"false","description":"Plays select when a suggestion is picked, once the user has enabled sound"}],"snippets":[{"name":"item","description":"Custom pill content, receiving the suggestion and its index"}],"events":[],"examples":["Basic Usage"]},{"name":"ScrollAnchor","slug":"scroll-anchor","description":"A scroll region that stays pinned to its last line while content streams in, lets go when the reader scrolls up, and floats a pill offering the way back down","category":"ai-chat","group":"fancy","tags":["ai","chat","scroll","streaming","utility"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["ScrollAnchor"]},"react":{"package":"fancy-ui-react","names":["ScrollAnchor"]},"vue":{"package":"fancy-ui-vue","names":["ScrollAnchor"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/scroll-anchor.md","react":"https://fancy-ui.rama.app/docs/components/react/scroll-anchor.md","vue":"https://fancy-ui.rama.app/docs/components/vue/scroll-anchor.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/scroll-anchor.json","react":"https://fancy-ui.rama.app/r/scroll-anchor.json","vue":"https://fancy-ui.rama.app/r/vue/scroll-anchor.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/scroll-anchor","props":[{"name":"active","type":"boolean","default":"true","description":"Whether the region pins itself to the bottom as content arrives — bind it to your streaming flag. False leaves an ordinary scroll box, and hides the return button with it"},{"name":"bottomThreshold","type":"number","default":"40","description":"How close to the bottom (px) still counts as pinned"},{"name":"returnLabel","type":"string","default":"\"Jump to latest\"","description":"Label on the floating return button, and its accessible name"},{"name":"showReturn","type":"boolean","default":"true","description":"Whether the floating return button appears once the reader scrolls away from the bottom"},{"name":"maxHeight","type":"string","default":"\"100%\"","description":"Height cap on the scrolling region — any CSS length"},{"name":"onStickChange","type":"(stuck: boolean) => void","description":"Called when the region pins itself or lets go, never on every scroll"},{"name":"sound","type":"boolean","default":"false","description":"Plays press on the return-to-latest pill, once the user has enabled sound"}],"snippets":[{"name":"children","description":"The scrolling content"}],"events":[],"examples":["Basic Usage"]},{"name":"Sources","slug":"sources","description":"The citations under an answer: a pill carrying a stack of domain monograms and a count, expanding into scannable source cards with title, host, and the line worth reading","category":"ai-chat","group":"fancy","tags":["ai","chat","citations","sources","compound"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Sources"]},"react":{"package":"fancy-ui-react","names":["Sources"]},"vue":{"package":"fancy-ui-vue","names":["Sources"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/sources.md","react":"https://fancy-ui.rama.app/docs/components/react/sources.md","vue":"https://fancy-ui.rama.app/docs/components/vue/sources.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/sources.json","react":"https://fancy-ui.rama.app/r/sources.json","vue":"https://fancy-ui.rama.app/r/vue/sources.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/sources","props":[{"name":"sources","type":"SourceData[]","description":"The documents backing the answer, in reading order","required":true},{"name":"open","type":"boolean","default":"false","description":"Whether the list is expanded; bindable"},{"name":"onToggle","type":"(open: boolean) => void","description":"Called when the pill is clicked, with the state it moved to; driving open yourself does not fire it"},{"name":"sound","type":"boolean","default":"false","description":"Plays open/close when the source list is expanded or collapsed, once the user has enabled sound"}],"snippets":[{"name":"children","description":"Replaces the default trigger-and-list composition entirely; omit it and the root renders both"},{"name":"item","description":"On SourcesList — replaces the default card; receives the source and its index"},{"name":"icon","description":"On SourceCard — replaces the monogram: a favicon you host, a logo"}],"events":[],"examples":["Basic Usage"]},{"name":"StreamingText","slug":"streaming-text","description":"Renders a growing string as a live token stream: the appended delta lands tinted and settles, with an optional block cursor while the response is in flight","category":"ai-chat","group":"fancy","tags":["ai","chat","streaming","text","reasoning"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["StreamingText"]},"react":{"package":"fancy-ui-react","names":["StreamingText"]},"vue":{"package":"fancy-ui-vue","names":["StreamingText"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/streaming-text.md","react":"https://fancy-ui.rama.app/docs/components/react/streaming-text.md","vue":"https://fancy-ui.rama.app/docs/components/vue/streaming-text.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/streaming-text.json","react":"https://fancy-ui.rama.app/r/streaming-text.json","vue":"https://fancy-ui.rama.app/r/vue/streaming-text.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/streaming-text","props":[{"name":"text","type":"string","description":"The accumulated text so far, not the latest delta; reassign as chunks arrive","required":true},{"name":"streaming","type":"boolean","default":"false","description":"Show a soft block cursor after the last character"},{"name":"markdown","type":"boolean","default":"false","description":"Render as markdown instead of the tinted plain-text stream; disables the delta tint"},{"name":"settleMs","type":"number","default":"350","description":"How long a newly arrived chunk stays tinted in ms, plain mode only"},{"name":"tintColor","type":"string","description":"Colour a chunk fades from, and the cursor's fill; sets --ft-tint-color"},{"name":"onComplete","type":"() => void","description":"Called once when streaming goes from true to false"}],"snippets":[],"events":[],"examples":["Basic Usage","Markdown Streaming"]},{"name":"ThreadList","slug":"thread-list","description":"Conversation history for a chat sidebar: one row per thread with an unread dot, its last message, and a relative timestamp, plus selection and per-row delete","category":"ai-chat","group":"fancy","tags":["ai","chat","threads","history","navigation"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["ThreadList"]},"react":{"package":"fancy-ui-react","names":["ThreadList"]},"vue":{"package":"fancy-ui-vue","names":["ThreadList"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/thread-list.md","react":"https://fancy-ui.rama.app/docs/components/react/thread-list.md","vue":"https://fancy-ui.rama.app/docs/components/vue/thread-list.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/thread-list.json","react":"https://fancy-ui.rama.app/r/thread-list.json","vue":"https://fancy-ui.rama.app/r/vue/thread-list.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/thread-list","props":[{"name":"threads","type":"ThreadData[]","description":"The conversations to list, in the order they should appear","required":true},{"name":"activeId","type":"string","description":"Id of the selected conversation (bindable). A click writes the new id back whether or not onSelect is supplied"},{"name":"onSelect","type":"(thread: ThreadData) => void","description":"Called with the conversation the reader picked"},{"name":"onDelete","type":"(thread: ThreadData) => void","description":"Supplying it puts a delete button on every row, revealed on hover or focus"},{"name":"label","type":"string","default":"\"Conversations\"","description":"Accessible name for the list"},{"name":"sound","type":"boolean","default":"false","description":"Plays select when a different conversation is picked and press when one is deleted, once the user has enabled sound"}],"snippets":[{"name":"item","description":"Replaces the built-in row body; receives the thread and whether it is the active one"},{"name":"empty","description":"Replaces the built-in \"No conversations yet\" line"}],"events":[],"examples":["Basic Usage"]},{"name":"TypingIndicator","slug":"typing-indicator","description":"Animated three-dot presence indicator with a staggered CSS wave, tuned to signal activity without pulling focus","category":"ai-chat","group":"fancy","tags":["ai","chat","indicator","presence"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["TypingIndicator"]},"react":{"package":"fancy-ui-react","names":["TypingIndicator"]},"vue":{"package":"fancy-ui-vue","names":["TypingIndicator"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/typing-indicator.md","react":"https://fancy-ui.rama.app/docs/components/react/typing-indicator.md","vue":"https://fancy-ui.rama.app/docs/components/vue/typing-indicator.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/typing-indicator.json","react":"https://fancy-ui.rama.app/r/typing-indicator.json","vue":"https://fancy-ui.rama.app/r/vue/typing-indicator.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/typing-indicator","props":[{"name":"size","type":"number","default":"6","description":"Dot diameter in pixels"},{"name":"color","type":"string","default":"\"var(--ft-typing-color, currentColor)\"","description":"Dot color; any CSS color or custom property expression"},{"name":"speed","type":"number","default":"1.2","description":"Duration of one full animation cycle in seconds"},{"name":"label","type":"string","default":"\"Typing\"","description":"Visually hidden text announced to assistive technology"}],"snippets":[],"events":[],"examples":["Basic Usage"]},{"name":"VoiceInput","slug":"voice-input","description":"A mic button that opens into a recording panel: a live waveform painted from amplitude levels you supply, a stopwatch, the transcript as it arrives, and a cross and a check to throw it away or keep it","category":"ai-chat","group":"fancy","tags":["ai","chat","voice","waveform","input"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["VoiceInput"]},"react":{"package":"fancy-ui-react","names":["VoiceInput"]},"vue":{"package":"fancy-ui-vue","names":["VoiceInput"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/voice-input.md","react":"https://fancy-ui.rama.app/docs/components/react/voice-input.md","vue":"https://fancy-ui.rama.app/docs/components/vue/voice-input.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/voice-input.json","react":"https://fancy-ui.rama.app/r/voice-input.json","vue":"https://fancy-ui.rama.app/r/vue/voice-input.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/voice-input","props":[{"name":"active","type":"boolean","default":"false","description":"Whether a recording is in progress (bindable). Every button writes through it; setting it from outside opens or closes the panel without firing a callback"},{"name":"transcript","type":"string","default":"\"\"","description":"Live text pushed by the consumer as their recogniser produces it, rendered muted under the waveform; a growing string grows in place"},{"name":"samples","type":"ArrayLike<number>","description":"Amplitude levels in 0..1 bridged from your own audio pipeline, one entry per bar. The component never opens a microphone itself"},{"name":"demo","type":"boolean","default":"false","description":"Draw a deterministic synthetic wave when no samples arrive, so the panel is legible on a page with no audio behind it. Real samples always win"},{"name":"onStart","type":"() => void","description":"Called when the mic button starts a recording"},{"name":"onStop","type":"() => void","description":"Called when the check ends the recording and keeps the transcript"},{"name":"onCancel","type":"() => void","description":"Called when the cross abandons the recording"},{"name":"height","type":"number","default":"48","description":"Waveform height in CSS pixels, clamped to 16..240"},{"name":"color","type":"string","default":"var(--ft-voice-color, currentColor)","description":"Any CSS colour for the bars, including a var() or currentColor — written onto the canvas as its CSS color and read back resolved, because a 2D context understands neither"},{"name":"sound","type":"boolean","default":"false","description":"Plays open on start, close on cancel and select on a confirmed recording, once the user has enabled sound"}],"snippets":[],"events":[],"examples":["Basic Usage"]},{"name":"WebSearch","slug":"web-search","description":"A search the agent ran: the query in a search-bar header, an indeterminate scanning bar while it runs, and results that land one row at a time","category":"ai-chat","group":"fancy","tags":["ai","chat","search","results","knowledge"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["WebSearch"]},"react":{"package":"fancy-ui-react","names":["WebSearch"]},"vue":{"package":"fancy-ui-vue","names":["WebSearch"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/web-search.md","react":"https://fancy-ui.rama.app/docs/components/react/web-search.md","vue":"https://fancy-ui.rama.app/docs/components/vue/web-search.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/web-search.json","react":"https://fancy-ui.rama.app/r/web-search.json","vue":"https://fancy-ui.rama.app/r/vue/web-search.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/web-search","props":[{"name":"query","type":"string","description":"What the agent looked up, shown in the search-bar header","required":true},{"name":"results","type":"SearchResultData[]","description":"Hits found so far, oldest first; appending to it lands a new row","required":true},{"name":"searching","type":"boolean","default":"false","description":"Whether the lookup is still running: drives the scanning bar and the waiting state"},{"name":"onSelect","type":"(result: SearchResultData, index: number) => void","description":"Called when a row is activated; supplying it turns every row into a button"},{"name":"maxVisible","type":"number","default":"0","description":"Rows shown before the expander takes over; 0 shows every result"},{"name":"label","type":"string","default":"\"Web search\"","description":"Accessible name for the whole block"},{"name":"sound","type":"boolean","default":"false","description":"Plays select on a picked result and open/close on the expander, once the user has enabled sound"}],"snippets":[{"name":"item","description":"Replaces the built-in row body, keeping the row element and its behaviour"}],"events":[],"examples":["Basic Usage"]},{"name":"AgentPlan","slug":"agent-plan","description":"Glanceable checklist of an agent's plan: a done/total count and completion bar over one row per step, with a status glyph, an optional detail line, and substeps indented under a rail","category":"ai-agents","group":"fancy","tags":["ai","agents","plan","checklist","progress"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["AgentPlan"]},"react":{"package":"fancy-ui-react","names":["AgentPlan"]},"vue":{"package":"fancy-ui-vue","names":["AgentPlan"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/agent-plan.md","react":"https://fancy-ui.rama.app/docs/components/react/agent-plan.md","vue":"https://fancy-ui.rama.app/docs/components/vue/agent-plan.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/agent-plan.json","react":"https://fancy-ui.rama.app/r/agent-plan.json","vue":"https://fancy-ui.rama.app/r/vue/agent-plan.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/agent-plan","props":[{"name":"steps","type":"PlanStepData[]","description":"The plan, in the order the agent means to work through it; nests one level via substeps","required":true},{"name":"label","type":"string","default":"\"Plan\"","description":"Header text, sitting beside the done/total count"},{"name":"showProgress","type":"boolean","default":"true","description":"Whether the thin completion bar shows under the header; its fraction counts substeps as steps"},{"name":"onSelect","type":"(step: PlanStepData) => void","description":"Called when a row is activated; supplying it turns every row into a button"},{"name":"sound","type":"boolean","default":"false","description":"Plays select when a plan row is activated, once the user has enabled sound"}],"snippets":[{"name":"item","description":"Replaces the built-in row body, keeping the glyph and the indent; receives the step and its position in visual order"}],"events":[],"examples":["Basic Usage"]},{"name":"AiDataTable","slug":"ai-data-table","description":"Compact comparison table for a model's structured answer: real table semantics, tabular numeric columns, check-or-dash booleans, and one tintable column — rendered in the order it arrived, with no sorting","category":"ai-agents","group":"fancy","tags":["ai","agents","table","comparison","structured-output"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["AiDataTable"]},"react":{"package":"fancy-ui-react","names":["AiDataTable"]},"vue":{"package":"fancy-ui-vue","names":["AiDataTable"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/ai-data-table.md","react":"https://fancy-ui.rama.app/docs/components/react/ai-data-table.md","vue":"https://fancy-ui.rama.app/docs/components/vue/ai-data-table.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/ai-data-table.json","react":"https://fancy-ui.rama.app/r/ai-data-table.json","vue":"https://fancy-ui.rama.app/r/vue/ai-data-table.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/ai-data-table","props":[{"name":"columns","type":"AiDataTableColumn[]","description":"Columns in render order: key, label, and optional align / numeric. A numeric column gets tabular figures and right alignment","required":true},{"name":"rows","type":"AiDataTableRow[]","description":"Rows keyed by column key, in the order the model produced them; a missing key renders as empty","required":true},{"name":"caption","type":"string","description":"Names the table for assistive tech; rendered in a visually-hidden <caption> unless captionVisible"},{"name":"captionVisible","type":"boolean","default":"false","description":"Also shows the caption, as a muted line above the table"},{"name":"dense","type":"boolean","default":"false","description":"Tighter rows, for a table read at a glance rather than studied"},{"name":"highlightColumn","type":"string","description":"Key of the column to tint — the recommendation, or whichever criterion decided it"}],"snippets":[{"name":"cell","description":"Replaces the default rendering of every cell; receives the raw value and { row, key }"}],"events":[],"examples":["Basic Usage"]},{"name":"ApprovalCard","slug":"approval-card","description":"A human-in-the-loop gate before a side effect: the agent states what it is about to do, and the footer swaps its approve and deny buttons for a one-line verdict once someone decides","category":"ai-agents","group":"fancy","tags":["ai","agents","approval","human-in-the-loop","gate"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["ApprovalCard"]},"react":{"package":"fancy-ui-react","names":["ApprovalCard"]},"vue":{"package":"fancy-ui-vue","names":["ApprovalCard"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/approval-card.md","react":"https://fancy-ui.rama.app/docs/components/react/approval-card.md","vue":"https://fancy-ui.rama.app/docs/components/vue/approval-card.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/approval-card.json","react":"https://fancy-ui.rama.app/r/approval-card.json","vue":"https://fancy-ui.rama.app/r/vue/approval-card.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/approval-card","props":[{"name":"title","type":"string","description":"What permission is being asked for, e.g. \"Run database migration\"","required":true},{"name":"description","type":"string","description":"Muted second line under the title — the consequence, the blast radius"},{"name":"state","type":"\"pending\" | \"approved\" | \"denied\"","default":"\"pending\"","description":"Which side of the gate we are on (bindable). Buttons exist only while pending; writing a resolved value from outside settles the card without firing a callback"},{"name":"destructive","type":"boolean","default":"false","description":"Marks the action as irreversible: red approve button, a warning tint on the card, and an alert mark on the shield so the warning is not carried by colour alone"},{"name":"approveLabel","type":"string","default":"\"Approve\"","description":"Label for the approve button"},{"name":"denyLabel","type":"string","default":"\"Deny\"","description":"Label for the deny button"},{"name":"onApprove","type":"() => void","description":"Called when approve is pressed, after state has been written"},{"name":"onDeny","type":"() => void","description":"Called when deny is pressed, after state has been written"},{"name":"busy","type":"boolean","default":"false","description":"The consumer is executing the decision: both buttons go disabled and the card is marked aria-busy"},{"name":"sound","type":"boolean","default":"false","description":"Plays select on both approve and deny, once the user has enabled sound"}],"snippets":[{"name":"children","description":"Detail region between the header and the footer — a diff, a command preview, the payload about to be posted"}],"events":[],"examples":["Basic Usage"]},{"name":"ArtifactCard","slug":"artifact-card","description":"A generated document as a tangible object: title, kind, a version navigator, and the first six lines of the text itself streaming in behind a fade","category":"ai-agents","group":"fancy","tags":["ai","agents","artifact","document","versioned","streaming"],"dependencies":["streaming-text"],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["ArtifactCard"]},"react":{"package":"fancy-ui-react","names":["ArtifactCard"]},"vue":{"package":"fancy-ui-vue","names":["ArtifactCard"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/artifact-card.md","react":"https://fancy-ui.rama.app/docs/components/react/artifact-card.md","vue":"https://fancy-ui.rama.app/docs/components/vue/artifact-card.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/artifact-card.json","react":"https://fancy-ui.rama.app/r/artifact-card.json","vue":"https://fancy-ui.rama.app/r/vue/artifact-card.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/artifact-card","props":[{"name":"title","type":"string","description":"What the document is called","required":true},{"name":"kind","type":"string","default":"\"Document\"","description":"The kind of thing it is, on the muted line under the title"},{"name":"version","type":"number","description":"Which revision is on screen, 1-based; rendered as v3"},{"name":"versionCount","type":"number","description":"How many revisions exist; with version the badge reads v3/5"},{"name":"onVersionChange","type":"(version: number) => void","description":"Asked for another revision by 1-based number, never one outside its bounds; supplying it turns the badge into a navigator"},{"name":"status","type":"\"idle\" | \"streaming\" | \"done\" | \"error\"","default":"\"done\"","description":"Where the document is in its life; streaming sweeps the top edge and trails a cursor, error grows a tinted footer"},{"name":"preview","type":"string","description":"The text so far, not the latest delta; clamped to roughly six lines behind a bottom fade"},{"name":"onOpen","type":"() => void","description":"Asked to open the document; supplying it makes the whole card activatable by click, Enter, or Space"},{"name":"sound","type":"boolean","default":"false","description":"Plays press when the document is opened and select on a version step, once the user has enabled sound"}],"snippets":[{"name":"actions","description":"Buttons for the top-right rail; each keeps its own click, without opening the card"}],"events":[],"examples":["Basic Usage"]},{"name":"CodeDiff","slug":"code-diff","description":"Unified diff tuned for chat width: one foldable card per file, tinted add/delete rows, and a copy-safe gutter","category":"ai-agents","group":"fancy","tags":["ai","agents","diff","code","review"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["CodeDiff"]},"react":{"package":"fancy-ui-react","names":["CodeDiff"]},"vue":{"package":"fancy-ui-vue","names":["CodeDiff"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/code-diff.md","react":"https://fancy-ui.rama.app/docs/components/react/code-diff.md","vue":"https://fancy-ui.rama.app/docs/components/vue/code-diff.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/code-diff.json","react":"https://fancy-ui.rama.app/r/code-diff.json","vue":"https://fancy-ui.rama.app/r/vue/code-diff.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/code-diff","props":[{"name":"diff","type":"string","description":"Raw unified diff text, headers and all; parsed on every change, so a patch still arriving can be handed over as it grows","required":true},{"name":"filename","type":"string","description":"Header label when the patch names no file, or names exactly one"},{"name":"lineNumbers","type":"boolean","default":"true","description":"Whether to show the old/new line-number gutters"},{"name":"collapsed","type":"boolean","default":"false","description":"Whether the bodies are folded away (bindable). Set it and the whole patch folds; a click folds one file and writes back whether anything is left open"},{"name":"maxLines","type":"number","default":"0","description":"Lines shown per file before the rest hide behind a \"Show N more lines\" button; 0 shows everything"},{"name":"wrap","type":"boolean","default":"false","description":"Whether long lines wrap instead of scrolling sideways"},{"name":"sound","type":"boolean","default":"false","description":"Plays open or close as a file folds, and open when clamped lines are revealed, once the user has enabled sound"}],"snippets":[],"events":[],"examples":["Basic Usage"]},{"name":"ReasoningPanel","slug":"reasoning-panel","description":"Collapsible reasoning trace that streams while the model thinks, then folds itself into a one-line summary","category":"ai-agents","group":"fancy","tags":["ai","agents","reasoning","disclosure","streaming"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["ReasoningPanel"]},"react":{"package":"fancy-ui-react","names":["ReasoningPanel"]},"vue":{"package":"fancy-ui-vue","names":["ReasoningPanel"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/reasoning-panel.md","react":"https://fancy-ui.rama.app/docs/components/react/reasoning-panel.md","vue":"https://fancy-ui.rama.app/docs/components/vue/reasoning-panel.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/reasoning-panel.json","react":"https://fancy-ui.rama.app/r/reasoning-panel.json","vue":"https://fancy-ui.rama.app/r/vue/reasoning-panel.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/reasoning-panel","props":[{"name":"text","type":"string","description":"The reasoning trace so far; hand over a longer string to stream more in","required":true},{"name":"streaming","type":"boolean","default":"false","description":"Whether the trace is still growing; drives the timer, shimmer, and autoscroll"},{"name":"open","type":"boolean","description":"Expanded state (bindable). Left undefined, the panel opens while streaming and collapses 600ms after it ends, until the reader toggles it by hand"},{"name":"label","type":"string","default":"\"Reasoning\"","description":"Header text"},{"name":"since","type":"number","description":"Epoch ms the current burst started at; pins the live timer's origin"},{"name":"durationMs","type":"number","description":"Final duration for the summary line; falls back to the duration the panel measured itself"},{"name":"maxHeight","type":"string","default":"\"12rem\"","description":"Scroll height of the trace once expanded"},{"name":"onToggle","type":"(open: boolean) => void","description":"Called on every open/close, by click or on the panel's own initiative"},{"name":"sound","type":"boolean","default":"false","description":"Plays open or close when the reader toggles the reasoning trace, once the user has enabled sound"}],"snippets":[],"events":[],"examples":["Basic Usage"]},{"name":"RecommendationCard","slug":"recommendation-card","description":"An agent's proposal awaiting an answer: a kicker, the recommendation, a confidence figure counted up beside a ring that fills to match, and two buttons that collapse into one quiet resolved line","category":"ai-agents","group":"fancy","tags":["ai","agents","recommendation","confidence"],"dependencies":["number-ticker"],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["RecommendationCard"]},"react":{"package":"fancy-ui-react","names":["RecommendationCard"]},"vue":{"package":"fancy-ui-vue","names":["RecommendationCard"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/recommendation-card.md","react":"https://fancy-ui.rama.app/docs/components/react/recommendation-card.md","vue":"https://fancy-ui.rama.app/docs/components/vue/recommendation-card.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/recommendation-card.json","react":"https://fancy-ui.rama.app/r/recommendation-card.json","vue":"https://fancy-ui.rama.app/r/vue/recommendation-card.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/recommendation-card","props":[{"name":"title","type":"string","description":"What the agent is proposing, e.g. \"Add an index on orders.customer_id\"","required":true},{"name":"description","type":"string","description":"Secondary muted line under the title — the reasoning, the expected effect"},{"name":"confidence","type":"number","description":"How sure the agent is, from 0 to 1. Omitted, the whole confidence block disappears rather than reading as zero; out-of-range numbers are clamped and the band shifts colour at 0.75 and 0.5"},{"name":"acceptLabel","type":"string","default":"\"Apply\"","description":"Label for the confirm button"},{"name":"dismissLabel","type":"string","default":"\"Dismiss\"","description":"Label for the decline button"},{"name":"onAccept","type":"() => void","description":"Called when the recommendation is accepted, after `state` has been written"},{"name":"onDismiss","type":"() => void","description":"Called when the recommendation is dismissed, after `state` has been written"},{"name":"state","type":"\"open\" | \"accepted\" | \"dismissed\"","default":"\"open\"","description":"Where the recommendation stands (bindable). Resolving swaps the buttons for a quiet line inside a polite live region; a resolved card refuses to resolve again"},{"name":"badge","type":"string","description":"Small kicker above the title, e.g. \"Suggestion\""},{"name":"sound","type":"boolean","default":"false","description":"Plays select on accept and close on dismiss, once the user has enabled sound"}],"snippets":[{"name":"children","description":"The detail region between the header and the footer — a snippet of the change being proposed"}],"events":[],"examples":["Basic Usage"]},{"name":"SubagentList","slug":"subagent-list","description":"Fan-out panel for parallel workers: one row per delegated agent with its status dot, model badge, task, and its own progress bar","category":"ai-agents","group":"fancy","tags":["ai","agents","parallel","progress","workers"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["SubagentList"]},"react":{"package":"fancy-ui-react","names":["SubagentList"]},"vue":{"package":"fancy-ui-vue","names":["SubagentList"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/subagent-list.md","react":"https://fancy-ui.rama.app/docs/components/react/subagent-list.md","vue":"https://fancy-ui.rama.app/docs/components/vue/subagent-list.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/subagent-list.json","react":"https://fancy-ui.rama.app/r/subagent-list.json","vue":"https://fancy-ui.rama.app/r/vue/subagent-list.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/subagent-list","props":[{"name":"agents","type":"SubagentData[]","description":"The delegated workers, in the order they were spawned: id, name, task, status, and optionally progress and model","required":true},{"name":"label","type":"string","description":"Accessible name for the list. Left unset it is derived from the statuses — \"2 agents running\" while anything runs, \"3 agents finished\" once the last one lands"},{"name":"onSelect","type":"(agent: SubagentData, index: number) => void","description":"Called when a row is activated; supplying it turns every row into a button"},{"name":"compact","type":"boolean","default":"false","description":"Tighter rows with the task line dropped"},{"name":"sound","type":"boolean","default":"false","description":"Plays select when a subagent row is activated, once the user has enabled sound"}],"snippets":[{"name":"item","description":"Replaces the built-in row body, keeping the status dot"}],"events":[],"examples":["Basic Usage"]},{"name":"TerminalBlock","slug":"terminal-block","description":"Live command transcript: the prompt line, output as it streams in with its ANSI colours read, a block cursor while it runs, and an exit-status footer when it stops","category":"ai-agents","group":"fancy","tags":["ai","agents","terminal","streaming","output"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["TerminalBlock"]},"react":{"package":"fancy-ui-react","names":["TerminalBlock"]},"vue":{"package":"fancy-ui-vue","names":["TerminalBlock"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/terminal-block.md","react":"https://fancy-ui.rama.app/docs/components/react/terminal-block.md","vue":"https://fancy-ui.rama.app/docs/components/vue/terminal-block.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/terminal-block.json","react":"https://fancy-ui.rama.app/r/terminal-block.json","vue":"https://fancy-ui.rama.app/r/vue/terminal-block.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/terminal-block","props":[{"name":"output","type":"string","description":"Everything the command has printed so far, not the latest chunk; reassign as lines arrive","required":true},{"name":"command","type":"string","description":"The command that produced the output, shown after the prompt glyph"},{"name":"prompt","type":"string","default":"\"$\"","description":"Prompt glyph in front of the command"},{"name":"running","type":"boolean","default":"false","description":"Whether the command is still running: shows the cursor, pins the scroll"},{"name":"exitCode","type":"number | null","default":"null","description":"Anything other than null ends the run and shows the status footer"},{"name":"durationMs","type":"number","description":"How long the run took, shown next to the exit status"},{"name":"ansi","type":"boolean","default":"true","description":"Read the SGR subset and colour the output; false still strips the escapes, it just paints nothing"},{"name":"maxHeight","type":"string","default":"\"20rem\"","description":"Height at which the output starts scrolling"}],"snippets":[{"name":"header","description":"Title bar above the output — window dots, a file name, a copy button"}],"events":[],"examples":["Basic Usage"]},{"name":"ThinkingIndicator","slug":"thinking-indicator","description":"Live agent status line with a shimmering activity label and an elapsed timer, as a bare inline row or a bordered status pill","category":"ai-agents","group":"fancy","tags":["ai","agents","reasoning","status","indicator"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["ThinkingIndicator"]},"react":{"package":"fancy-ui-react","names":["ThinkingIndicator"]},"vue":{"package":"fancy-ui-vue","names":["ThinkingIndicator"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/thinking-indicator.md","react":"https://fancy-ui.rama.app/docs/components/react/thinking-indicator.md","vue":"https://fancy-ui.rama.app/docs/components/vue/thinking-indicator.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/thinking-indicator.json","react":"https://fancy-ui.rama.app/r/thinking-indicator.json","vue":"https://fancy-ui.rama.app/r/vue/thinking-indicator.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/thinking-indicator","props":[{"name":"status","type":"string","description":"What the agent is doing right now, e.g. \"Reading files\"","required":true},{"name":"running","type":"boolean","default":"true","description":"Whether the activity is in flight: drives the shimmer and the live timer"},{"name":"variant","type":"\"inline\" | \"pill\"","default":"\"inline\"","description":"Bare text row, or a bordered chip with a leading pulse dot"},{"name":"since","type":"number","description":"Epoch ms the activity started; the internal stopwatch ticks from it"},{"name":"elapsedMs","type":"number","description":"Externally-driven elapsed time in ms; overrides the internal stopwatch"},{"name":"showElapsed","type":"boolean","default":"true","description":"Show the elapsed duration alongside the status"}],"snippets":[{"name":"done","description":"Rendered instead of the status label once running is false"}],"events":[],"examples":["Basic Usage"]},{"name":"ToolCall","slug":"tool-call","description":"One tool invocation in a disclosure card: status dot, tool name, duration, and the request and result payloads pretty-printed on expand","category":"ai-agents","group":"fancy","tags":["ai","agents","tool","disclosure"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["ToolCall"]},"react":{"package":"fancy-ui-react","names":["ToolCall"]},"vue":{"package":"fancy-ui-vue","names":["ToolCall"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/tool-call.md","react":"https://fancy-ui.rama.app/docs/components/react/tool-call.md","vue":"https://fancy-ui.rama.app/docs/components/vue/tool-call.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/tool-call.json","react":"https://fancy-ui.rama.app/r/tool-call.json","vue":"https://fancy-ui.rama.app/r/vue/tool-call.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/tool-call","props":[{"name":"call","type":"ToolCallData","description":"The invocation to render: id, name, status, and whatever payloads exist so far","required":true},{"name":"open","type":"boolean","description":"Expanded state (bindable). Left undefined the card stays collapsed, except that a call with status \"error\" opens itself — until the reader toggles it by hand"},{"name":"onToggle","type":"(open: boolean) => void","description":"Called on every open/close, by click or on the card's own initiative"},{"name":"sound","type":"boolean","default":"false","description":"Plays open or close when the reader toggles the payloads, once the user has enabled sound"}],"snippets":[{"name":"input","description":"Replaces the default request rendering; receives call.input"},{"name":"output","description":"Replaces the default result rendering; receives call.output"},{"name":"icon","description":"Leading icon, replacing the default wrench"}],"events":[],"examples":["Basic Usage"]},{"name":"ToolTimeline","slug":"tool-timeline","description":"Compact session summary of an agent's tool calls: one row per action on a vertical rail, with the target it touched, its diff stats, and when it ran","category":"ai-agents","group":"fancy","tags":["ai","agents","tool","timeline","activity"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["ToolTimeline"]},"react":{"package":"fancy-ui-react","names":["ToolTimeline"]},"vue":{"package":"fancy-ui-vue","names":["ToolTimeline"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/tool-timeline.md","react":"https://fancy-ui.rama.app/docs/components/react/tool-timeline.md","vue":"https://fancy-ui.rama.app/docs/components/vue/tool-timeline.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/tool-timeline.json","react":"https://fancy-ui.rama.app/r/tool-timeline.json","vue":"https://fancy-ui.rama.app/r/vue/tool-timeline.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/tool-timeline","props":[{"name":"items","type":"ToolTimelineItemData[]","description":"The agent's activity log, oldest first","required":true},{"name":"onSelect","type":"(item: ToolTimelineItemData, index: number) => void","description":"Called when a row is activated; supplying it turns every row into a button"},{"name":"compact","type":"boolean","default":"false","description":"Tighter rows with the detail line dropped"},{"name":"label","type":"string","default":"\"Activity\"","description":"Accessible name for the list"},{"name":"sound","type":"boolean","default":"false","description":"Plays select when a timeline entry is activated, once the user has enabled sound"}],"snippets":[{"name":"item","description":"Replaces the built-in row body, keeping the rail and its dot"}],"events":[],"examples":["Basic Usage"]},{"name":"Button","slug":"button","description":"The foundational push-button: six variants, three sizes, a loading state, and a polymorphic href/anchor mode","category":"actions","group":"core","tags":["button","cta","actions","form","link","loading","icon"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Button"]},"react":{"package":"fancy-ui-react","names":["Button"]},"vue":{"package":"fancy-ui-vue","names":["Button"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/button.md","react":"https://fancy-ui.rama.app/docs/components/react/button.md","vue":"https://fancy-ui.rama.app/docs/components/vue/button.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/button.json","react":"https://fancy-ui.rama.app/r/button.json","vue":"https://fancy-ui.rama.app/r/vue/button.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/button","props":[{"name":"variant","type":"\"primary\" | \"secondary\" | \"outline\" | \"ghost\" | \"accent\" | \"destructive\"","default":"\"primary\"","description":"Visual treatment"},{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","default":"\"md\"","description":"Padding / font-size / radius scale"},{"name":"type","type":"\"button\" | \"submit\" | \"reset\"","default":"\"button\"","description":"Native type; ignored once href renders an anchor instead"},{"name":"disabled","type":"boolean","default":"false","description":"Greys the button out and blocks activation"},{"name":"loading","type":"boolean","default":"false","description":"Spinner in place of iconStart, aria-busy, inert to activation on both the button and anchor branch — does not dim the button"},{"name":"href","type":"string","description":"Renders an <a> instead of a <button> when set"},{"name":"target","type":"string","description":"Anchor target. \"_blank\" forces a safe rel"},{"name":"rel","type":"string","description":"Anchor rel, widened rather than replaced when target=\"_blank\""},{"name":"fullWidth","type":"boolean","default":"false","description":"Stretches the button to its container's width"},{"name":"label","type":"string","description":"Accessible name for a button whose content is icon-only"},{"name":"onclick","type":"(event: MouseEvent) => void","description":"Fires on activation; never called while disabled or loading"},{"name":"class","type":"string","description":"Additional CSS classes"},{"name":"ref","type":"HTMLButtonElement | HTMLAnchorElement | null","default":"null","description":"Bindable element reference"},{"name":"sound","type":"boolean","default":"false","description":"Plays the press cue on activation, once the user has enabled sound"}],"snippets":[{"name":"children","description":"The button's label / content"},{"name":"iconStart","description":"Rendered before the label; replaced by the spinner while loading"},{"name":"iconEnd","description":"Rendered after the label"}],"events":[],"examples":["Basic Usage","Variants","Sizes","Loading State","With Icons","As Link","Disabled State","Interactive Playground"]},{"name":"ButtonGroup","slug":"button-group","description":"Joins a row of adjacent actions into one seamless control — one border, one divider, no doubled edges","category":"actions","group":"core","tags":["button","group","segmented","split button","toolbar","actions"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["ButtonGroup"]},"react":{"package":"fancy-ui-react","names":["ButtonGroup"]},"vue":{"package":"fancy-ui-vue","names":["ButtonGroup"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/button-group.md","react":"https://fancy-ui.rama.app/docs/components/react/button-group.md","vue":"https://fancy-ui.rama.app/docs/components/vue/button-group.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/button-group.json","react":"https://fancy-ui.rama.app/r/button-group.json","vue":"https://fancy-ui.rama.app/r/vue/button-group.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/button-group","props":[{"name":"orientation","type":"\"horizontal\" | \"vertical\"","default":"\"horizontal\"","description":"Stacking axis for the joined items"},{"name":"label","type":"string","description":"Accessible name for the group, exposed as aria-label"},{"name":"class","type":"string","description":"Additional CSS classes"},{"name":"ref","type":"HTMLDivElement | null","default":"null","description":"Bindable reference to the root <div>"}],"snippets":[{"name":"children","description":"The adjacent actions to join"}],"events":[],"examples":["Basic Usage","Segmented Control","Split Button","Vertical"]},{"name":"CopyButton","slug":"copy-button","description":"Button preset wired to the clipboard, morphing its icon and label to a success or failure state for a moment after each copy attempt","category":"actions","group":"core","tags":["copy","clipboard","button","success"],"dependencies":["button","status-morph"],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["CopyButton"]},"react":{"package":"fancy-ui-react","names":["CopyButton"]},"vue":{"package":"fancy-ui-vue","names":["CopyButton"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/copy-button.md","react":"https://fancy-ui.rama.app/docs/components/react/copy-button.md","vue":"https://fancy-ui.rama.app/docs/components/vue/copy-button.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/copy-button.json","react":"https://fancy-ui.rama.app/r/copy-button.json","vue":"https://fancy-ui.rama.app/r/vue/copy-button.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/copy-button","props":[{"name":"value","type":"string","description":"The text written to the clipboard on activation","required":true},{"name":"label","type":"string","default":"\"Copy\"","description":"Idle label"},{"name":"copiedLabel","type":"string","default":"\"Copied\"","description":"Label shown for resetMs after a successful copy"},{"name":"errorLabel","type":"string","default":"\"Copy failed\"","description":"Label and announcement shown after a failed copy"},{"name":"resetMs","type":"number","default":"2000","description":"How long the copied state holds before reverting, in milliseconds"},{"name":"variant","type":"ButtonVariant","default":"\"outline\"","description":"Passed straight through to the underlying Button"},{"name":"size","type":"ButtonSize","default":"\"md\"","description":"Passed straight through to the underlying Button"},{"name":"disabled","type":"boolean","default":"false","description":"Disables the button and blocks the copy"},{"name":"iconOnly","type":"boolean","default":"false","description":"Drops the visible label, moving it to aria-label instead"},{"name":"onCopy","type":"(value: string, ok: boolean) => void","description":"Called with the value and whether the write actually succeeded"},{"name":"onclick","type":"(event: MouseEvent) => void","description":"Click handler, called right after the copy starts; never called while disabled"},{"name":"class","type":"string","description":"Additional CSS classes"},{"name":"ref","type":"HTMLButtonElement | HTMLAnchorElement | null","default":"null","description":"Bindable element reference, matching Button's own ref type"},{"name":"sound","type":"boolean","default":"false","description":"Plays the copy cue on a successful copy and error on a failed one, once the user has enabled sound"}],"snippets":[{"name":"children","description":"Overrides the default icon + label content"}],"events":[],"examples":["Basic Usage","Icon Only","Custom Labels","Variants","Interactive Playground"]},{"name":"FollowButton","slug":"follow-button","description":"A follow toggle that shows the result at once, then commits when the server agrees or rolls back and says so, with the width held steady across every label","category":"actions","group":"core","tags":["follow","subscribe","toggle","async","optimistic","button"],"dependencies":["button","status-morph"],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["FollowButton"]},"react":{"package":"fancy-ui-react","names":["FollowButton"]},"vue":{"package":"fancy-ui-vue","names":["FollowButton"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/follow-button.md","react":"https://fancy-ui.rama.app/docs/components/react/follow-button.md","vue":"https://fancy-ui.rama.app/docs/components/vue/follow-button.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/follow-button.json","react":"https://fancy-ui.rama.app/r/follow-button.json","vue":"https://fancy-ui.rama.app/r/vue/follow-button.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/follow-button","props":[{"name":"following","type":"boolean","default":"false","description":"Whether the viewer follows (bindable). The committed value is written back when onToggle resolves, never before; a write from the parent while an attempt is pending wins and drops that attempt"},{"name":"onToggle","type":"(next: boolean) => void | Promise<unknown>","description":"Called with the value the click asks for. Return nothing to commit at once, or a promise: resolve commits, reject (or throw) rolls back, shows the error and announces it. Clicking again retries"},{"name":"onFollowingChange","type":"(following: boolean) => void","description":"Called with the committed value, once per successful attempt; not called for a rolled-back or superseded one"},{"name":"label","type":"string","description":"Stable accessible name, e.g. \"Follow Rama\"; it never changes with the visible text. Defaults to the idle label"},{"name":"labels","type":"{ follow?: string; following?: string; unfollow?: string }","default":"{ follow: \"Follow\", following: \"Following\", unfollow: \"Unfollow\" }","description":"Visible text per state. The unfollow text is previewed on hover or keyboard focus of a fine pointer, never on touch"},{"name":"errorLabel","type":"string","default":"\"Try again\"","description":"Visible text and assertive announcement after a failed attempt"},{"name":"resetMs","type":"number","default":"2000","description":"How long the error state holds before reverting, in milliseconds"},{"name":"variant","type":"ButtonVariant","description":"Button variant. Left unset, the idle state is \"primary\" and the following state \"outline\""},{"name":"size","type":"ButtonSize","default":"\"md\"","description":"Passed straight through to the underlying Button"},{"name":"disabled","type":"boolean","default":"false","description":"Disables the button and blocks the toggle"},{"name":"iconOnly","type":"boolean","default":"false","description":"Drops the visible text, keeping the accessible name"},{"name":"onclick","type":"(event: MouseEvent) => void","description":"Click handler, called right after the toggle starts; never called while disabled or pending"},{"name":"class","type":"string","description":"Additional CSS classes"},{"name":"ref","type":"HTMLButtonElement | HTMLAnchorElement | null","default":"null","description":"Bindable element reference, matching Button's own ref type"},{"name":"sound","type":"boolean","default":"false","description":"Plays toggle-on or toggle-off on a committed change and error on a failed one, with the error vibration, once the user has enabled sound"}],"snippets":[],"events":[],"examples":["Basic Usage","Async Server"]},{"name":"IconButton","slug":"icon-button","description":"Square or circular icon-only button built on Button, with a required accessible label","category":"actions","group":"core","tags":["button","icon","action","accessibility"],"dependencies":["button"],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["IconButton"]},"react":{"package":"fancy-ui-react","names":["IconButton"]},"vue":{"package":"fancy-ui-vue","names":["IconButton"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/icon-button.md","react":"https://fancy-ui.rama.app/docs/components/react/icon-button.md","vue":"https://fancy-ui.rama.app/docs/components/vue/icon-button.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/icon-button.json","react":"https://fancy-ui.rama.app/r/icon-button.json","vue":"https://fancy-ui.rama.app/r/vue/icon-button.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/icon-button","props":[{"name":"label","type":"string","description":"Accessible name. Required — there is no visible text to fall back on","required":true},{"name":"variant","type":"\"primary\" | \"secondary\" | \"outline\" | \"ghost\" | \"accent\" | \"destructive\"","default":"\"outline\"","description":"Visual treatment, forwarded to the underlying Button"},{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","default":"\"md\"","description":"Square footprint (30 / 36 / 42px) and resting radius"},{"name":"shape","type":"\"square\" | \"circle\"","default":"\"square\"","description":"Square keeps the size's own radius; circle rounds it fully"},{"name":"type","type":"\"button\" | \"submit\" | \"reset\"","default":"\"button\"","description":"Native type; ignored once href renders an anchor instead"},{"name":"disabled","type":"boolean","default":"false","description":"Greys the control out and blocks activation"},{"name":"loading","type":"boolean","default":"false","description":"Spinner in place of the icon, aria-busy, blocks activation"},{"name":"href","type":"string","description":"Renders an <a> instead of a <button> when set"},{"name":"target","type":"string","description":"Anchor target. \"_blank\" forces a safe rel"},{"name":"rel","type":"string","description":"Anchor rel, widened rather than replaced when target=\"_blank\""},{"name":"onclick","type":"(event: MouseEvent) => void","description":"Fires on activation; never called while disabled or loading"},{"name":"class","type":"string","description":"Additional CSS classes"},{"name":"ref","type":"HTMLButtonElement | HTMLAnchorElement | null","default":"null","description":"Bindable element reference"},{"name":"sound","type":"boolean","default":"false","description":"Plays the press cue on activation, once the user has enabled sound"}],"snippets":[{"name":"children","description":"The icon, rendered centred"}],"events":[],"examples":["Basic Usage","Variants","Sizes","Shapes"]},{"name":"Link","slug":"link","description":"Inline text link with a muted variant, configurable underline, and a safe external-link mode with a new-tab arrow","category":"actions","group":"core","tags":["link","anchor","external","underline","typography"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Link"]},"react":{"package":"fancy-ui-react","names":["Link"]},"vue":{"package":"fancy-ui-vue","names":["Link"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/link.md","react":"https://fancy-ui.rama.app/docs/components/react/link.md","vue":"https://fancy-ui.rama.app/docs/components/vue/link.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/link.json","react":"https://fancy-ui.rama.app/r/link.json","vue":"https://fancy-ui.rama.app/r/vue/link.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/link","props":[{"name":"href","type":"string","description":"Destination URL","required":true},{"name":"variant","type":"\"default\" | \"muted\"","default":"\"default\"","description":"default reads as inline copy; muted recedes into supporting text at a smaller size"},{"name":"external","type":"boolean","default":"false","description":"Appends an arrow glyph, defaults target to _blank, and guarantees a safe rel"},{"name":"underline","type":"\"hover\" | \"always\" | \"none\"","default":"\"hover\"","description":"When the underline shows"},{"name":"target","type":"string","description":"Anchor target; external fills this in as _blank when left unset"},{"name":"rel","type":"string","description":"Anchor rel; merged with noopener noreferrer whenever the link opens a new tab"},{"name":"onclick","type":"(event: MouseEvent) => void","description":"Native click handler"},{"name":"class","type":"string","description":"Additional CSS classes"},{"name":"ref","type":"HTMLAnchorElement | null","default":"null","description":"Bindable element reference"},{"name":"sound","type":"boolean","default":"false","description":"Plays the press cue on activation, once the user has enabled sound"}],"snippets":[{"name":"children","description":"The link's text or content"}],"events":[],"examples":["Basic Usage","Variants","External Link","Underline Modes"]},{"name":"SoundToggle","slug":"sound","description":"Opt-in interface sound: a `sound` controller that synthesises eleven short cues (hover, press, toggle-on, toggle-off, open, close, select, success, error, tick, copy) with the Web Audio API, a SoundToggle switch that keeps the preference and volume, and a soundFeedback action that wires cues to any element — silent until the user switches it on, nothing on import, mount, navigation or scroll","category":"actions","group":"core","tags":["sound","audio","feedback","web-audio","cues","toggle","accessibility","opt-in"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["SoundToggle"]},"react":{"package":"fancy-ui-react","names":["SoundToggle"]},"vue":{"package":"fancy-ui-vue","names":["SoundToggle"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/sound.md","react":"https://fancy-ui.rama.app/docs/components/react/sound.md","vue":"https://fancy-ui.rama.app/docs/components/vue/sound.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/sound.json","react":"https://fancy-ui.rama.app/r/sound.json","vue":"https://fancy-ui.rama.app/r/vue/sound.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/sound","props":[{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","default":"\"md\"","description":"Height of the control — md matches the other header-style triggers"},{"name":"variant","type":"\"outline\" | \"ghost\"","default":"\"outline\"","description":"Outline keeps a resting border; ghost shows one only on hover"},{"name":"showLabel","type":"boolean","default":"false","description":"Renders the label and the On/Off word beside the icon; icon-only otherwise, with the label as the accessible name"},{"name":"label","type":"string","default":"\"Sound\"","description":"Accessible name of the switch. Stays constant — the on/off state is announced through aria-checked"},{"name":"labelOn","type":"string","default":"\"On\"","description":"Visible state word when showLabel is set"},{"name":"labelOff","type":"string","default":"\"Off\"","description":"Visible state word when showLabel is set"},{"name":"disabled","type":"boolean","default":"false","description":"Disables the control. A browser with no Web Audio also disables it, but only while sound is off, so a stored on preference can always be undone"},{"name":"onEnabledChange","type":"(enabled: boolean) => void","description":"Called after the preference flips, with the new value"},{"name":"class","type":"string","description":"Additional CSS classes for the button"},{"name":"ref","type":"HTMLButtonElement | null","default":"null","description":"Bindable reference to the button"},{"name":"sound.play(cue, options?)","type":"(cue: SoundCue, options?: SoundPlayOptions) => void","description":"Plays one cue. A no-op while sound is off or unsupported, so call sites never branch; options carry volume, pitch and playbackRate"},{"name":"sound.enable() / disable() / toggle()","type":"() => void | boolean","description":"Flip the preference. Enabling creates and resumes the audio context inside the calling user gesture"},{"name":"sound.setVolume(v)","type":"(v: number) => void","description":"Master volume, 0 to 1, persisted with the preference"},{"name":"sound.enabled / volume / status","type":"boolean / number / SoundStatus","description":"Reactive preference and engine state (supported, engine, storage, lastCue, lastError) for your own UI"},{"name":"sound.subscribe(run)","type":"(run: (prefs: SoundPreferences) => void) => () => void","description":"Store contract for non-rune consumers; sound.enabled is the idiomatic path"},{"name":"use:soundFeedback","type":"SoundFeedbackOptions","description":"Action mapping element events to cues — defaults to click → press; add pointerenter → hover to opt in. Rebinds on update and unwires on destroy"},{"name":"sound (on Button, CopyButton, Checkbox, Switch, RadioGroup, Select, DropdownMenu)","type":"boolean","default":"false","description":"Per-instance opt-in: the component plays its own matching cue (press, copy/error, toggle-on/off, select, open/close) once the user has enabled sound"}],"snippets":[],"events":[],"examples":["Sound Lab","Programmatic Play","The soundFeedback Action","With Buttons","With Form Controls","With Menus","With Slider","With Overlays","With Composer","With Agent Cards"]},{"name":"Toggle","slug":"toggle","description":"Two-state button carrying aria-pressed, for a single on/off option like a formatting mark or a filter","category":"actions","group":"core","tags":["toggle","button","pressed","formatting","switch"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Toggle"]},"react":{"package":"fancy-ui-react","names":["Toggle"]},"vue":{"package":"fancy-ui-vue","names":["Toggle"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/toggle.md","react":"https://fancy-ui.rama.app/docs/components/react/toggle.md","vue":"https://fancy-ui.rama.app/docs/components/vue/toggle.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/toggle.json","react":"https://fancy-ui.rama.app/r/toggle.json","vue":"https://fancy-ui.rama.app/r/vue/toggle.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/toggle","props":[{"name":"pressed","type":"boolean","default":"false","description":"Whether the toggle is currently pressed (active); bindable"},{"name":"onPressedChange","type":"(pressed: boolean) => void","description":"Called with the new pressed state whenever the toggle is activated"},{"name":"disabled","type":"boolean","default":"false","description":"Disables the toggle; blocks both the state change and the callback"},{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","default":"\"md\"","description":"Visual size of the control"},{"name":"variant","type":"\"ghost\" | \"outline\"","default":"\"ghost\"","description":"\"ghost\" has no resting border, \"outline\" keeps one at rest"},{"name":"label","type":"string","description":"Accessible name — required when children is icon-only"},{"name":"class","type":"string","description":"Additional CSS classes"},{"name":"ref","type":"HTMLButtonElement | null","default":"null","description":"Bindable element reference"},{"name":"sound","type":"boolean","default":"false","description":"Plays toggle-on or toggle-off on activation, once the user has enabled sound"}],"snippets":[{"name":"children","description":"Toggle content, typically a single glyph or a short label"}],"events":[],"examples":["Basic Usage","Sizes","Variants","Text Formatting"]},{"name":"ToggleGroup","slug":"toggle-group","description":"A segmented row of toggle buttons with roving-tabindex keyboard navigation and single or multiple selection.","category":"actions","group":"core","tags":["toggle","segmented-control","roving-tabindex","compound","selection","toolbar"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["ToggleGroup"]},"react":{"package":"fancy-ui-react","names":["ToggleGroup"]},"vue":{"package":"fancy-ui-vue","names":["ToggleGroup"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/toggle-group.md","react":"https://fancy-ui.rama.app/docs/components/react/toggle-group.md","vue":"https://fancy-ui.rama.app/docs/components/vue/toggle-group.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/toggle-group.json","react":"https://fancy-ui.rama.app/r/toggle-group.json","vue":"https://fancy-ui.rama.app/r/vue/toggle-group.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/toggle-group","props":[{"name":"type","type":"\"single\" | \"multiple\"","default":"\"single\"","description":"Whether one item can be active at a time, or several."},{"name":"value","type":"string | string[]","default":"\"\"","description":"The active value(s), bindable — a string when type=\"single\", an array of strings when type=\"multiple\"."},{"name":"onValueChange","type":"(value: string | string[]) => void","description":"Called with the new value, shaped to match `type`, whenever the selection changes."},{"name":"disabled","type":"boolean","default":"false","description":"Disables every item in the group."},{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","default":"\"md\"","description":"Sizes every item."},{"name":"orientation","type":"\"horizontal\" | \"vertical\"","default":"\"horizontal\"","description":"The rail's stacking axis; both arrow-key pairs work either way."},{"name":"label","type":"string","description":"Accessible name for the group."},{"name":"class","type":"string","description":"Additional CSS classes, merged onto the root."},{"name":"ref","type":"HTMLDivElement | null","default":"null","description":"Bindable reference to the root element."},{"name":"sound","type":"boolean","default":"false","description":"Plays toggle-on/toggle-off on a multi-select item or select on a single-select change, once the user has enabled sound"},{"name":"ToggleGroupItem.value","type":"string","required":true,"description":"The item's value — what gets added to or removed from the group's selection."},{"name":"ToggleGroupItem.disabled","type":"boolean","default":"false","description":"Disables just this item, independent of the group's own `disabled`."},{"name":"ToggleGroupItem.label","type":"string","description":"Accessible name for icon-only content on this item. Also the text fallback."},{"name":"ToggleGroupItem.class","type":"string","description":"Additional CSS classes, merged onto the item's button."},{"name":"ToggleGroupItem.ref","type":"HTMLButtonElement | null","default":"null","description":"Bindable reference to the item's button element."}],"snippets":[{"name":"children","description":"The ToggleGroup's content — the ToggleGroupItems."},{"name":"ToggleGroupItem.children","description":"The item's content, typically a glyph or a short label."}],"events":[],"examples":["Basic Usage","Single Selection","Multiple Selection","Vertical","Disabled Items"]},{"name":"Autocomplete","slug":"autocomplete","description":"A free-text field with a portalled panel of matching suggestions — any typed value is valid; the panel only ever helps finish it faster.","category":"forms","group":"core","tags":["autocomplete","suggestions","typeahead","listbox","form","compound","accessibility"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Autocomplete"]},"react":{"package":"fancy-ui-react","names":["Autocomplete"]},"vue":{"package":"fancy-ui-vue","names":["Autocomplete"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/autocomplete.md","react":"https://fancy-ui.rama.app/docs/components/react/autocomplete.md","vue":"https://fancy-ui.rama.app/docs/components/vue/autocomplete.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/autocomplete.json","react":"https://fancy-ui.rama.app/r/autocomplete.json","vue":"https://fancy-ui.rama.app/r/vue/autocomplete.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/autocomplete","props":[{"name":"suggestions","type":"string[]","required":true,"description":"Candidate strings offered as the user types."},{"name":"value","type":"string","default":"\"\"","description":"The free-text value, bindable."},{"name":"onValueChange","type":"(value: string) => void","description":"Called with the new value on every keystroke."},{"name":"onSelect","type":"(suggestion: string) => void","description":"Called only when a suggestion is committed via click or Enter — never from plain typing."},{"name":"placeholder","type":"string","description":"Shown while the field is empty."},{"name":"disabled","type":"boolean","default":"false","description":"Blocks focus and typing; excluded from form submission."},{"name":"required","type":"boolean","default":"false","description":"Native required."},{"name":"invalid","type":"boolean","default":"false","description":"Drives the error border and aria-invalid."},{"name":"id","type":"string","description":"Element id."},{"name":"name","type":"string","description":"Native name, read on form submission."},{"name":"label","type":"string","description":"Accessible name — for a control with no visible Label next to it."},{"name":"minLength","type":"number","default":"1","description":"Characters required before suggestions appear."},{"name":"maxSuggestions","type":"number","default":"8","description":"Maximum number of suggestions shown at once."},{"name":"class","type":"string","description":"Additional CSS classes."},{"name":"ref","type":"HTMLInputElement | null","default":"null","description":"Bindable reference to the input element."},{"name":"sound","type":"boolean","default":"false","description":"Plays the select cue when a suggestion is committed, once the user has enabled sound"}],"snippets":[],"events":[],"examples":["Basic Usage","Min Length","With FormField"]},{"name":"Checkbox","slug":"checkbox","description":"A tri-look checkbox — unchecked, checked, indeterminate and disabled — built on a native checkbox input","category":"forms","group":"core","tags":["checkbox","form","indeterminate","validation"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Checkbox"]},"react":{"package":"fancy-ui-react","names":["Checkbox"]},"vue":{"package":"fancy-ui-vue","names":["Checkbox"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/checkbox.md","react":"https://fancy-ui.rama.app/docs/components/react/checkbox.md","vue":"https://fancy-ui.rama.app/docs/components/vue/checkbox.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/checkbox.json","react":"https://fancy-ui.rama.app/r/checkbox.json","vue":"https://fancy-ui.rama.app/r/vue/checkbox.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/checkbox","props":[{"name":"checked","type":"boolean","default":"false","description":"Whether the box is checked; bindable"},{"name":"indeterminate","type":"boolean","default":"false","description":"Mixed/dash visual state; bindable"},{"name":"onCheckedChange","type":"(checked: boolean) => void","description":"Called with the new checked value whenever the box is activated"},{"name":"disabled","type":"boolean","default":"false","description":"Blocks interaction; excluded from form submission"},{"name":"required","type":"boolean","default":"false","description":"Native required"},{"name":"invalid","type":"boolean","default":"false","description":"Drives the error border and aria-invalid"},{"name":"id","type":"string","description":"Element id"},{"name":"name","type":"string","description":"Native name, read on form submission"},{"name":"value","type":"string","description":"Form value submitted while checked"},{"name":"label","type":"string","description":"Accessible name, rendered as aria-label; skip it when children already supplies the visible label text"},{"name":"class","type":"string","description":"Additional CSS classes, merged onto the wrapping label"},{"name":"ref","type":"HTMLInputElement | null","default":"null","description":"Bindable element reference to the native input"},{"name":"sound","type":"boolean","default":"false","description":"Plays toggle-on or toggle-off on each change, once the user has enabled sound"}],"snippets":[{"name":"children","description":"Visible label text, rendered beside the box"}],"events":[],"examples":["Basic Usage","States","Indeterminate","With FormField"]},{"name":"Combobox","slug":"combobox","description":"A single-choice text field over a closed set of options — typing filters a portalled listbox, and a value outside the list can never be selected.","category":"forms","group":"core","tags":["combobox","dropdown","listbox","filter","form","compound","accessibility"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Combobox"]},"react":{"package":"fancy-ui-react","names":["Combobox"]},"vue":{"package":"fancy-ui-vue","names":["Combobox"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/combobox.md","react":"https://fancy-ui.rama.app/docs/components/react/combobox.md","vue":"https://fancy-ui.rama.app/docs/components/vue/combobox.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/combobox.json","react":"https://fancy-ui.rama.app/r/combobox.json","vue":"https://fancy-ui.rama.app/r/vue/combobox.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/combobox","props":[{"name":"options","type":"ComboboxOption[]","required":true,"description":"The closed set of selectable options."},{"name":"value","type":"string","default":"\"\"","description":"The selected option's value, bindable — \"\" means nothing is selected."},{"name":"onValueChange","type":"(value: string) => void","description":"Called whenever the selection commits."},{"name":"placeholder","type":"string","description":"Shown while the field is empty and nothing is selected."},{"name":"disabled","type":"boolean","default":"false","description":"Blocks focus and typing; excluded from form submission."},{"name":"required","type":"boolean","default":"false","description":"Native required, on the visible field."},{"name":"invalid","type":"boolean","default":"false","description":"Drives the error border and aria-invalid."},{"name":"id","type":"string","description":"Element id."},{"name":"name","type":"string","description":"Native name — submitted via a hidden input carrying value, not the visible label."},{"name":"label","type":"string","description":"Accessible name — for a control with no visible Label next to it."},{"name":"filter","type":"(option: ComboboxOption, query: string) => boolean","description":"Matches an option against the current query. Default: case-insensitive substring on label."},{"name":"emptyMessage","type":"string","default":"\"No results\"","description":"Shown in the panel when no option matches the current query."},{"name":"class","type":"string","description":"Additional CSS classes."},{"name":"ref","type":"HTMLInputElement | null","default":"null","description":"Bindable reference to the input element."},{"name":"sound","type":"boolean","default":"false","description":"Plays the select cue when an option is committed, once the user has enabled sound"}],"snippets":[],"events":[],"examples":["Basic Usage","Custom Filter","With FormField"]},{"name":"DatePicker","slug":"date-picker","description":"A field that opens a floating month grid, with full keyboard navigation (arrow keys across days, Page Up/Down across months, Shift for years), min/max and per-day disabling, and a fully localized accessible name on every day cell.","category":"forms","group":"core","tags":["date-picker","calendar","grid","form","date","accessibility"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["DatePicker"]},"react":{"package":"fancy-ui-react","names":["DatePicker"]},"vue":{"package":"fancy-ui-vue","names":["DatePicker"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/date-picker.md","react":"https://fancy-ui.rama.app/docs/components/react/date-picker.md","vue":"https://fancy-ui.rama.app/docs/components/vue/date-picker.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/date-picker.json","react":"https://fancy-ui.rama.app/r/date-picker.json","vue":"https://fancy-ui.rama.app/r/vue/date-picker.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/date-picker","props":[{"name":"value","type":"Date | null","default":"null","description":"The selected date; bindable. Always a local-midnight Date — see the README's time-zone note."},{"name":"onValueChange","type":"(value: Date | null) => void","description":"Called with the new value whenever a day is picked."},{"name":"min","type":"Date","description":"Earliest selectable day (inclusive), compared at day granularity."},{"name":"max","type":"Date","description":"Latest selectable day (inclusive), compared at day granularity."},{"name":"weekStartsOn","type":"0 | 1","default":"1","description":"0 for Sunday, 1 for Monday."},{"name":"disabled","type":"boolean","default":"false","description":"Blocks opening the panel; excludes the control from form submission."},{"name":"required","type":"boolean","default":"false","description":"Marks the field required for the surrounding form."},{"name":"invalid","type":"boolean","default":"false","description":"Drives the error border and aria-invalid."},{"name":"id","type":"string","description":"Element id."},{"name":"name","type":"string","description":"Native name. When set, a hidden input carries the value as YYYY-MM-DD."},{"name":"label","type":"string","description":"Accessible name — for a control with no visible Label next to it."},{"name":"placeholder","type":"string","default":"\"Pick a date\"","description":"Shown in the trigger while no day is selected."},{"name":"locale","type":"string","description":"BCP 47 locale for month, weekday, day and trigger-label formatting."},{"name":"isDateDisabled","type":"(date: Date) => boolean","description":"Rejects individual days beyond min/max — e.g. weekends, holidays."},{"name":"class","type":"string","description":"Additional CSS classes, merged onto the trigger button."},{"name":"ref","type":"HTMLButtonElement | null","default":"null","description":"Bindable reference to the trigger button."},{"name":"sound","type":"boolean","default":"false","description":"Plays open on opening, select on a picked day and close on a dismissal, once the user has enabled sound"}],"snippets":[],"events":[],"examples":["Basic Usage","With Bounds","Disabled Dates","With FormField"]},{"name":"FileUpload","slug":"file-upload","description":"A drop zone backed by a native file input, with per-file progress, JS-side validation and a removable file list","category":"forms","group":"core","tags":["file-upload","upload","drag-and-drop","form","validation","progress"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["FileUpload"]},"react":{"package":"fancy-ui-react","names":["FileUpload"]},"vue":{"package":"fancy-ui-vue","names":["FileUpload"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/file-upload.md","react":"https://fancy-ui.rama.app/docs/components/react/file-upload.md","vue":"https://fancy-ui.rama.app/docs/components/vue/file-upload.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/file-upload.json","react":"https://fancy-ui.rama.app/r/file-upload.json","vue":"https://fancy-ui.rama.app/r/vue/file-upload.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/file-upload","props":[{"name":"files","type":"UploadFile[]","default":"[]","description":"Selected files; bindable"},{"name":"onFilesChange","type":"(files: UploadFile[]) => void","description":"Called with the new list on every change — a selection, a drop, or a removal"},{"name":"accept","type":"string","description":"The input's native accept attribute; also enforced in JS since a dropped file bypasses it"},{"name":"multiple","type":"boolean","default":"false","description":"Allows more than one file per selection or drop"},{"name":"maxSize","type":"number","description":"Maximum size per file, in bytes. A larger file is added with status \"error\""},{"name":"maxFiles","type":"number","description":"Maximum number of files the list may hold. Extra files are rejected, not added"},{"name":"disabled","type":"boolean","default":"false","description":"Blocks selecting, dropping and removing files"},{"name":"required","type":"boolean","default":"false","description":"Native required on the underlying input"},{"name":"invalid","type":"boolean","default":"false","description":"Drives the error border and aria-invalid"},{"name":"id","type":"string","description":"Element id, applied to the underlying file input"},{"name":"name","type":"string","description":"Native name on the underlying input"},{"name":"label","type":"string","description":"Accessible name — for a control with no visible Label next to it"},{"name":"hint","type":"string","description":"Constraint text under the drop zone, e.g. \"PNG, SVG — 4 MB max\""},{"name":"class","type":"string","description":"Additional CSS classes"},{"name":"ref","type":"HTMLInputElement | null","default":"null","description":"Bindable reference to the underlying file input"},{"name":"sound","type":"boolean","default":"false","description":"Plays select on an accepted selection or drop and error on a rejection, once the user has enabled sound"}],"snippets":[],"events":[],"examples":["Basic Usage","Multiple, With Progress","Constraints","With FormField"]},{"name":"FormField","slug":"form-field","description":"Wraps a control with a label, help/error text and id wiring, so a screen reader gets the full picture without manual aria plumbing","category":"forms","group":"core","tags":["form","field","label","validation","accessibility","compound"],"dependencies":["label"],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["FormField"]},"react":{"package":"fancy-ui-react","names":["FormField"]},"vue":{"package":"fancy-ui-vue","names":["FormField"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/form-field.md","react":"https://fancy-ui.rama.app/docs/components/react/form-field.md","vue":"https://fancy-ui.rama.app/docs/components/vue/form-field.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/form-field.json","react":"https://fancy-ui.rama.app/r/form-field.json","vue":"https://fancy-ui.rama.app/r/vue/form-field.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/form-field","props":[{"name":"label","type":"string","description":"Label text — the common case. For custom label markup, render a Label in children instead"},{"name":"description","type":"string","description":"Help text under the control, replaced by error while the field is invalid"},{"name":"error","type":"string","description":"Error text. Setting it marks the field invalid and replaces the help text"},{"name":"valid","type":"boolean","default":"false","description":"Decorative checkmark next to the help text; error always wins if both are set"},{"name":"required","type":"boolean","default":"false","description":"Marks the field required: the label gets an asterisk, the control gets aria-required"},{"name":"disabled","type":"boolean","default":"false","description":"Disables the field: reaches the wrapped control through context"},{"name":"id","type":"string","description":"Opts out of the generated id. description/error ids are suffixes of this same value"},{"name":"class","type":"string","description":"Additional CSS classes, merged onto the root"},{"name":"ref","type":"HTMLDivElement | null","default":"null","description":"Bindable reference to the root element"}],"snippets":[{"name":"children","description":"The control"}],"events":[],"examples":["Basic Usage","With Error","Validated","Disabled"]},{"name":"Input","slug":"input","description":"A single-line text field with resting, focus, error and disabled looks, built on a native input","category":"forms","group":"core","tags":["input","text-field","form","validation"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Input"]},"react":{"package":"fancy-ui-react","names":["Input"]},"vue":{"package":"fancy-ui-vue","names":["Input"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/input.md","react":"https://fancy-ui.rama.app/docs/components/react/input.md","vue":"https://fancy-ui.rama.app/docs/components/vue/input.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/input.json","react":"https://fancy-ui.rama.app/r/input.json","vue":"https://fancy-ui.rama.app/r/vue/input.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/input","props":[{"name":"value","type":"string","default":"\"\"","description":"Current value; bindable"},{"name":"onValueChange","type":"(value: string) => void","description":"Called with the new value on every input event"},{"name":"type","type":"\"text\" | \"email\" | \"url\" | \"tel\" | \"password\" | \"search\" | \"number\"","default":"\"text\"","description":"Native input type"},{"name":"placeholder","type":"string","description":"Shown while the field is empty"},{"name":"disabled","type":"boolean","default":"false","description":"Blocks focus and typing; excluded from form submission"},{"name":"readonly","type":"boolean","default":"false","description":"Blocks typing but stays focusable and is still submitted, unlike disabled"},{"name":"required","type":"boolean","default":"false","description":"Native required"},{"name":"invalid","type":"boolean","default":"false","description":"Drives the error border and aria-invalid"},{"name":"id","type":"string","description":"Element id"},{"name":"name","type":"string","description":"Native name, read on form submission"},{"name":"autocomplete","type":"FullAutoFill","description":"Native autocomplete hint; the union from svelte/elements, not an arbitrary string"},{"name":"label","type":"string","description":"Accessible name — for a control with no visible Label next to it"},{"name":"class","type":"string","description":"Additional CSS classes"},{"name":"ref","type":"HTMLInputElement | null","default":"null","description":"Bindable element reference"}],"snippets":[],"events":[],"examples":["Basic Usage","States","Types","With FormField"]},{"name":"Label","slug":"label","description":"A form label with a decorative required asterisk, wired to a FormField's context when it has one","category":"forms","group":"core","tags":["label","form","accessibility"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Label"]},"react":{"package":"fancy-ui-react","names":["Label"]},"vue":{"package":"fancy-ui-vue","names":["Label"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/label.md","react":"https://fancy-ui.rama.app/docs/components/react/label.md","vue":"https://fancy-ui.rama.app/docs/components/vue/label.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/label.json","react":"https://fancy-ui.rama.app/r/label.json","vue":"https://fancy-ui.rama.app/r/vue/label.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/label","props":[{"name":"for","type":"string","description":"Explicit target id. Inside a FormField, the field's own control id wins"},{"name":"required","type":"boolean","default":"false","description":"Renders the required asterisk. Inside a FormField, the field's own `required` wins"},{"name":"class","type":"string","description":"Additional CSS classes"},{"name":"ref","type":"HTMLLabelElement | null","default":"null","description":"Bindable element reference"}],"snippets":[{"name":"children","description":"The label text/content"}],"events":[],"examples":["Basic Usage","Required","With FormField"]},{"name":"NumberInput","slug":"number-input","description":"Numeric field with decrement/increment buttons that clamp to min/max, disable themselves at the bounds, and step fractional values without float drift","category":"forms","group":"core","tags":["number","stepper","form","input","quantity"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["NumberInput"]},"react":{"package":"fancy-ui-react","names":["NumberInput"]},"vue":{"package":"fancy-ui-vue","names":["NumberInput"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/number-input.md","react":"https://fancy-ui.rama.app/docs/components/react/number-input.md","vue":"https://fancy-ui.rama.app/docs/components/vue/number-input.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/number-input.json","react":"https://fancy-ui.rama.app/r/number-input.json","vue":"https://fancy-ui.rama.app/r/vue/number-input.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/number-input","props":[{"name":"value","type":"number | null","default":"null","description":"Current value; bindable. null when the field is empty"},{"name":"onValueChange","type":"(value: number | null) => void","description":"Called with the new value on every change, including a clear to null"},{"name":"min","type":"number","description":"Lower bound. Leave unset for no lower bound"},{"name":"max","type":"number","description":"Upper bound. Leave unset for no upper bound"},{"name":"step","type":"number","default":"1","description":"Increment size, including fractional steps"},{"name":"disabled","type":"boolean","default":"false","description":"Blocks focus, typing and the step buttons; excluded from form submission. Overridden by a surrounding FormField"},{"name":"readonly","type":"boolean","default":"false","description":"Blocks typing and the step buttons but stays focusable and is still submitted, unlike disabled"},{"name":"required","type":"boolean","default":"false","description":"Native required. Overridden by a surrounding FormField"},{"name":"invalid","type":"boolean","default":"false","description":"Drives the error border and aria-invalid. Overridden by a surrounding FormField"},{"name":"id","type":"string","description":"Element id. Overridden by a surrounding FormField's own controlId"},{"name":"name","type":"string","description":"Native name, read on form submission"},{"name":"label","type":"string","description":"Accessible name — for a control with no visible Label next to it"},{"name":"class","type":"string","description":"Additional CSS classes, applied to the outer bordered wrapper"},{"name":"ref","type":"HTMLInputElement | null","default":"null","description":"Reference to the underlying input type=number"},{"name":"sound","type":"boolean","default":"false","description":"Plays the tick cue on each step, once the user has enabled sound"}],"snippets":[],"events":[],"examples":["Basic Usage","With Limits","Fractional Steps"]},{"name":"PasswordInput","slug":"password-input","description":"A password field with a show/hide reveal toggle and an optional strength meter that never relies on colour alone","category":"forms","group":"core","tags":["password","input","form","strength","reveal"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["PasswordInput"]},"react":{"package":"fancy-ui-react","names":["PasswordInput"]},"vue":{"package":"fancy-ui-vue","names":["PasswordInput"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/password-input.md","react":"https://fancy-ui.rama.app/docs/components/react/password-input.md","vue":"https://fancy-ui.rama.app/docs/components/vue/password-input.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/password-input.json","react":"https://fancy-ui.rama.app/r/password-input.json","vue":"https://fancy-ui.rama.app/r/vue/password-input.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/password-input","props":[{"name":"value","type":"string","default":"\"\"","description":"Current value; bindable"},{"name":"onValueChange","type":"(value: string) => void","description":"Called with the new value on every input event"},{"name":"placeholder","type":"string","description":"Shown while the field is empty"},{"name":"disabled","type":"boolean","default":"false","description":"Blocks focus and typing; excluded from form submission"},{"name":"readonly","type":"boolean","default":"false","description":"Blocks typing but stays focusable and is still submitted"},{"name":"required","type":"boolean","default":"false","description":"Native required"},{"name":"invalid","type":"boolean","default":"false","description":"Drives the error border and aria-invalid"},{"name":"id","type":"string","description":"Element id"},{"name":"name","type":"string","description":"Native name, read on form submission"},{"name":"label","type":"string","description":"Accessible name — for a control with no visible Label next to it"},{"name":"autocomplete","type":"\"current-password\" | \"new-password\" | \"off\"","default":"\"current-password\"","description":"new-password opts a password manager into offering to generate one"},{"name":"showToggle","type":"boolean","default":"true","description":"Renders the show/hide reveal button"},{"name":"showStrength","type":"boolean","default":"false","description":"Renders the strength meter and label once there's a value"},{"name":"strength","type":"(value: string) => { score: 0 | 1 | 2 | 3 | 4; label: string }","description":"Overrides the built-in heuristic scorer — see README before trusting the default"},{"name":"class","type":"string","description":"Additional CSS classes, merged onto the field surface"},{"name":"ref","type":"HTMLInputElement | null","default":"null","description":"Bindable element reference"},{"name":"sound","type":"boolean","default":"false","description":"Plays toggle-on/toggle-off when the password is revealed or hidden, once the user has enabled sound"}],"snippets":[],"events":[],"examples":["Basic Usage","With Strength Meter","New Password"]},{"name":"RadioGroup","slug":"radio-group","description":"A set of mutually exclusive options, built on real input type=radio elements sharing one name so the browser gives the roving tab stop and keyboard navigation for free.","category":"forms","group":"core","tags":["radio","form","selection","compound","validation"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["RadioGroup"]},"react":{"package":"fancy-ui-react","names":["RadioGroup"]},"vue":{"package":"fancy-ui-vue","names":["RadioGroup"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/radio-group.md","react":"https://fancy-ui.rama.app/docs/components/react/radio-group.md","vue":"https://fancy-ui.rama.app/docs/components/vue/radio-group.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/radio-group.json","react":"https://fancy-ui.rama.app/r/radio-group.json","vue":"https://fancy-ui.rama.app/r/vue/radio-group.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/radio-group","props":[{"name":"value","type":"string","default":"\"\"","description":"The selected value, bindable — \"\" means nothing is selected."},{"name":"onValueChange","type":"(value: string) => void","description":"Called with the new value whenever the selection changes."},{"name":"name","type":"string","description":"Shared name for the native radios. Generated per instance when omitted, so two groups on the same page never fight over each other's selection."},{"name":"disabled","type":"boolean","default":"false","description":"Disables every item in the group."},{"name":"required","type":"boolean","default":"false","description":"Marks the group required for native form validation."},{"name":"invalid","type":"boolean","default":"false","description":"Marks the group invalid — sets aria-invalid."},{"name":"orientation","type":"\"horizontal\" | \"vertical\"","default":"\"vertical\"","description":"The list's stacking axis."},{"name":"label","type":"string","description":"Accessible name, standalone. Inside a FormField that rendered its own label, its labelId wins instead; a FormField with no label of its own falls back to this."},{"name":"class","type":"string","description":"Additional CSS classes, merged onto the root."},{"name":"ref","type":"HTMLDivElement | null","default":"null","description":"Bindable reference to the root element."},{"name":"RadioGroupItem.value","type":"string","required":true,"description":"This item's value — what the group's value becomes when it is picked."},{"name":"RadioGroupItem.disabled","type":"boolean","default":"false","description":"Disables just this item, independent of the group's own disabled."},{"name":"RadioGroupItem.label","type":"string","description":"Visible label text. Also the fallback content, and the fallback name."},{"name":"RadioGroupItem.class","type":"string","description":"Additional CSS classes, merged onto the wrapping label."},{"name":"RadioGroupItem.ref","type":"HTMLInputElement | null","default":"null","description":"Bindable reference to the item's native input."},{"name":"sound","type":"boolean","default":"false","description":"Plays a select cue when the selection actually changes, once the user has enabled sound"}],"snippets":[{"name":"children","description":"The RadioGroup's content — the RadioGroupItems."},{"name":"RadioGroupItem.children","description":"Custom content rendered in place of the item's label."}],"events":[],"examples":["Basic Usage","Horizontal","Disabled Items","With FormField"]},{"name":"SearchInput","slug":"search-input","description":"A pill-shaped search field with a leading icon, a clear button once there's something to clear, and optional debounced search","category":"forms","group":"core","tags":["search","input","form","debounce","filter"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["SearchInput"]},"react":{"package":"fancy-ui-react","names":["SearchInput"]},"vue":{"package":"fancy-ui-vue","names":["SearchInput"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/search-input.md","react":"https://fancy-ui.rama.app/docs/components/react/search-input.md","vue":"https://fancy-ui.rama.app/docs/components/vue/search-input.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/search-input.json","react":"https://fancy-ui.rama.app/r/search-input.json","vue":"https://fancy-ui.rama.app/r/vue/search-input.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/search-input","props":[{"name":"value","type":"string","default":"\"\"","description":"Current value; bindable"},{"name":"onValueChange","type":"(value: string) => void","description":"Called with the new value on every input event"},{"name":"onSearch","type":"(value: string) => void","description":"Fired on Enter, and on debounced settle when debounceMs is set"},{"name":"placeholder","type":"string","default":"\"Search\"","description":"Shown while the field is empty"},{"name":"debounceMs","type":"number","default":"0","description":"Delay before a settled value fires onSearch on its own; 0 disables debouncing"},{"name":"disabled","type":"boolean","default":"false","description":"Blocks focus and typing; excluded from form submission"},{"name":"readonly","type":"boolean","default":"false","description":"Blocks typing and clearing but stays focusable and is still submitted"},{"name":"required","type":"boolean","default":"false","description":"Native required"},{"name":"invalid","type":"boolean","default":"false","description":"Drives the error border and aria-invalid"},{"name":"id","type":"string","description":"Element id"},{"name":"name","type":"string","description":"Native name, read on form submission"},{"name":"label","type":"string","description":"Accessible name — for a control with no visible Label next to it"},{"name":"clearable","type":"boolean","default":"true","description":"Renders a clear button once there is something to clear"},{"name":"class","type":"string","description":"Additional CSS classes, merged onto the field surface"},{"name":"ref","type":"HTMLInputElement | null","default":"null","description":"Bindable element reference"},{"name":"sound","type":"boolean","default":"false","description":"Plays the press cue when the field is cleared, once the user has enabled sound"}],"snippets":[],"events":[],"examples":["Basic Usage","Debounced","With FormField"]},{"name":"Select","slug":"select","description":"A single-choice dropdown built on a real button and a portalled listbox panel, with full keyboard navigation, typeahead and focus that never leaves the trigger.","category":"forms","group":"core","tags":["select","dropdown","listbox","combobox","form","compound","accessibility"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Select"]},"react":{"package":"fancy-ui-react","names":["Select"]},"vue":{"package":"fancy-ui-vue","names":["Select"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/select.md","react":"https://fancy-ui.rama.app/docs/components/react/select.md","vue":"https://fancy-ui.rama.app/docs/components/vue/select.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/select.json","react":"https://fancy-ui.rama.app/r/select.json","vue":"https://fancy-ui.rama.app/r/vue/select.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/select","props":[{"name":"options","type":"SelectOption[]","required":true,"description":"The choices, in order — { value, label, disabled? }."},{"name":"value","type":"string","default":"\"\"","description":"The selected value, bindable — \"\" means nothing is selected."},{"name":"onValueChange","type":"(value: string) => void","description":"Called with the new value whenever the selection changes."},{"name":"placeholder","type":"string","description":"Shown in the trigger while nothing is selected."},{"name":"disabled","type":"boolean","default":"false","description":"Blocks opening; excludes the control from form submission."},{"name":"required","type":"boolean","default":"false","description":"Marks the control required (aria-required). No native form-validation enforcement — see the README."},{"name":"invalid","type":"boolean","default":"false","description":"Drives the error border and aria-invalid."},{"name":"id","type":"string","description":"Element id."},{"name":"name","type":"string","description":"Native name. When set, a hidden input carries the value into the form."},{"name":"label","type":"string","description":"Accessible name — for a control with no visible Label next to it."},{"name":"side","type":"\"top\" | \"bottom\" | \"left\" | \"right\"","default":"\"bottom\"","description":"Side of the trigger to place the panel on. Flips when it would overflow."},{"name":"align","type":"\"start\" | \"center\" | \"end\"","default":"\"start\"","description":"Alignment along the trigger's cross axis."},{"name":"class","type":"string","description":"Additional CSS classes, merged onto the trigger."},{"name":"ref","type":"HTMLButtonElement | null","default":"null","description":"Bindable reference to the trigger button."},{"name":"sound","type":"boolean","default":"false","description":"Plays open on opening, select on a committed choice and close on a dismissal, once the user has enabled sound"}],"snippets":[],"events":[],"examples":["Basic Usage","With FormField","Disabled Options","Placement","Interactive Playground"]},{"name":"Slider","slug":"slider","description":"Restyled native range input with a purple-to-cyan gradient fill that tracks the current value and a glowing thumb","category":"forms","group":"core","tags":["slider","range","form","input"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Slider"]},"react":{"package":"fancy-ui-react","names":["Slider"]},"vue":{"package":"fancy-ui-vue","names":["Slider"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/slider.md","react":"https://fancy-ui.rama.app/docs/components/react/slider.md","vue":"https://fancy-ui.rama.app/docs/components/vue/slider.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/slider.json","react":"https://fancy-ui.rama.app/r/slider.json","vue":"https://fancy-ui.rama.app/r/vue/slider.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/slider","props":[{"name":"value","type":"number","default":"0","description":"Current value; bindable"},{"name":"onValueChange","type":"(value: number) => void","description":"Called with the new value on every input event"},{"name":"min","type":"number","default":"0","description":"Lower bound"},{"name":"max","type":"number","default":"100","description":"Upper bound"},{"name":"step","type":"number","default":"1","description":"Increment size, including fractional steps"},{"name":"disabled","type":"boolean","default":"false","description":"Blocks dragging and keyboard interaction. Overridden by a surrounding FormField"},{"name":"id","type":"string","description":"Element id. Overridden by a surrounding FormField's own controlId"},{"name":"name","type":"string","description":"Native name, read on form submission"},{"name":"label","type":"string","description":"Accessible name — for a control with no visible Label next to it"},{"name":"showValue","type":"boolean","default":"false","description":"Shows the current value in a bubble that tracks the thumb"},{"name":"showBounds","type":"boolean","default":"false","description":"Shows min and max as end labels below the track"},{"name":"class","type":"string","description":"Additional CSS classes, applied to the outer wrapper"},{"name":"ref","type":"HTMLInputElement | null","default":"null","description":"Reference to the underlying input type=range"},{"name":"sound","type":"boolean","default":"false","description":"Plays the tick cue on a committed value change, once the user has enabled sound"}],"snippets":[],"events":[],"examples":["Basic Usage","With Bounds","Steps"]},{"name":"Switch","slug":"switch","description":"A sliding on/off control that takes effect immediately, built on a native checkbox input","category":"forms","group":"core","tags":["switch","toggle","form","settings"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Switch"]},"react":{"package":"fancy-ui-react","names":["Switch"]},"vue":{"package":"fancy-ui-vue","names":["Switch"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/switch.md","react":"https://fancy-ui.rama.app/docs/components/react/switch.md","vue":"https://fancy-ui.rama.app/docs/components/vue/switch.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/switch.json","react":"https://fancy-ui.rama.app/r/switch.json","vue":"https://fancy-ui.rama.app/r/vue/switch.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/switch","props":[{"name":"checked","type":"boolean","default":"false","description":"Whether the switch is on; bindable"},{"name":"onCheckedChange","type":"(checked: boolean) => void","description":"Called with the new value whenever the switch is activated"},{"name":"disabled","type":"boolean","default":"false","description":"Blocks interaction; excluded from form submission"},{"name":"required","type":"boolean","default":"false","description":"Native required"},{"name":"id","type":"string","description":"Element id"},{"name":"name","type":"string","description":"Native name, read on form submission"},{"name":"value","type":"string","description":"Form value submitted while on"},{"name":"label","type":"string","description":"Accessible name, rendered as aria-label; skip it when children already supplies the visible label text"},{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","default":"\"md\"","description":"Track/knob size"},{"name":"class","type":"string","description":"Additional CSS classes, merged onto the wrapping label"},{"name":"ref","type":"HTMLInputElement | null","default":"null","description":"Bindable element reference to the native input"},{"name":"sound","type":"boolean","default":"false","description":"Plays toggle-on or toggle-off on each change, once the user has enabled sound"}],"snippets":[{"name":"children","description":"Visible label text, rendered beside the track"}],"events":[],"examples":["Basic Usage","Sizes","With Label"]},{"name":"Textarea","slug":"textarea","description":"A multi-line text field with an optional live character counter and auto-growing height, built on a native textarea","category":"forms","group":"core","tags":["textarea","text-field","form","validation","counter","auto-resize"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Textarea"]},"react":{"package":"fancy-ui-react","names":["Textarea"]},"vue":{"package":"fancy-ui-vue","names":["Textarea"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/textarea.md","react":"https://fancy-ui.rama.app/docs/components/react/textarea.md","vue":"https://fancy-ui.rama.app/docs/components/vue/textarea.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/textarea.json","react":"https://fancy-ui.rama.app/r/textarea.json","vue":"https://fancy-ui.rama.app/r/vue/textarea.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/textarea","props":[{"name":"value","type":"string","default":"\"\"","description":"Current value; bindable"},{"name":"onValueChange","type":"(value: string) => void","description":"Called with the new value on every input event"},{"name":"placeholder","type":"string","description":"Shown while the field is empty"},{"name":"disabled","type":"boolean","default":"false","description":"Blocks focus and typing; excluded from form submission"},{"name":"readonly","type":"boolean","default":"false","description":"Blocks typing but stays focusable and is still submitted, unlike disabled"},{"name":"required","type":"boolean","default":"false","description":"Native required"},{"name":"invalid","type":"boolean","default":"false","description":"Drives the error border and aria-invalid"},{"name":"id","type":"string","description":"Element id"},{"name":"name","type":"string","description":"Native name, read on form submission"},{"name":"autocomplete","type":"FullAutoFill","description":"Native autocomplete hint; the union from svelte/elements, not an arbitrary string"},{"name":"label","type":"string","description":"Accessible name — for a control with no visible Label next to it"},{"name":"rows","type":"number","default":"3","description":"Visible height in text rows before anything grows it; also the no-JS height"},{"name":"maxlength","type":"number","description":"Native character ceiling; also the counter's denominator"},{"name":"showCount","type":"boolean","default":"false","description":"Renders the live \"n / max\" counter under the field"},{"name":"autoResize","type":"boolean","default":"false","description":"Grows to fit content instead of scrolling; disables manual resize"},{"name":"class","type":"string","description":"Additional CSS classes — applied to the textarea itself, not the wrapper"},{"name":"ref","type":"HTMLTextAreaElement | null","default":"null","description":"Bindable element reference"}],"snippets":[],"events":[],"examples":["Basic Usage","With Counter","Auto Resize"]},{"name":"TimePicker","slug":"time-picker","description":"A field that opens a floating listbox of time slots generated at a configurable step, fully keyboard-navigable, with the highlighted slot always scrolled into view.","category":"forms","group":"core","tags":["time-picker","listbox","combobox","form","time","accessibility"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["TimePicker"]},"react":{"package":"fancy-ui-react","names":["TimePicker"]},"vue":{"package":"fancy-ui-vue","names":["TimePicker"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/time-picker.md","react":"https://fancy-ui.rama.app/docs/components/react/time-picker.md","vue":"https://fancy-ui.rama.app/docs/components/vue/time-picker.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/time-picker.json","react":"https://fancy-ui.rama.app/r/time-picker.json","vue":"https://fancy-ui.rama.app/r/vue/time-picker.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/time-picker","props":[{"name":"value","type":"string | null","default":"null","description":"The selected time, \"HH:mm\" 24-hour; bindable. hour12 changes display only."},{"name":"onValueChange","type":"(value: string | null) => void","description":"Called with the new value whenever a slot is picked."},{"name":"step","type":"number","default":"30","description":"Minutes between generated slots."},{"name":"min","type":"string","description":"Earliest selectable slot (\"HH:mm\", inclusive)."},{"name":"max","type":"string","description":"Latest selectable slot (\"HH:mm\", inclusive)."},{"name":"hour12","type":"boolean","default":"false","description":"Display only — 12-hour clock with AM/PM. The value stays HH:mm either way."},{"name":"disabled","type":"boolean","default":"false","description":"Blocks opening the panel; excludes the control from form submission."},{"name":"required","type":"boolean","default":"false","description":"Marks the field required for the surrounding form."},{"name":"invalid","type":"boolean","default":"false","description":"Drives the error border and aria-invalid."},{"name":"id","type":"string","description":"Element id."},{"name":"name","type":"string","description":"Native name. When set, a hidden input carries the HH:mm value."},{"name":"label","type":"string","description":"Accessible name — for a control with no visible Label next to it."},{"name":"placeholder","type":"string","default":"\"Select a time\"","description":"Shown in the trigger while no time is selected."},{"name":"locale","type":"string","description":"BCP 47 locale for slot and trigger-label formatting."},{"name":"class","type":"string","description":"Additional CSS classes, merged onto the trigger button."},{"name":"ref","type":"HTMLButtonElement | null","default":"null","description":"Bindable reference to the trigger button."},{"name":"sound","type":"boolean","default":"false","description":"Plays open on opening, select on a picked slot and close on a dismissal, once the user has enabled sound"}],"snippets":[],"events":[],"examples":["Basic Usage","Custom Step","With Bounds"]},{"name":"AlertDialog","slug":"alert-dialog","description":"A confirmation dialog for consequential, hard-to-undo actions — fixed confirm/cancel actions, never dismissed by an outside click","category":"overlays","group":"core","tags":["alert","dialog","confirm","destructive","overlay","modal"],"dependencies":["dialog","button"],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["AlertDialog"]},"react":{"package":"fancy-ui-react","names":["AlertDialog"]},"vue":{"package":"fancy-ui-vue","names":["AlertDialog"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/alert-dialog.md","react":"https://fancy-ui.rama.app/docs/components/react/alert-dialog.md","vue":"https://fancy-ui.rama.app/docs/components/vue/alert-dialog.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/alert-dialog.json","react":"https://fancy-ui.rama.app/r/alert-dialog.json","vue":"https://fancy-ui.rama.app/r/vue/alert-dialog.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/alert-dialog","props":[{"name":"open","type":"boolean","default":"false","description":"Whether the alert dialog is open; bindable"},{"name":"onOpenChange","type":"(open: boolean) => void","description":"Fires whenever open changes — Confirm, Cancel, or Escape"},{"name":"title","type":"string","description":"The heading. Omitted entirely (not just visually) when not given"},{"name":"description","type":"string","description":"The warning copy under the title. Same omission rule as title"},{"name":"confirmLabel","type":"string","default":"\"Confirm\"","description":"Label of the destructive action"},{"name":"cancelLabel","type":"string","default":"\"Cancel\"","description":"Label of the safe action"},{"name":"onConfirm","type":"() => void","description":"Called when the destructive action is activated, before the surface closes"},{"name":"onCancel","type":"() => void","description":"Called when the safe action is activated, and also when Escape closes it"},{"name":"initialFocus","type":"HTMLElement | null","description":"Element to focus once the surface opens; defaults to the Cancel button"},{"name":"class","type":"string","description":"Additional CSS classes for the panel"},{"name":"ref","type":"HTMLDivElement | null","default":"null","description":"Bindable reference to the panel element"},{"name":"sound","type":"boolean","default":"false","description":"Plays open on the trigger, select on a confirmed action and close on Cancel or Escape, once the user has enabled sound"}],"snippets":[{"name":"trigger","description":"Optional trigger; renders in place and opens the surface on activation"}],"events":[],"examples":["Basic Usage","Controlled Open","Custom Labels"]},{"name":"Dialog","slug":"dialog","description":"A modal panel with a title, description, body and free-form footer — portals out, traps focus, and locks the page's scroll while open","category":"overlays","group":"core","tags":["modal","dialog","overlay","portal","focus-trap"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Dialog"]},"react":{"package":"fancy-ui-react","names":["Dialog"]},"vue":{"package":"fancy-ui-vue","names":["Dialog"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/dialog.md","react":"https://fancy-ui.rama.app/docs/components/react/dialog.md","vue":"https://fancy-ui.rama.app/docs/components/vue/dialog.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/dialog.json","react":"https://fancy-ui.rama.app/r/dialog.json","vue":"https://fancy-ui.rama.app/r/vue/dialog.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/dialog","props":[{"name":"open","type":"boolean","default":"false","description":"Whether the dialog is open; bindable"},{"name":"onOpenChange","type":"(open: boolean) => void","description":"Fires whenever open changes, from any trigger"},{"name":"title","type":"string","description":"The heading. Omitted entirely (not just visually) when not given"},{"name":"description","type":"string","description":"The copy under the title. Same omission rule as title"},{"name":"dismissible","type":"boolean","default":"true","description":"Whether Escape and an outside click close the dialog; the close button always works"},{"name":"initialFocus","type":"HTMLElement | null","description":"Element to focus once the dialog opens; defaults to the first focusable descendant"},{"name":"class","type":"string","description":"Additional CSS classes for the panel"},{"name":"ref","type":"HTMLDivElement | null","default":"null","description":"Bindable reference to the panel element"},{"name":"sound","type":"boolean","default":"false","description":"Plays open when the trigger opens the dialog and close on every dismissal, once the user has enabled sound"}],"snippets":[{"name":"children","description":"The dialog's body"},{"name":"footer","description":"The action row under the body — free-form, callers build their own buttons"},{"name":"trigger","description":"Optional trigger; renders in place and opens the dialog on activation"}],"events":[],"examples":["Basic Usage","Controlled Open","Not Dismissible","Custom Initial Focus","With Popover","Interactive Playground"]},{"name":"Drawer","slug":"drawer","description":"A modal bottom sheet with a grab handle, draggable shut with a downward swipe — for filters, quick actions, or any touch-first task","category":"overlays","group":"core","tags":["overlay","drawer","bottom sheet","modal","swipe","mobile"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Drawer"]},"react":{"package":"fancy-ui-react","names":["Drawer"]},"vue":{"package":"fancy-ui-vue","names":["Drawer"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/drawer.md","react":"https://fancy-ui.rama.app/docs/components/react/drawer.md","vue":"https://fancy-ui.rama.app/docs/components/vue/drawer.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/drawer.json","react":"https://fancy-ui.rama.app/r/drawer.json","vue":"https://fancy-ui.rama.app/r/vue/drawer.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/drawer","props":[{"name":"open","type":"boolean","default":"false","description":"Whether the drawer is open. Bindable"},{"name":"onOpenChange","type":"(open: boolean) => void","description":"Called with the new value whenever the drawer opens or closes"},{"name":"title","type":"string","description":"Heading rendered in the header and wired to aria-labelledby"},{"name":"description","type":"string","description":"Supporting text under the title, wired to aria-describedby"},{"name":"dismissible","type":"boolean","default":"true","description":"Whether Escape, the scrim, the close button and the swipe gesture can close the drawer"},{"name":"swipeToClose","type":"boolean","default":"true","description":"Whether dragging the handle down past the threshold closes the drawer"},{"name":"class","type":"string","description":"Additional CSS classes merged onto the panel"},{"name":"id","type":"string","description":"The panel's id, for the aria-controls of a trigger rendered outside the component"},{"name":"ref","type":"HTMLDivElement | null","default":"null","description":"Bindable element reference to the panel"},{"name":"sound","type":"boolean","default":"false","description":"Plays close when the drawer is dismissed, including a committed swipe, once the user has enabled sound"}],"snippets":[{"name":"children","description":"Panel body content"},{"name":"footer","description":"Content pinned below the body, e.g. actions"}],"events":[],"examples":["Basic Usage","With Form","No Swipe"]},{"name":"HoverCard","slug":"hover-card","description":"An anchored panel that opens on hover or focus with a short delay, for richer previews than a tooltip — a profile card, a link preview","category":"overlays","group":"core","tags":["overlay","hover","card","preview","anchored","accessibility"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["HoverCard"]},"react":{"package":"fancy-ui-react","names":["HoverCard"]},"vue":{"package":"fancy-ui-vue","names":["HoverCard"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/hover-card.md","react":"https://fancy-ui.rama.app/docs/components/react/hover-card.md","vue":"https://fancy-ui.rama.app/docs/components/vue/hover-card.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/hover-card.json","react":"https://fancy-ui.rama.app/r/hover-card.json","vue":"https://fancy-ui.rama.app/r/vue/hover-card.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/hover-card","props":[{"name":"open","type":"boolean","default":"false","description":"Whether the card is open. Bindable"},{"name":"onOpenChange","type":"(open: boolean) => void","description":"Fires whenever the open state changes, from any trigger"},{"name":"side","type":"\"top\" | \"bottom\" | \"left\" | \"right\"","default":"\"bottom\"","description":"Side of the trigger the card opens on. Flips when it would overflow"},{"name":"align","type":"\"start\" | \"center\" | \"end\"","default":"\"center\"","description":"Alignment along the trigger's cross axis"},{"name":"offset","type":"number","default":"8","description":"Gap in pixels between the trigger and the card"},{"name":"openDelay","type":"number","default":"300","description":"Ms before the card opens after the pointer enters the trigger. Ignored for focus, which opens immediately"},{"name":"closeDelay","type":"number","default":"150","description":"Ms before the card closes after the pointer leaves. Lets it travel from the trigger to the card without the card vanishing mid-trip"},{"name":"class","type":"string","description":"Additional classes for the card panel"},{"name":"ref","type":"HTMLDivElement | null","default":"null","description":"Bindable reference to the trigger wrapper"}],"snippets":[{"name":"trigger","description":"The element that opens the card on hover or focus. Receives the card's id (or undefined while closed) — put it on your own trigger element's aria-describedby"},{"name":"children","description":"The card's content. Supplementary only — see the README before adding links or buttons"}],"events":[],"examples":["Basic Usage","With Stats"]},{"name":"Popover","slug":"popover","description":"An anchored panel that opens next to a trigger and holds interactive content — quick settings, a small form, more than a tooltip can carry","category":"overlays","group":"core","tags":["overlay","popover","anchored","disclosure","accessibility"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Popover"]},"react":{"package":"fancy-ui-react","names":["Popover"]},"vue":{"package":"fancy-ui-vue","names":["Popover"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/popover.md","react":"https://fancy-ui.rama.app/docs/components/react/popover.md","vue":"https://fancy-ui.rama.app/docs/components/vue/popover.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/popover.json","react":"https://fancy-ui.rama.app/r/popover.json","vue":"https://fancy-ui.rama.app/r/vue/popover.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/popover","props":[{"name":"open","type":"boolean","default":"false","description":"Whether the panel is open. Bindable"},{"name":"onOpenChange","type":"(open: boolean) => void","description":"Called with the new value whenever the panel opens or closes, however the change happened"},{"name":"side","type":"\"top\" | \"bottom\" | \"left\" | \"right\"","default":"\"bottom\"","description":"Side of the trigger to place the panel on. Flips when it would overflow"},{"name":"align","type":"\"start\" | \"center\" | \"end\"","default":"\"center\"","description":"Alignment along the trigger's cross axis"},{"name":"offset","type":"number","default":"8","description":"Gap in pixels between the trigger and the panel"},{"name":"dismissible","type":"boolean","default":"true","description":"Whether Escape and an outside click close the panel"},{"name":"class","type":"string","description":"Additional CSS classes, merged onto the panel"},{"name":"ref","type":"HTMLDivElement | null","default":"null","description":"Bindable reference to the panel element"},{"name":"sound","type":"boolean","default":"false","description":"Plays open when the trigger opens the panel and close on a dismissal, once the user has enabled sound"}],"snippets":[{"name":"trigger","description":"The trigger's content, rendered inside the real <button> this component owns and wires up"},{"name":"children","description":"The panel's content"}],"events":[],"examples":["Basic Usage","Sides","With Form"]},{"name":"Sheet","slug":"sheet","description":"A modal panel that slides in from an edge of the viewport, for settings, filters, or any focused task that doesn't need a full page","category":"overlays","group":"core","tags":["overlay","sheet","panel","modal","side panel","settings"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Sheet"]},"react":{"package":"fancy-ui-react","names":["Sheet"]},"vue":{"package":"fancy-ui-vue","names":["Sheet"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/sheet.md","react":"https://fancy-ui.rama.app/docs/components/react/sheet.md","vue":"https://fancy-ui.rama.app/docs/components/vue/sheet.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/sheet.json","react":"https://fancy-ui.rama.app/r/sheet.json","vue":"https://fancy-ui.rama.app/r/vue/sheet.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/sheet","props":[{"name":"open","type":"boolean","default":"false","description":"Whether the sheet is open. Bindable"},{"name":"onOpenChange","type":"(open: boolean) => void","description":"Called with the new value whenever the sheet opens or closes"},{"name":"side","type":"\"left\" | \"right\" | \"top\" | \"bottom\"","default":"\"right\"","description":"Edge of the viewport the panel slides in from"},{"name":"title","type":"string","description":"Heading rendered in the header and wired to aria-labelledby"},{"name":"description","type":"string","description":"Supporting text under the title, wired to aria-describedby"},{"name":"dismissible","type":"boolean","default":"true","description":"Whether Escape, the scrim and the close button can close the sheet"},{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","default":"\"md\"","description":"Panel width (left/right sides) or height (top/bottom sides)"},{"name":"class","type":"string","description":"Additional CSS classes merged onto the panel"},{"name":"id","type":"string","description":"The panel's id, for the aria-controls of a trigger rendered outside the component"},{"name":"ref","type":"HTMLDivElement | null","default":"null","description":"Bindable element reference to the panel"},{"name":"sound","type":"boolean","default":"false","description":"Plays close when the sheet is dismissed, once the user has enabled sound"}],"snippets":[{"name":"children","description":"Panel body content"},{"name":"footer","description":"Content pinned below the body, e.g. actions"}],"events":[],"examples":["Basic Usage","Sides","With Footer"]},{"name":"Toast","slug":"toast","description":"A notification system: call toast() from anywhere to queue one, mount <Toaster /> once to render the stack — success, error, info and loading variants, an optional action, and accessible live-region announcements","category":"overlays","group":"core","tags":["overlay","toast","notification","snackbar","live-region","accessibility"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Toast"]},"react":{"package":"fancy-ui-react","names":["Toast"]},"vue":{"package":"fancy-ui-vue","names":["Toast"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/toast.md","react":"https://fancy-ui.rama.app/docs/components/react/toast.md","vue":"https://fancy-ui.rama.app/docs/components/vue/toast.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/toast.json","react":"https://fancy-ui.rama.app/r/toast.json","vue":"https://fancy-ui.rama.app/r/vue/toast.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/toast","props":[{"name":"position","type":"\"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"","default":"\"bottom-right\"","description":"Corner (or edge-center) the <Toaster /> stack anchors to"},{"name":"class","type":"string","description":"Additional classes for the viewport that stacks the toasts"},{"name":"ref","type":"HTMLDivElement | null","default":"null","description":"Bindable reference to the <Toaster /> root node"},{"name":"sound","type":"boolean","default":"false","description":"Plays success or error when a toast of that variant appears, once the user has enabled sound"},{"name":"toast().title","type":"string","required":true,"description":"Primary line of the toast raised by the toast() function"},{"name":"toast().description","type":"string","description":"Secondary line, shown under the title"},{"name":"toast().variant","type":"\"success\" | \"error\" | \"info\" | \"loading\"","default":"\"info\"","description":"Icon, accent colour, and the live region it announces through — error is assertive, everything else polite"},{"name":"toast().duration","type":"number","default":"5000","description":"Milliseconds before auto-dismiss; Infinity is sticky. Defaults to Infinity for the loading variant, which has no natural finish time"},{"name":"toast().action","type":"{ label: string; onClick: () => void }","description":"A single action button. Auto-dismiss pauses on hover or focus for every toast, with or without one"}],"snippets":[],"events":[],"examples":["Basic Usage","Variants","With Action","Persistent","Interactive Playground"]},{"name":"Tooltip","slug":"tooltip","description":"A small anchored label that explains a control on hover or focus — plain text only, never interactive content","category":"overlays","group":"core","tags":["overlay","tooltip","anchored","accessibility"],"dependencies":[],"imports":{"svelte":{"package":"fancy-ui-svelte","names":["Tooltip"]},"react":{"package":"fancy-ui-react","names":["Tooltip"]},"vue":{"package":"fancy-ui-vue","names":["Tooltip"]}},"docs":{"svelte":"https://fancy-ui.rama.app/docs/components/tooltip.md","react":"https://fancy-ui.rama.app/docs/components/react/tooltip.md","vue":"https://fancy-ui.rama.app/docs/components/vue/tooltip.md"},"copySource":{"svelte":"https://fancy-ui.rama.app/r/svelte/tooltip.json","react":"https://fancy-ui.rama.app/r/tooltip.json","vue":"https://fancy-ui.rama.app/r/vue/tooltip.json"},"availability":{"svelte":"available","react":"available","vue":"available"},"url":"https://fancy-ui.rama.app/docs/components/tooltip","props":[{"name":"content","type":"string","required":true,"description":"The tooltip's text"},{"name":"side","type":"\"top\" | \"bottom\" | \"left\" | \"right\"","default":"\"top\"","description":"Side of the trigger to place the tooltip on"},{"name":"align","type":"\"start\" | \"center\" | \"end\"","default":"\"center\"","description":"Alignment along the trigger's cross axis"},{"name":"offset","type":"number","default":"6","description":"Gap in pixels between the trigger and the tooltip"},{"name":"openDelay","type":"number","default":"500","description":"Delay in ms before a hover opens it. Never applied to a focus open"},{"name":"closeDelay","type":"number","default":"0","description":"Delay in ms before it closes once neither hovered nor focused"},{"name":"disabled","type":"boolean","default":"false","description":"Suppresses it entirely — no open on hover or focus"},{"name":"class","type":"string","description":"Additional CSS classes, merged onto the trigger wrapper"},{"name":"ref","type":"HTMLElement | null","default":"null","description":"Bindable reference to the trigger wrapper element"}],"snippets":[{"name":"children","description":"The trigger. Must render exactly one focusable element — a button, link, or similar"}],"events":[],"examples":["Basic Usage","Sides","Delays"]}],"recipes":[{"slug":"save-publish","title":"Save and publish","url":"https://fancy-ui.rama.app/docs/recipes/save-publish.md"},{"slug":"undo-toast","title":"Undo with a toast","url":"https://fancy-ui.rama.app/docs/recipes/undo-toast.md"}]}