{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "fluid-functionalism", "homepage": "https://github.com/mickadesign/fluid-functionalism", "items": [ { "name": "surfaces", "type": "registry:theme", "title": "Surfaces", "description": "Eight-level surface and shadow ladder for elevation. Light: two color steps then flat white, differentiated by shadow. Dark: additive white-opacity ladder with layered inset highlights and drops.", "cssVars": { "theme": { "color-surface-1": "var(--surface-1)", "color-surface-2": "var(--surface-2)", "color-surface-3": "var(--surface-3)", "color-surface-4": "var(--surface-4)", "color-surface-5": "var(--surface-5)", "color-surface-6": "var(--surface-6)", "color-surface-7": "var(--surface-7)", "color-surface-8": "var(--surface-8)", "shadow-surface-1": "var(--shadow-1)", "shadow-surface-2": "var(--shadow-2)", "shadow-surface-3": "var(--shadow-3)", "shadow-surface-4": "var(--shadow-4)", "shadow-surface-5": "var(--shadow-5)", "shadow-surface-6": "var(--shadow-6)", "shadow-surface-7": "var(--shadow-7)", "shadow-surface-8": "var(--shadow-8)" }, "light": { "surface-1": "#FAFAFA", "surface-2": "#FCFCFC", "surface-3": "#FFFFFF", "surface-4": "#FFFFFF", "surface-5": "#FFFFFF", "surface-6": "#FFFFFF", "surface-7": "#FFFFFF", "surface-8": "#FFFFFF", "shadow-color": "rgb(0 0 0 / 0.06)", "shadow-1": "0 0 0 1px var(--shadow-color)", "shadow-2": "0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color)", "shadow-3": "0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color)", "shadow-4": "0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color), 0 6px 6px -3px var(--shadow-color)", "shadow-5": "0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color), 0 6px 6px -3px var(--shadow-color), 0 12px 12px -6px var(--shadow-color)", "shadow-6": "0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color), 0 6px 6px -3px var(--shadow-color), 0 12px 12px -6px var(--shadow-color), 0 24px 24px -12px var(--shadow-color)", "shadow-7": "0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color), 0 6px 6px -3px var(--shadow-color), 0 12px 12px -6px var(--shadow-color), 0 24px 24px -12px var(--shadow-color), 0 48px 48px -24px var(--shadow-color)", "shadow-8": "0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color), 0 6px 6px -3px var(--shadow-color), 0 12px 12px -6px var(--shadow-color), 0 24px 24px -12px var(--shadow-color), 0 48px 48px -24px var(--shadow-color), 0 96px 96px -48px var(--shadow-color)" }, "dark": { "surface-1": "#171717", "surface-2": "#1E1E1E", "surface-3": "#252525", "surface-4": "#2C2C2C", "surface-5": "#333333", "surface-6": "#3A3A3A", "surface-7": "#414141", "surface-8": "#484848", "dm-hi-base": "rgba(255,255,255,0.01)", "dm-hi-mid": "rgba(255,255,255,0.02)", "dm-hi-high": "rgba(255,255,255,0.04)", "dm-hi-peak": "rgba(255,255,255,0.06)", "dm-ring-base": "rgba(255,255,255,0.02)", "dm-ring-mid": "rgba(255,255,255,0.04)", "dm-ring-high": "rgba(255,255,255,0.06)", "dm-drop": "rgba(0,0,0,0.18)", "shadow-1": "inset 0 0 0 1px var(--dm-ring-base)", "shadow-2": "inset 0 1px 0 0 var(--dm-hi-base), inset 0 0 0 1px var(--dm-ring-base), 0 1px 1px -0.5px var(--dm-drop)", "shadow-3": "inset 0 1px 0 0 var(--dm-hi-mid), inset 0 0 0 1px var(--dm-ring-base), 0 0 0 1px rgba(0,0,0,0.12), 0 1px 1px -0.5px var(--dm-drop), 0 3px 3px -1.5px var(--dm-drop)", "shadow-4": "inset 0 1px 0 0 var(--dm-hi-mid), inset 0 0 0 1px var(--dm-ring-mid), 0 0 0 1px rgba(0,0,0,0.14), 0 1px 1px -0.5px var(--dm-drop), 0 3px 3px -1.5px var(--dm-drop), 0 6px 6px -3px var(--dm-drop)", "shadow-5": "inset 0 1px 0 0 var(--dm-hi-high), inset 0 0 0 1px var(--dm-ring-mid), 0 0 0 1px rgba(0,0,0,0.16), 0 1px 1px -0.5px var(--dm-drop), 0 3px 3px -1.5px var(--dm-drop), 0 6px 6px -3px var(--dm-drop), 0 12px 12px -6px var(--dm-drop)", "shadow-6": "inset 0 1px 0 0 var(--dm-hi-high), inset 0 0 0 1px var(--dm-ring-high), 0 0 0 1px rgba(0,0,0,0.18), 0 1px 1px -0.5px var(--dm-drop), 0 3px 3px -1.5px var(--dm-drop), 0 6px 6px -3px var(--dm-drop), 0 12px 12px -6px var(--dm-drop), 0 24px 24px -12px var(--dm-drop)", "shadow-7": "inset 0 1px 0 0 var(--dm-hi-peak), inset 0 0 0 1px var(--dm-ring-high), 0 0 0 1px rgba(0,0,0,0.20), 0 1px 1px -0.5px var(--dm-drop), 0 3px 3px -1.5px var(--dm-drop), 0 6px 6px -3px var(--dm-drop), 0 12px 12px -6px var(--dm-drop), 0 24px 24px -12px var(--dm-drop), 0 48px 48px -24px var(--dm-drop)", "shadow-8": "inset 0 1px 0 0 var(--dm-hi-peak), inset 0 0 0 1px var(--dm-ring-high), 0 0 0 1px rgba(0,0,0,0.22), 0 1px 1px -0.5px var(--dm-drop), 0 3px 3px -1.5px var(--dm-drop), 0 6px 6px -3px var(--dm-drop), 0 12px 12px -6px var(--dm-drop), 0 24px 24px -12px var(--dm-drop), 0 48px 48px -24px var(--dm-drop), 0 96px 96px -48px var(--dm-drop)" } }, "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/surfaces.", "categories": [ "theme" ] }, { "name": "tokens", "type": "registry:theme", "title": "Interaction Tokens", "description": "Shared interaction-state tokens: surface-relative hover/active overlays (bg-hover, bg-active), the selected fill, the destructive-light ground, the --overlay RGB triplet, the --focus-ring color, and the base-layer :focus-visible fallback ring.", "cssVars": { "theme": { "color-hover": "var(--hover)", "color-active": "var(--active)", "color-selected": "var(--selected)", "color-destructive-light": "var(--destructive-light)" }, "light": { "hover": "rgb(0 0 0 / 0.04)", "active": "rgb(0 0 0 / 0.07)", "selected": "#D4D4D4", "destructive-light": "#FEF2F2", "overlay": "0 0 0", "focus-ring": "#6B97FF" }, "dark": { "hover": "rgb(255 255 255 / 0.06)", "active": "rgb(255 255 255 / 0.1)", "selected": "#525252", "destructive-light": "#450A0A", "overlay": "255 255 255" } }, "css": { "@layer base": { ":focus-visible": { "outline": "1px solid var(--focus-ring, #6B97FF)", "outline-offset": "2px", "border-radius": "var(--shape-input-radius, 8px)" }, "a:focus-visible": { "border-radius": "2px" } } }, "files": [], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/surfaces.", "categories": [ "theme" ] }, { "name": "utils", "type": "registry:lib", "title": "Utilities", "description": "Utility function for merging Tailwind CSS classes with clsx and tailwind-merge.", "dependencies": [ "clsx", "tailwind-merge" ], "files": [ { "path": "registry/default/lib/utils.ts", "type": "registry:lib" } ], "docs": "Part of Fluid Functionalism — https://www.fluidfunctionalism.com", "categories": [ "lib" ] }, { "name": "springs", "type": "registry:lib", "title": "Spring Animations", "description": "Spring animation token presets for Framer Motion (fast, moderate, slow).", "files": [ { "path": "registry/default/lib/springs.ts", "type": "registry:lib" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/motion.", "categories": [ "lib" ] }, { "name": "font-weight", "type": "registry:lib", "title": "Font Weight Tokens", "description": "Variable font weight tokens for Inter (normal, medium, semibold, bold) using font-variation-settings.", "files": [ { "path": "registry/default/lib/font-weight.ts", "type": "registry:lib" } ], "docs": "Part of Fluid Functionalism — https://www.fluidfunctionalism.com", "categories": [ "lib" ] }, { "name": "surface-context", "type": "registry:lib", "title": "Surface Context", "description": "React context that tracks the current substrate elevation level. Elevated components (Dropdown, Select, etc.) read it via useSurface() and render at substrate + offset, then re-provide a new substrate so further nesting elevates further.", "files": [ { "path": "registry/default/lib/surface-context.tsx", "type": "registry:lib" } ], "docs": "Part of Fluid Functionalism — https://www.fluidfunctionalism.com", "categories": [ "lib" ] }, { "name": "surface-classes", "type": "registry:lib", "title": "Surface Class Lookup", "description": "Static lookup tables for bg-surface-N and shadow-surface-N utilities. Required because Tailwind v4 cannot detect template-literal class names.", "files": [ { "path": "registry/default/lib/surface-classes.ts", "type": "registry:lib" } ], "registryDependencies": [ "https://www.fluidfunctionalism.com/r/surfaces.json" ], "docs": "Part of Fluid Functionalism — https://www.fluidfunctionalism.com", "categories": [ "lib" ] }, { "name": "elevated", "type": "registry:lib", "title": "Elevated", "description": "Elevation primitive. Wraps the read-substrate / compute-level / apply-classes / re-provide-context pattern into one component. Pulls in the surface theme tokens, substrate context, and class lookup so a single install drops in the whole elevation system.", "registryDependencies": [ "https://www.fluidfunctionalism.com/r/surfaces.json", "utils", "https://www.fluidfunctionalism.com/r/surface-context.json", "https://www.fluidfunctionalism.com/r/surface-classes.json" ], "files": [ { "path": "registry/default/lib/elevated.tsx", "type": "registry:lib" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/surfaces.", "categories": [ "lib" ] }, { "name": "popup", "type": "registry:lib", "title": "Popup chrome", "description": "Shared popup chrome for the dropdown, select, and combobox popups: side-aware enter/exit motion classes driven by the positioner's resolved data-side, the ScrollArea sizing the list scrolls inside, and the navigation-key list.", "files": [ { "path": "registry/default/lib/popup.ts", "type": "registry:lib" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/motion.", "categories": [ "lib" ] }, { "name": "shape-context", "type": "registry:lib", "title": "Shape Context", "description": "React context provider for runtime shape variant switching (pill or rounded). Controls border-radius across all Fluid Functionalism components.", "files": [ { "path": "registry/default/lib/shape-context.tsx", "type": "registry:lib" } ], "css": { "html.transitioning *, html.transitioning *::before, html.transitioning *::after": { "transition": "border-radius 180ms ease-in-out, background-color 180ms ease-in-out, color 180ms ease-in-out, border-color 180ms ease-in-out, fill 180ms ease-in-out, stroke 180ms ease-in-out !important" } }, "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/sizes.", "categories": [ "lib" ] }, { "name": "size-context", "type": "registry:lib", "title": "Size Context", "description": "React context provider for the two-step size ladder (36px default, 28px compact). Controls control heights, text, icon, and padding scale across all Fluid Functionalism components, and exports the role-based typography scale.", "files": [ { "path": "registry/default/lib/size-context.tsx", "type": "registry:lib" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/sizes.", "categories": [ "lib" ] }, { "name": "icon-context", "type": "registry:lib", "title": "Icon Context", "description": "Named icon slots with a Lucide default set; swap any icon via IconProvider.", "dependencies": [ "lucide-react" ], "registryDependencies": [], "files": [ { "path": "registry/default/lib/icon-context.tsx", "type": "registry:lib" } ], "docs": "Part of Fluid Functionalism — https://www.fluidfunctionalism.com", "categories": [ "lib" ] }, { "name": "use-fluid-hover", "type": "registry:hook", "title": "useFluidHover + FluidHoverHighlight", "description": "Fluid hover: the hook that tracks the item nearest the cursor within a container, and the one highlight component that springs between the rects it measures.", "dependencies": [ "framer-motion" ], "registryDependencies": [ "https://www.fluidfunctionalism.com/r/springs.json" ], "files": [ { "path": "registry/default/hooks/use-fluid-hover.ts", "type": "registry:hook" }, { "path": "registry/default/fluid-hover-highlight.tsx", "type": "registry:component" } ], "docs": "Part of Fluid Functionalism — https://www.fluidfunctionalism.com", "categories": [ "hook" ] }, { "name": "use-touch-primary", "type": "registry:hook", "title": "useTouchPrimary", "description": "Detects touch-primary devices (coarse pointer + touch points), updating live on pointer-mode and media-query changes. Adapted from Lina (https://lina.sameer.sh).", "files": [ { "path": "registry/default/hooks/use-touch-primary.tsx", "type": "registry:hook" } ], "docs": "Part of Fluid Functionalism — https://www.fluidfunctionalism.com", "categories": [ "hook" ] }, { "name": "use-keyboard-nav-gate", "type": "registry:hook", "title": "useKeyboardNavGate", "description": "Gates a popup's keyboard focus ring on keyboard use: seeded at open from the focused element's :focus-visible state, then earned by navigation keys inside the popup.", "registryDependencies": [ "https://www.fluidfunctionalism.com/r/popup.json" ], "files": [ { "path": "registry/default/hooks/use-keyboard-nav-gate.ts", "type": "registry:hook" } ], "docs": "Part of Fluid Functionalism — https://www.fluidfunctionalism.com", "categories": [ "hook" ] }, { "name": "use-merge-split", "type": "registry:hook", "title": "useMergeSplitBlocks", "description": "React hook + renderer for the selected-background merge/split animation. When one row bridges or splits two contiguous selected runs, their inner edges glide together (or apart) and swap to a single block, instead of one block spring-growing over the union.", "registryDependencies": [ "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/use-fluid-hover.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/default/hooks/use-merge-split.tsx", "type": "registry:hook" } ], "docs": "Part of Fluid Functionalism — https://www.fluidfunctionalism.com", "categories": [ "hook" ] }, { "name": "accordion", "type": "registry:ui", "title": "Accordion", "description": "Collapsible accordion with animated height transitions, spring-animated chevron, and fluid hover in grouped mode. Built on Radix UI Accordion.", "dependencies": [ "framer-motion", "@radix-ui/react-accordion", "lucide-react" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/icon-context.json", "https://www.fluidfunctionalism.com/r/use-fluid-hover.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/radix/accordion.tsx", "type": "registry:ui", "target": "components/ui/accordion.tsx" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/accordion.", "categories": [ "components" ] }, { "name": "accordion-base", "type": "registry:ui", "title": "Accordion (Base UI)", "description": "Collapsible accordion with animated height transitions, spring-animated chevron, and fluid hover in grouped mode. Base UI flavor.", "dependencies": [ "framer-motion", "@base-ui/react", "lucide-react" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/icon-context.json", "https://www.fluidfunctionalism.com/r/use-fluid-hover.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/base/accordion.tsx", "type": "registry:ui", "target": "components/ui/accordion.tsx" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/accordion.", "categories": [ "components" ] }, { "name": "ask-user-questions", "type": "registry:ui", "title": "Ask User Questions", "description": "Stepped question flow with numbered options, keyboard shortcuts (1–9), single or multi-select, inline 'other' text input, optional skip, fluid hover, and multi-question navigation. Auto-advances on selection in single-select.", "dependencies": [ "framer-motion", "@base-ui/react" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/icon-context.json", "https://www.fluidfunctionalism.com/r/use-fluid-hover.json", "https://www.fluidfunctionalism.com/r/use-merge-split.json", "https://www.fluidfunctionalism.com/r/button.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/default/ask-user-questions.tsx", "type": "registry:ui" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/ask-user-questions.", "categories": [ "components" ] }, { "name": "badge", "type": "registry:ui", "title": "Badge", "description": "Compact label with solid and dot variants, Tailwind color palette, and three sizes.", "dependencies": [ "class-variance-authority" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/size-context.json" ], "files": [ { "path": "registry/default/badge.tsx", "type": "registry:ui" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/badge.", "categories": [ "components" ] }, { "name": "button", "type": "registry:ui", "title": "Button", "description": "Animated button with variants (primary, secondary, tertiary, ghost), icon support, loading spinner, and fluid font-weight transitions on hover.", "dependencies": [ "framer-motion", "@radix-ui/react-slot", "class-variance-authority", "lucide-react" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/icon-context.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/radix/button.tsx", "type": "registry:ui", "target": "components/ui/button.tsx" } ], "css": { "@keyframes spinner-move": { "to": { "stroke-dashoffset": "-100" } }, "@keyframes spinner-dash": { "0%, 100%": { "stroke-dasharray": "15 85" }, "50%": { "stroke-dasharray": "40 60" } } }, "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/button.", "categories": [ "components" ] }, { "name": "button-base", "type": "registry:ui", "title": "Button (Base UI)", "description": "Animated button with variants (primary, secondary, tertiary, ghost), icon support, loading spinner, and fluid font-weight transitions on hover. Base UI flavor.", "dependencies": [ "framer-motion", "@base-ui/react", "class-variance-authority", "lucide-react" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/icon-context.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/base/button.tsx", "type": "registry:ui", "target": "components/ui/button.tsx" } ], "css": { "@keyframes spinner-move": { "to": { "stroke-dashoffset": "-100" } }, "@keyframes spinner-dash": { "0%, 100%": { "stroke-dasharray": "15 85" }, "50%": { "stroke-dasharray": "40 60" } } }, "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/button.", "categories": [ "components" ] }, { "name": "dropdown", "type": "registry:ui", "title": "Dropdown", "description": "Dropdown menu with fluid hover, animated selection indicator, inline panel or triggered popup with collision-aware positioning, typeahead, and close-on-select. Includes MenuItem, DropdownSearch (a search field inside the popup), and multiple selection with merged backgrounds. Radix flavor.", "dependencies": [ "@radix-ui/react-dropdown-menu", "framer-motion" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/surface-context.json", "https://www.fluidfunctionalism.com/r/surface-classes.json", "https://www.fluidfunctionalism.com/r/icon-context.json", "https://www.fluidfunctionalism.com/r/use-fluid-hover.json", "https://www.fluidfunctionalism.com/r/use-merge-split.json", "https://www.fluidfunctionalism.com/r/elevated.json", "https://www.fluidfunctionalism.com/r/scroll-area.json", "https://www.fluidfunctionalism.com/r/popup.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/radix/dropdown.tsx", "type": "registry:ui", "target": "components/ui/dropdown.tsx" }, { "path": "registry/default/menu-item.tsx", "type": "registry:ui", "target": "components/ui/menu-item.tsx" }, { "path": "registry/default/dropdown-search.tsx", "type": "registry:ui", "target": "components/ui/dropdown-search.tsx" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/dropdown.", "categories": [ "components" ] }, { "name": "dropdown-base", "type": "registry:ui", "title": "Dropdown", "description": "Dropdown menu with fluid hover, animated selection indicator, inline panel or triggered popup with collision-aware positioning, typeahead, and close-on-select. Includes MenuItem, DropdownSearch (a search field inside the popup), and multiple selection with merged backgrounds. Base UI flavor.", "dependencies": [ "@base-ui/react", "framer-motion" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/surface-context.json", "https://www.fluidfunctionalism.com/r/surface-classes.json", "https://www.fluidfunctionalism.com/r/icon-context.json", "https://www.fluidfunctionalism.com/r/use-fluid-hover.json", "https://www.fluidfunctionalism.com/r/use-merge-split.json", "https://www.fluidfunctionalism.com/r/elevated.json", "https://www.fluidfunctionalism.com/r/base/scroll-area.json", "https://www.fluidfunctionalism.com/r/popup.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/base/dropdown.tsx", "type": "registry:ui", "target": "components/ui/dropdown.tsx" }, { "path": "registry/default/menu-item.tsx", "type": "registry:ui", "target": "components/ui/menu-item.tsx" }, { "path": "registry/default/dropdown-search.tsx", "type": "registry:ui", "target": "components/ui/dropdown-search.tsx" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/dropdown.", "categories": [ "components" ] }, { "name": "checkbox-group", "type": "registry:ui", "title": "Checkbox Group", "description": "Animated checkbox group with fluid hover, contiguous selection merging, and spring-animated check marks. Built on Radix UI Checkbox.", "dependencies": [ "framer-motion", "@radix-ui/react-checkbox" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/use-fluid-hover.json", "https://www.fluidfunctionalism.com/r/use-merge-split.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/radix/checkbox-group.tsx", "type": "registry:ui", "target": "components/ui/checkbox-group.tsx" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/checkbox-group.", "categories": [ "components" ] }, { "name": "checkbox-group-base", "type": "registry:ui", "title": "Checkbox Group (Base UI)", "description": "Animated checkbox group with fluid hover, contiguous selection merging, and spring-animated check marks. Base UI flavor.", "dependencies": [ "framer-motion", "@base-ui/react" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/use-fluid-hover.json", "https://www.fluidfunctionalism.com/r/use-merge-split.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/base/checkbox-group.tsx", "type": "registry:ui", "target": "components/ui/checkbox-group.tsx" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/checkbox-group.", "categories": [ "components" ] }, { "name": "radio-group", "type": "registry:ui", "title": "Radio Group", "description": "Animated radio group with fluid hover, spring-animated selection dot, and optional Radix UI integration. Supports both controlled index and value-based APIs.", "dependencies": [ "framer-motion", "@radix-ui/react-radio-group" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/use-fluid-hover.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/radix/radio-group.tsx", "type": "registry:ui", "target": "components/ui/radio-group.tsx" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/radio-group.", "categories": [ "components" ] }, { "name": "radio-group-base", "type": "registry:ui", "title": "Radio Group (Base UI)", "description": "Animated radio group with fluid hover, spring-animated selection dot. Base UI flavor.", "dependencies": [ "framer-motion", "@base-ui/react" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/use-fluid-hover.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/base/radio-group.tsx", "type": "registry:ui", "target": "components/ui/radio-group.tsx" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/radio-group.", "categories": [ "components" ] }, { "name": "dialog", "type": "registry:ui", "title": "Dialog", "description": "Animated modal dialog with spring-based scale and opacity transitions in three widths (sm, lg, and an xl canvas for composed layouts such as a sidebar), plus a container prop to scope it to a region. Built on Radix UI Dialog with overlay, header, footer, title, and description sub-components.", "dependencies": [ "framer-motion", "@radix-ui/react-dialog", "lucide-react" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/surface-context.json", "https://www.fluidfunctionalism.com/r/surface-classes.json", "https://www.fluidfunctionalism.com/r/icon-context.json", "https://www.fluidfunctionalism.com/r/button.json", "https://www.fluidfunctionalism.com/r/size-context.json" ], "files": [ { "path": "registry/radix/dialog.tsx", "type": "registry:ui", "target": "components/ui/dialog.tsx" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/dialog.", "categories": [ "components" ] }, { "name": "dialog-base", "type": "registry:ui", "title": "Dialog (Base UI)", "description": "Animated modal dialog with spring-based scale and opacity transitions in three widths (sm, lg, and an xl canvas for composed layouts such as a sidebar), plus a container prop to scope it to a region. Base UI flavor.", "dependencies": [ "framer-motion", "@base-ui/react", "lucide-react" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/surface-context.json", "https://www.fluidfunctionalism.com/r/surface-classes.json", "https://www.fluidfunctionalism.com/r/icon-context.json", "https://www.fluidfunctionalism.com/r/base/button.json", "https://www.fluidfunctionalism.com/r/size-context.json" ], "files": [ { "path": "registry/base/dialog.tsx", "type": "registry:ui", "target": "components/ui/dialog.tsx" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/dialog.", "categories": [ "components" ] }, { "name": "mobile-drawer", "type": "registry:ui", "title": "Mobile Drawer", "description": "Slide-in navigation drawer with scrim, focus trap, and scroll lock. Radix flavor.", "dependencies": [ "@radix-ui/react-dialog", "framer-motion" ], "registryDependencies": [ "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/surface-context.json", "https://www.fluidfunctionalism.com/r/surface-classes.json" ], "files": [ { "path": "registry/radix/mobile-drawer.tsx", "type": "registry:ui", "target": "components/ui/mobile-drawer.tsx" } ], "docs": "Part of Fluid Functionalism — https://www.fluidfunctionalism.com", "categories": [ "components" ] }, { "name": "mobile-drawer-base", "type": "registry:ui", "title": "Mobile Drawer", "description": "Slide-in navigation drawer with scrim, focus trap, and scroll lock. Base UI flavor.", "dependencies": [ "@base-ui/react", "framer-motion" ], "registryDependencies": [ "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/surface-context.json", "https://www.fluidfunctionalism.com/r/surface-classes.json" ], "files": [ { "path": "registry/base/mobile-drawer.tsx", "type": "registry:ui", "target": "components/ui/mobile-drawer.tsx" } ], "docs": "Part of Fluid Functionalism — https://www.fluidfunctionalism.com", "categories": [ "components" ] }, { "name": "input-copy", "type": "registry:ui", "title": "Input Copy", "description": "Read-only input with a copy-to-clipboard button and animated check feedback. Supports optional label and shape context.", "dependencies": [ "framer-motion", "lucide-react" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/icon-context.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/tooltip.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/default/input-copy.tsx", "type": "registry:ui" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/input-copy.", "categories": [ "components" ] }, { "name": "input-group", "type": "registry:ui", "title": "Input Group", "description": "Grouped input fields with fluid hover highlighting, animated label transitions, optional icons, and error states.", "dependencies": [ "lucide-react", "@base-ui/react" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/icon-context.json", "https://www.fluidfunctionalism.com/r/use-fluid-hover.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/default/input-group.tsx", "type": "registry:ui" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/input-group.", "categories": [ "components" ] }, { "name": "input-message", "type": "registry:ui", "title": "Input Message", "description": "Chat-style message composer with auto-resizing textarea, drag-and-drop file attachments (PNG / JPEG / PDF), flexible left/right action slots, and a built-in send button on a Surface-2 substrate.", "dependencies": [ "framer-motion" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/icon-context.json", "https://www.fluidfunctionalism.com/r/surface-context.json", "https://www.fluidfunctionalism.com/r/surface-classes.json", "https://www.fluidfunctionalism.com/r/file-thumbnail.json", "https://www.fluidfunctionalism.com/r/use-fluid-hover.json", "https://www.fluidfunctionalism.com/r/button.json", "https://www.fluidfunctionalism.com/r/tooltip.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/default/input-message.tsx", "type": "registry:ui" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/input-message. Related block: queued-stack.", "categories": [ "components" ] }, { "name": "file-thumbnail", "type": "registry:ui", "title": "File Thumbnail", "description": "Read-only square preview of a File. Images render via object-cover; PDFs render their first page via pdfjs; a spinner shows while either resolves. Adapts its corner radius to the global shape setting.", "dependencies": [ "pdfjs-dist" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/shape-context.json" ], "files": [ { "path": "registry/default/file-thumbnail.tsx", "type": "registry:ui" } ], "docs": "Part of Fluid Functionalism — https://www.fluidfunctionalism.com", "categories": [ "components" ] }, { "name": "queued-stack", "type": "registry:block", "title": "Queued message stack", "description": "Sonner-style stack of queued composer messages: collapsed cards fan out on hover (tap on touch), drag to reorder, a gutter arrow counts the overflow, edit/remove per card, and a shared-layout morph into the sent message.", "dependencies": [ "framer-motion", "lucide-react" ], "registryDependencies": [ "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/icon-context.json", "https://www.fluidfunctionalism.com/r/tooltip.json", "https://www.fluidfunctionalism.com/r/file-thumbnail.json", "https://www.fluidfunctionalism.com/r/input-message.json" ], "files": [ { "path": "registry/blocks/queued-stack.tsx", "type": "registry:component", "target": "components/queued-stack.tsx" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/input-message.", "categories": [ "blocks" ] }, { "name": "chat-message", "type": "registry:ui", "title": "Chat Message", "description": "A single chat transcript entry with baked-in entrance and layout motion. Right-aligned accent bubble for the user, left-aligned muted bubble for the assistant, with optional file attachments. Adapts to the global shape setting.", "dependencies": [ "framer-motion" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/use-touch-primary.json", "https://www.fluidfunctionalism.com/r/file-thumbnail.json", "https://www.fluidfunctionalism.com/r/size-context.json" ], "files": [ { "path": "registry/default/chat-message.tsx", "type": "registry:ui" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/chat-message.", "categories": [ "components" ] }, { "name": "tabs-subtle", "type": "registry:ui", "title": "Tabs Subtle", "description": "Horizontal tab navigation with fluid hover, animated pill selection indicator, and fluid font-weight transitions. Radix flavor.", "dependencies": [ "@radix-ui/react-tabs", "framer-motion", "lucide-react" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/icon-context.json", "https://www.fluidfunctionalism.com/r/use-fluid-hover.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/radix/tabs-subtle.tsx", "type": "registry:ui", "target": "components/ui/tabs-subtle.tsx" } ], "css": { ".scrollbar-hide": { "-ms-overflow-style": "none", "scrollbar-width": "none" }, ".scrollbar-hide::-webkit-scrollbar": { "display": "none" } }, "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/tabs-subtle.", "categories": [ "components" ] }, { "name": "tabs-subtle-base", "type": "registry:ui", "title": "Tabs Subtle", "description": "Horizontal tab navigation with fluid hover, animated pill selection indicator, and fluid font-weight transitions. Base UI flavor.", "dependencies": [ "@base-ui/react", "framer-motion", "lucide-react" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/icon-context.json", "https://www.fluidfunctionalism.com/r/use-fluid-hover.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/base/tabs-subtle.tsx", "type": "registry:ui", "target": "components/ui/tabs-subtle.tsx" } ], "css": { ".scrollbar-hide": { "-ms-overflow-style": "none", "scrollbar-width": "none" }, ".scrollbar-hide::-webkit-scrollbar": { "display": "none" } }, "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/tabs-subtle.", "categories": [ "components" ] }, { "name": "switch", "type": "registry:ui", "title": "Switch", "description": "Animated toggle switch with spring-based thumb animation and fluid font-weight label transitions. Built on Radix UI Switch.", "dependencies": [ "framer-motion", "@radix-ui/react-switch" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/radix/switch.tsx", "type": "registry:ui", "target": "components/ui/switch.tsx" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/switch.", "categories": [ "components" ] }, { "name": "switch-base", "type": "registry:ui", "title": "Switch (Base UI)", "description": "Animated toggle switch with spring-based thumb animation and fluid font-weight label transitions. Base UI flavor.", "dependencies": [ "framer-motion", "@base-ui/react" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/base/switch.tsx", "type": "registry:ui", "target": "components/ui/switch.tsx" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/switch.", "categories": [ "components" ] }, { "name": "table", "type": "registry:ui", "title": "Table", "description": "Animated table with fluid hover row highlighting and fluid border transitions. Includes TableHeader, TableBody, TableRow, TableHead, and TableCell sub-components.", "dependencies": [ "framer-motion" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/use-fluid-hover.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/default/table.tsx", "type": "registry:ui" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/table.", "categories": [ "components" ] }, { "name": "card", "type": "registry:ui", "title": "Card", "description": "shadcn's compositional card (Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter) with the Fluid Functionalism layer: transparent substrate, weight-animated title, media/logo/feature/image slots, and a CardGroup that owns stacked, inline, and grid layouts plus 2-D fluid-hover highlighting.", "dependencies": [ "framer-motion" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/icon-context.json", "https://www.fluidfunctionalism.com/r/use-fluid-hover.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/default/card.tsx", "type": "registry:ui" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/card.", "categories": [ "components" ] }, { "name": "sidebar", "type": "registry:ui", "title": "Sidebar", "description": "Refined, composable app sidebar with offcanvas collapse, floating and inset variants, a mobile drawer, cookie-persisted state, keyboard shortcut, and fluid-hover menus with traveling selection, hover, and focus indicators. Radix flavor.", "dependencies": [ "@radix-ui/react-dialog", "framer-motion", "lucide-react", "class-variance-authority" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/surface-context.json", "https://www.fluidfunctionalism.com/r/surface-classes.json", "https://www.fluidfunctionalism.com/r/icon-context.json", "https://www.fluidfunctionalism.com/r/use-fluid-hover.json", "https://www.fluidfunctionalism.com/r/tooltip.json", "https://www.fluidfunctionalism.com/r/scroll-area.json", "https://www.fluidfunctionalism.com/r/button.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/radix/sidebar.tsx", "type": "registry:ui", "target": "components/ui/sidebar.tsx" }, { "path": "registry/default/sidebar-core.tsx", "type": "registry:ui", "target": "components/ui/sidebar-core.tsx" }, { "path": "registry/default/sidebar-menu.tsx", "type": "registry:ui", "target": "components/ui/sidebar-menu.tsx" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/sidebar. Related blocks: sidebar-app, sidebar-workspace-header, sidebar-user-footer.", "categories": [ "components" ] }, { "name": "sidebar-base", "type": "registry:ui", "title": "Sidebar", "description": "Refined, composable app sidebar with offcanvas collapse, floating and inset variants, a mobile drawer, cookie-persisted state, keyboard shortcut, and fluid-hover menus with traveling selection, hover, and focus indicators. Base UI flavor.", "dependencies": [ "@base-ui/react", "framer-motion", "lucide-react", "class-variance-authority" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/surface-context.json", "https://www.fluidfunctionalism.com/r/surface-classes.json", "https://www.fluidfunctionalism.com/r/icon-context.json", "https://www.fluidfunctionalism.com/r/use-fluid-hover.json", "https://www.fluidfunctionalism.com/r/base/tooltip.json", "https://www.fluidfunctionalism.com/r/base/scroll-area.json", "https://www.fluidfunctionalism.com/r/base/button.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/base/sidebar.tsx", "type": "registry:ui", "target": "components/ui/sidebar.tsx" }, { "path": "registry/default/sidebar-core.tsx", "type": "registry:ui", "target": "components/ui/sidebar-core.tsx" }, { "path": "registry/default/sidebar-menu.tsx", "type": "registry:ui", "target": "components/ui/sidebar-menu.tsx" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/sidebar. Related blocks: sidebar-app, sidebar-workspace-header, sidebar-user-footer.", "categories": [ "components" ] }, { "name": "sidebar-menu-grid", "type": "registry:lib", "title": "Sidebar Menu Grid", "description": "Shared popup geometry for sidebar-anchored dropdown menus: trigger width +10px shifted -4px, items on the rows' leading and text axes, trailing glyphs on the trigger chevron's axis.", "files": [ { "path": "registry/default/lib/sidebar-menu-grid.ts", "type": "registry:lib" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/sidebar.", "categories": [ "lib" ] }, { "name": "sidebar-workspace-header", "type": "registry:block", "title": "Sidebar Workspace Header", "description": "Workspace brand row for a sidebar header: 20px tile on the rows' leading axis, name pinned to the 32px text axis, trigger cross-fading into the tile's slot while the collapsed rail peeks, and a trigger-width switcher menu on the shared sidebar grid.", "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/icon-context.json", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/sidebar-menu-grid.json", "https://www.fluidfunctionalism.com/r/sidebar.json", "https://www.fluidfunctionalism.com/r/dropdown.json" ], "files": [ { "path": "registry/blocks/sidebar-workspace-header.tsx", "type": "registry:component", "target": "components/sidebar-app/workspace-header.tsx" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/sidebar.", "categories": [ "blocks" ] }, { "name": "sidebar-user-footer", "type": "registry:block", "title": "Sidebar User Footer", "description": "Footer identity row: a 20px avatar centred on the rows' leading icon axis, chevron on the trailing action axis, and an upward user menu on the shared sidebar grid so its rows align with the trigger exactly.", "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/icon-context.json", "https://www.fluidfunctionalism.com/r/sidebar-menu-grid.json", "https://www.fluidfunctionalism.com/r/sidebar.json", "https://www.fluidfunctionalism.com/r/dropdown.json" ], "files": [ { "path": "registry/blocks/sidebar-user-footer.tsx", "type": "registry:component", "target": "components/sidebar-app/user-footer.tsx" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/sidebar.", "categories": [ "blocks" ] }, { "name": "sidebar-search-field", "type": "registry:block", "title": "Sidebar Search Field", "description": "Header search on the menu rows' rhythm: leading icon on the rows' 16px axis, text on the 32px axis, and a hover-revealed keystroke chip at the trailing edge.", "registryDependencies": [ "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/icon-context.json", "https://www.fluidfunctionalism.com/r/sidebar.json" ], "files": [ { "path": "registry/blocks/sidebar-app/search-field.tsx", "type": "registry:component", "target": "components/sidebar-app/search-field.tsx" } ] }, { "name": "sidebar-inset-topbar", "type": "registry:block", "title": "Sidebar Inset Topbar", "description": "The main region's topbar: h-12 with the trigger that hides while the rail peeks and fades back in at its settled spot after a pin.", "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/sidebar.json" ], "files": [ { "path": "registry/blocks/sidebar-app/inset-topbar.tsx", "type": "registry:component", "target": "components/sidebar-app/inset-topbar.tsx" } ] }, { "name": "sidebar-app", "type": "registry:block", "title": "App Sidebar", "description": "A complete app shell: workspace header with the peek cross-fade, search on the menu rows' rhythm with a hover-revealed shortcut chip, collapsible sections with label actions and badges, a user footer, and an inset topbar whose trigger fades back in at its settled position after a pin.", "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/icon-context.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/sidebar.json", "https://www.fluidfunctionalism.com/r/tooltip.json", "https://www.fluidfunctionalism.com/r/dropdown.json", "https://www.fluidfunctionalism.com/r/sidebar-workspace-header.json", "https://www.fluidfunctionalism.com/r/sidebar-user-footer.json", "https://www.fluidfunctionalism.com/r/sidebar-search-field.json", "https://www.fluidfunctionalism.com/r/sidebar-inset-topbar.json" ], "files": [ { "path": "registry/blocks/sidebar-app/app-sidebar.tsx", "type": "registry:component", "target": "components/sidebar-app/app-sidebar.tsx" }, { "path": "registry/blocks/sidebar-app/nav-data.ts", "type": "registry:component", "target": "components/sidebar-app/nav-data.ts" }, { "path": "registry/blocks/sidebar-app/page.tsx", "type": "registry:page", "target": "app/sidebar/page.tsx" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/sidebar.", "categories": [ "blocks" ] }, { "name": "dialog-sidebar", "type": "registry:block", "title": "Settings Dialog (Sidebar in a Dialog)", "description": "A settings dialog: the xl Dialog as a canvas, a non-collapsing Sidebar of sections down its left edge, and a scrolling panel of controls — switches, selects, and an input group. Below the sm breakpoint a Select takes over navigation.", "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/icon-context.json", "https://www.fluidfunctionalism.com/r/dialog.json", "https://www.fluidfunctionalism.com/r/sidebar.json", "https://www.fluidfunctionalism.com/r/scroll-area.json", "https://www.fluidfunctionalism.com/r/button.json", "https://www.fluidfunctionalism.com/r/switch.json", "https://www.fluidfunctionalism.com/r/select.json", "https://www.fluidfunctionalism.com/r/input-group.json" ], "files": [ { "path": "registry/blocks/dialog-sidebar/settings-dialog.tsx", "type": "registry:component", "target": "components/dialog-sidebar/settings-dialog.tsx" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/dialog.", "categories": [ "blocks" ] }, { "name": "slider", "type": "registry:ui", "title": "Slider", "description": "Animated slider with spring-snapped thumb, step dots, range mode, and click-to-edit value display. Built on Radix UI Slider.", "dependencies": [ "framer-motion", "@radix-ui/react-slider" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/radix/slider.tsx", "type": "registry:ui", "target": "components/ui/slider.tsx" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/slider.", "categories": [ "components" ] }, { "name": "slider-base", "type": "registry:ui", "title": "Slider (Base UI)", "description": "Animated slider with spring-snapped thumb, step dots, range mode, and click-to-edit value display. Base UI flavor.", "dependencies": [ "framer-motion", "@base-ui/react" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/base/slider.tsx", "type": "registry:ui", "target": "components/ui/slider.tsx" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/slider.", "categories": [ "components" ] }, { "name": "tabs", "type": "registry:ui", "title": "Tabs", "description": "Segmented control tabs with sliding active indicator, fluid hover, and spring animations. Built on Radix UI Tabs.", "dependencies": [ "framer-motion", "@radix-ui/react-tabs", "lucide-react" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/icon-context.json", "https://www.fluidfunctionalism.com/r/use-fluid-hover.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/radix/tabs.tsx", "type": "registry:ui", "target": "components/ui/tabs.tsx" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/tabs.", "categories": [ "components" ] }, { "name": "tabs-base", "type": "registry:ui", "title": "Tabs (Base UI)", "description": "Segmented control tabs with sliding active indicator, fluid hover, and spring animations. Base UI flavor.", "dependencies": [ "framer-motion", "@base-ui/react", "lucide-react" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/icon-context.json", "https://www.fluidfunctionalism.com/r/use-fluid-hover.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/base/tabs.tsx", "type": "registry:ui", "target": "components/ui/tabs.tsx" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/tabs.", "categories": [ "components" ] }, { "name": "thinking-indicator", "type": "registry:ui", "title": "Thinking Indicator", "description": "Animated loading indicator with morphing SVG path (circle to infinity loop) and shimmer text rotation. Cycles through customizable status words.", "dependencies": [ "framer-motion" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/size-context.json" ], "files": [ { "path": "registry/default/thinking-indicator.tsx", "type": "registry:ui" } ], "css": { "@keyframes shimmer": { "0%": { "background-position": "0% 0" }, "100%": { "background-position": "100% 0" } }, ".shimmer-text": { "color": "transparent", "background": "linear-gradient(90deg, #a3a3a3 0%, #a3a3a3 35%, #525252 50%, #a3a3a3 65%, #a3a3a3 100%)", "background-size": "300% 100%", "background-clip": "text", "-webkit-background-clip": "text", "animation": "shimmer 1.5s ease-in-out infinite" } }, "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/thinking-indicator.", "categories": [ "components" ] }, { "name": "scroll-area", "type": "registry:ui", "title": "Scroll Area", "description": "Scroll container with a restyled overlay scrollbar that stays discoverable on hover and follows the shape system. Falls back to native overflow scrolling on touch-primary devices. Built on Radix UI Scroll Area; adapted from Lina (https://lina.sameer.sh).", "dependencies": [ "@radix-ui/react-scroll-area" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/use-touch-primary.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/radix/scroll-area.tsx", "target": "components/ui/scroll-area.tsx", "type": "registry:ui" } ], "css": { "@property --sf-start": { "syntax": "\"\"", "inherits": "false", "initial-value": "1" }, "@property --sf-end": { "syntax": "\"\"", "inherits": "false", "initial-value": "1" }, "@keyframes sf-reveal-start": { "from": { "--sf-start": "1" }, "to": { "--sf-start": "0" } }, "@keyframes sf-reveal-end": { "from": { "--sf-end": "0" }, "to": { "--sf-end": "1" } }, ".scroll-fade, .scroll-fade-x": { "--scroll-fade-size": "48px" }, ".scroll-fade": { "-webkit-mask-image": "linear-gradient(to bottom, transparent 0, #000 var(--scroll-fade-size), #000 calc(100% - var(--scroll-fade-size)), transparent 100%)", "mask-image": "linear-gradient(to bottom, transparent 0, #000 var(--scroll-fade-size), #000 calc(100% - var(--scroll-fade-size)), transparent 100%)" }, ".scroll-fade-x": { "-webkit-mask-image": "linear-gradient(to right, transparent 0, #000 var(--scroll-fade-size), #000 calc(100% - var(--scroll-fade-size)), transparent 100%)", "mask-image": "linear-gradient(to right, transparent 0, #000 var(--scroll-fade-size), #000 calc(100% - var(--scroll-fade-size)), transparent 100%)" }, "@keyframes sf-divider-start": { "from": { "opacity": "0" }, "to": { "opacity": "1" } }, "@keyframes sf-divider-end": { "from": { "opacity": "1" }, "to": { "opacity": "0" } }, "@supports (timeline-scope: --sf)": { ".scroll-divider": { "position": "relative", "timeline-scope": "--sf-scroller", "--scroll-divider-size": "48px" }, ".scroll-divider .scroll-fade": { "scroll-timeline-name": "--sf-scroller" }, ".scroll-divider::before, .scroll-divider::after": { "content": "\"\"", "position": "absolute", "left": "var(--scroll-divider-inset, 0px)", "right": "var(--scroll-divider-inset, 0px)", "height": "1px", "background-color": "var(--border)", "pointer-events": "none", "z-index": "1", "opacity": "0" }, ".scroll-divider::before": { "top": "0", "animation": "sf-divider-start both linear", "animation-timeline": "--sf-scroller", "animation-range": "0 var(--scroll-divider-size)" }, ".scroll-divider:first-child::before": { "content": "none" }, ".scroll-divider::after": { "bottom": "0", "animation": "sf-divider-end both linear", "animation-timeline": "--sf-scroller", "animation-range": "calc(100% - var(--scroll-divider-size)) 100%" } }, "@supports (animation-timeline: scroll())": { ".scroll-fade": { "mask-image": "linear-gradient(to bottom, rgba(0, 0, 0, var(--sf-start)) 0, #000 var(--scroll-fade-size), #000 calc(100% - var(--scroll-fade-size)), rgba(0, 0, 0, var(--sf-end)) 100%)", "-webkit-mask-image": "linear-gradient(to bottom, rgba(0, 0, 0, var(--sf-start)) 0, #000 var(--scroll-fade-size), #000 calc(100% - var(--scroll-fade-size)), rgba(0, 0, 0, var(--sf-end)) 100%)", "animation": "sf-reveal-start both linear, sf-reveal-end both linear", "animation-timeline": "scroll(self), scroll(self)", "animation-range-start": "0, calc(100% - var(--scroll-fade-size))", "animation-range-end": "var(--scroll-fade-size), 100%" }, ".scroll-fade-x": { "mask-image": "linear-gradient(to right, rgba(0, 0, 0, var(--sf-start)) 0, #000 var(--scroll-fade-size), #000 calc(100% - var(--scroll-fade-size)), rgba(0, 0, 0, var(--sf-end)) 100%)", "-webkit-mask-image": "linear-gradient(to right, rgba(0, 0, 0, var(--sf-start)) 0, #000 var(--scroll-fade-size), #000 calc(100% - var(--scroll-fade-size)), rgba(0, 0, 0, var(--sf-end)) 100%)", "animation": "sf-reveal-start both linear, sf-reveal-end both linear", "animation-timeline": "scroll(self inline), scroll(self inline)", "animation-range-start": "0, calc(100% - var(--scroll-fade-size))", "animation-range-end": "var(--scroll-fade-size), 100%" } }, "@media (pointer: fine)": { "*": { "scrollbar-width": "thin", "scrollbar-color": "rgb(var(--overlay) / 0.08) transparent" }, "::-webkit-scrollbar": { "width": "10px", "height": "10px" }, "::-webkit-scrollbar-track, ::-webkit-scrollbar-corner": { "background": "transparent" }, "::-webkit-scrollbar-thumb": { "background-color": "rgb(var(--overlay) / 0.08)", "border": "3px solid transparent", "background-clip": "content-box", "border-radius": "9999px" }, "::-webkit-scrollbar-thumb:vertical": { "border-left-width": "1px", "border-right-width": "5px" }, "::-webkit-scrollbar-thumb:horizontal": { "border-top-width": "1px", "border-bottom-width": "5px" }, "::-webkit-scrollbar-thumb:hover": { "background-color": "rgb(var(--overlay) / 0.12)" }, "::-webkit-scrollbar-thumb:active": { "background-color": "rgb(var(--overlay) / 0.16)" } } }, "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/scrollbars.", "categories": [ "components" ] }, { "name": "scroll-area-base", "type": "registry:ui", "title": "Scroll Area (Base UI)", "description": "Scroll container with a restyled overlay scrollbar that stays discoverable on hover and follows the shape system. Falls back to native overflow scrolling on touch-primary devices. Base UI flavor; adapted from Lina (https://lina.sameer.sh).", "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/use-touch-primary.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/base/scroll-area.tsx", "target": "components/ui/scroll-area.tsx", "type": "registry:ui" } ], "css": { "@property --sf-start": { "syntax": "\"\"", "inherits": "false", "initial-value": "1" }, "@property --sf-end": { "syntax": "\"\"", "inherits": "false", "initial-value": "1" }, "@keyframes sf-reveal-start": { "from": { "--sf-start": "1" }, "to": { "--sf-start": "0" } }, "@keyframes sf-reveal-end": { "from": { "--sf-end": "0" }, "to": { "--sf-end": "1" } }, ".scroll-fade, .scroll-fade-x": { "--scroll-fade-size": "48px" }, ".scroll-fade": { "-webkit-mask-image": "linear-gradient(to bottom, transparent 0, #000 var(--scroll-fade-size), #000 calc(100% - var(--scroll-fade-size)), transparent 100%)", "mask-image": "linear-gradient(to bottom, transparent 0, #000 var(--scroll-fade-size), #000 calc(100% - var(--scroll-fade-size)), transparent 100%)" }, ".scroll-fade-x": { "-webkit-mask-image": "linear-gradient(to right, transparent 0, #000 var(--scroll-fade-size), #000 calc(100% - var(--scroll-fade-size)), transparent 100%)", "mask-image": "linear-gradient(to right, transparent 0, #000 var(--scroll-fade-size), #000 calc(100% - var(--scroll-fade-size)), transparent 100%)" }, "@keyframes sf-divider-start": { "from": { "opacity": "0" }, "to": { "opacity": "1" } }, "@keyframes sf-divider-end": { "from": { "opacity": "1" }, "to": { "opacity": "0" } }, "@supports (timeline-scope: --sf)": { ".scroll-divider": { "position": "relative", "timeline-scope": "--sf-scroller", "--scroll-divider-size": "48px" }, ".scroll-divider .scroll-fade": { "scroll-timeline-name": "--sf-scroller" }, ".scroll-divider::before, .scroll-divider::after": { "content": "\"\"", "position": "absolute", "left": "var(--scroll-divider-inset, 0px)", "right": "var(--scroll-divider-inset, 0px)", "height": "1px", "background-color": "var(--border)", "pointer-events": "none", "z-index": "1", "opacity": "0" }, ".scroll-divider::before": { "top": "0", "animation": "sf-divider-start both linear", "animation-timeline": "--sf-scroller", "animation-range": "0 var(--scroll-divider-size)" }, ".scroll-divider:first-child::before": { "content": "none" }, ".scroll-divider::after": { "bottom": "0", "animation": "sf-divider-end both linear", "animation-timeline": "--sf-scroller", "animation-range": "calc(100% - var(--scroll-divider-size)) 100%" } }, "@supports (animation-timeline: scroll())": { ".scroll-fade": { "mask-image": "linear-gradient(to bottom, rgba(0, 0, 0, var(--sf-start)) 0, #000 var(--scroll-fade-size), #000 calc(100% - var(--scroll-fade-size)), rgba(0, 0, 0, var(--sf-end)) 100%)", "-webkit-mask-image": "linear-gradient(to bottom, rgba(0, 0, 0, var(--sf-start)) 0, #000 var(--scroll-fade-size), #000 calc(100% - var(--scroll-fade-size)), rgba(0, 0, 0, var(--sf-end)) 100%)", "animation": "sf-reveal-start both linear, sf-reveal-end both linear", "animation-timeline": "scroll(self), scroll(self)", "animation-range-start": "0, calc(100% - var(--scroll-fade-size))", "animation-range-end": "var(--scroll-fade-size), 100%" }, ".scroll-fade-x": { "mask-image": "linear-gradient(to right, rgba(0, 0, 0, var(--sf-start)) 0, #000 var(--scroll-fade-size), #000 calc(100% - var(--scroll-fade-size)), rgba(0, 0, 0, var(--sf-end)) 100%)", "-webkit-mask-image": "linear-gradient(to right, rgba(0, 0, 0, var(--sf-start)) 0, #000 var(--scroll-fade-size), #000 calc(100% - var(--scroll-fade-size)), rgba(0, 0, 0, var(--sf-end)) 100%)", "animation": "sf-reveal-start both linear, sf-reveal-end both linear", "animation-timeline": "scroll(self inline), scroll(self inline)", "animation-range-start": "0, calc(100% - var(--scroll-fade-size))", "animation-range-end": "var(--scroll-fade-size), 100%" } }, "@media (pointer: fine)": { "*": { "scrollbar-width": "thin", "scrollbar-color": "rgb(var(--overlay) / 0.08) transparent" }, "::-webkit-scrollbar": { "width": "10px", "height": "10px" }, "::-webkit-scrollbar-track, ::-webkit-scrollbar-corner": { "background": "transparent" }, "::-webkit-scrollbar-thumb": { "background-color": "rgb(var(--overlay) / 0.08)", "border": "3px solid transparent", "background-clip": "content-box", "border-radius": "9999px" }, "::-webkit-scrollbar-thumb:vertical": { "border-left-width": "1px", "border-right-width": "5px" }, "::-webkit-scrollbar-thumb:horizontal": { "border-top-width": "1px", "border-bottom-width": "5px" }, "::-webkit-scrollbar-thumb:hover": { "background-color": "rgb(var(--overlay) / 0.12)" }, "::-webkit-scrollbar-thumb:active": { "background-color": "rgb(var(--overlay) / 0.16)" } } }, "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/scrollbars.", "categories": [ "components" ] }, { "name": "select", "type": "registry:ui", "title": "Select", "description": "Animated select menu with collision-aware positioning, typeahead, fluid hover, spring-animated popover, and animated checkmark. Radix flavor.", "dependencies": [ "@radix-ui/react-select", "framer-motion", "class-variance-authority", "lucide-react" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/surface-context.json", "https://www.fluidfunctionalism.com/r/surface-classes.json", "https://www.fluidfunctionalism.com/r/icon-context.json", "https://www.fluidfunctionalism.com/r/use-fluid-hover.json", "https://www.fluidfunctionalism.com/r/elevated.json", "https://www.fluidfunctionalism.com/r/scroll-area.json", "https://www.fluidfunctionalism.com/r/use-keyboard-nav-gate.json", "https://www.fluidfunctionalism.com/r/popup.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/radix/select.tsx", "type": "registry:ui", "target": "components/ui/select.tsx" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/select.", "categories": [ "components" ] }, { "name": "select-base", "type": "registry:ui", "title": "Select", "description": "Animated select menu with collision-aware positioning, typeahead, fluid hover, spring-animated popover, and animated checkmark. Base UI flavor.", "dependencies": [ "@base-ui/react", "framer-motion", "class-variance-authority", "lucide-react" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/surface-context.json", "https://www.fluidfunctionalism.com/r/surface-classes.json", "https://www.fluidfunctionalism.com/r/icon-context.json", "https://www.fluidfunctionalism.com/r/use-fluid-hover.json", "https://www.fluidfunctionalism.com/r/elevated.json", "https://www.fluidfunctionalism.com/r/base/scroll-area.json", "https://www.fluidfunctionalism.com/r/use-keyboard-nav-gate.json", "https://www.fluidfunctionalism.com/r/popup.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/base/select.tsx", "type": "registry:ui", "target": "components/ui/select.tsx" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/select.", "categories": [ "components" ] }, { "name": "combobox", "type": "registry:ui", "title": "Combobox", "description": "Type-to-filter combobox with single or multiple (chips, merged selection backgrounds) selection: a text field that filters a list as you type, with keyboard highlight, fluid hover, spring-animated popover, animated checkmark, and clear/chevron controls. Optional create-from-query row (onCreate) and hideSelected for chips fields. Radix flavor (Popover + hand-rolled listbox).", "dependencies": [ "@radix-ui/react-popover", "framer-motion", "class-variance-authority", "lucide-react" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/surface-context.json", "https://www.fluidfunctionalism.com/r/surface-classes.json", "https://www.fluidfunctionalism.com/r/icon-context.json", "https://www.fluidfunctionalism.com/r/use-fluid-hover.json", "https://www.fluidfunctionalism.com/r/use-merge-split.json", "https://www.fluidfunctionalism.com/r/elevated.json", "https://www.fluidfunctionalism.com/r/scroll-area.json", "https://www.fluidfunctionalism.com/r/use-keyboard-nav-gate.json", "https://www.fluidfunctionalism.com/r/popup.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/radix/combobox.tsx", "type": "registry:ui", "target": "components/ui/combobox.tsx" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/combobox.", "categories": [ "components" ] }, { "name": "combobox-base", "type": "registry:ui", "title": "Combobox", "description": "Type-to-filter combobox with single or multiple (chips, merged selection backgrounds) selection: a text field that filters a list as you type, with keyboard highlight, fluid hover, spring-animated popover, animated checkmark, and clear/chevron controls. Optional create-from-query row (onCreate) and hideSelected for chips fields. Base UI flavor.", "dependencies": [ "@base-ui/react", "framer-motion", "class-variance-authority", "lucide-react" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/surface-context.json", "https://www.fluidfunctionalism.com/r/surface-classes.json", "https://www.fluidfunctionalism.com/r/icon-context.json", "https://www.fluidfunctionalism.com/r/use-fluid-hover.json", "https://www.fluidfunctionalism.com/r/use-merge-split.json", "https://www.fluidfunctionalism.com/r/elevated.json", "https://www.fluidfunctionalism.com/r/base/scroll-area.json", "https://www.fluidfunctionalism.com/r/use-keyboard-nav-gate.json", "https://www.fluidfunctionalism.com/r/popup.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/base/combobox.tsx", "type": "registry:ui", "target": "components/ui/combobox.tsx" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/combobox.", "categories": [ "components" ] }, { "name": "command-menu", "type": "registry:ui", "title": "Command Menu", "description": "Search field over a list of actions: type to filter, arrows to move the fluid hover highlight, Enter to run. Grouped rows with icons, descriptions, and shortcut caps; suggestions listed first while nothing is typed; subtle tabs or a borderless filter bar under the field; and a dialog shell opened by a global shortcut (default ⌘K / Ctrl+K). The list needs no primitive; the dialog is the library's Dialog in either flavor.", "dependencies": [ "framer-motion", "lucide-react" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/surface-context.json", "https://www.fluidfunctionalism.com/r/surface-classes.json", "https://www.fluidfunctionalism.com/r/icon-context.json", "https://www.fluidfunctionalism.com/r/use-fluid-hover.json", "https://www.fluidfunctionalism.com/r/popup.json", "https://www.fluidfunctionalism.com/r/scroll-area.json", "https://www.fluidfunctionalism.com/r/dialog.json", "https://www.fluidfunctionalism.com/r/tabs-subtle.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/default/command-menu.tsx", "type": "registry:ui" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/command-menu.", "categories": [ "components" ] }, { "name": "tooltip", "type": "registry:ui", "title": "Tooltip", "description": "Floating tooltip with spring-based animations, configurable placement, and rich content support.", "dependencies": [ "framer-motion", "@radix-ui/react-tooltip" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/shape-context.json" ], "files": [ { "path": "registry/radix/tooltip.tsx", "target": "components/ui/tooltip.tsx", "type": "registry:ui" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/tooltip.", "categories": [ "components" ] }, { "name": "tooltip-base", "type": "registry:ui", "title": "Tooltip (Base UI)", "description": "Floating tooltip with spring-based animations, configurable placement, and rich content support. Base UI flavor.", "dependencies": [ "framer-motion", "@base-ui/react" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/shape-context.json" ], "files": [ { "path": "registry/base/tooltip.tsx", "target": "components/ui/tooltip.tsx", "type": "registry:ui" } ], "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/tooltip.", "categories": [ "components" ] }, { "name": "thinking-steps", "type": "registry:ui", "title": "Thinking Steps", "description": "Collapsible AI reasoning steps with animated expand/collapse, per-step icons, sources, and nested details. Radix flavor.", "dependencies": [ "@radix-ui/react-collapsible", "framer-motion", "lucide-react" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/icon-context.json", "https://www.fluidfunctionalism.com/r/badge.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/radix/thinking-steps.tsx", "type": "registry:ui", "target": "components/ui/thinking-steps.tsx" } ], "css": { "@keyframes shimmer": { "0%": { "background-position": "0% 0" }, "100%": { "background-position": "100% 0" } }, ".shimmer-text": { "color": "transparent", "background": "linear-gradient(90deg, #a3a3a3 0%, #a3a3a3 35%, #525252 50%, #a3a3a3 65%, #a3a3a3 100%)", "background-size": "300% 100%", "background-clip": "text", "-webkit-background-clip": "text", "animation": "shimmer 1.5s ease-in-out infinite" } }, "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/thinking-steps.", "categories": [ "components" ] }, { "name": "thinking-steps-base", "type": "registry:ui", "title": "Thinking Steps", "description": "Collapsible AI reasoning steps with animated expand/collapse, per-step icons, sources, and nested details. Base UI flavor.", "dependencies": [ "@base-ui/react", "framer-motion", "lucide-react" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/icon-context.json", "https://www.fluidfunctionalism.com/r/badge.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/base/thinking-steps.tsx", "type": "registry:ui", "target": "components/ui/thinking-steps.tsx" } ], "css": { "@keyframes shimmer": { "0%": { "background-position": "0% 0" }, "100%": { "background-position": "100% 0" } }, ".shimmer-text": { "color": "transparent", "background": "linear-gradient(90deg, #a3a3a3 0%, #a3a3a3 35%, #525252 50%, #a3a3a3 65%, #a3a3a3 100%)", "background-size": "300% 100%", "background-clip": "text", "-webkit-background-clip": "text", "animation": "shimmer 1.5s ease-in-out infinite" } }, "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/thinking-steps.", "categories": [ "components" ] }, { "name": "color-picker", "type": "registry:ui", "title": "Color Picker", "description": "Color picker with HEX, RGB, HSL, and OKLCH formats, alpha channel, optional swatches, and a popover trigger. Built on Base UI's Popover, Menu, and NumberField primitives with native EyeDropper support.", "dependencies": [ "@base-ui/react", "framer-motion" ], "registryDependencies": [ "utils", "https://www.fluidfunctionalism.com/r/springs.json", "https://www.fluidfunctionalism.com/r/font-weight.json", "https://www.fluidfunctionalism.com/r/shape-context.json", "https://www.fluidfunctionalism.com/r/surface-context.json", "https://www.fluidfunctionalism.com/r/surface-classes.json", "https://www.fluidfunctionalism.com/r/icon-context.json", "https://www.fluidfunctionalism.com/r/use-fluid-hover.json", "https://www.fluidfunctionalism.com/r/elevated.json", "https://www.fluidfunctionalism.com/r/slider.json", "https://www.fluidfunctionalism.com/r/size-context.json", "https://www.fluidfunctionalism.com/r/tooltip.json", "https://www.fluidfunctionalism.com/r/tokens.json" ], "files": [ { "path": "registry/default/color-picker.tsx", "type": "registry:ui" } ], "cssVars": { "light": { "checker-a": "#bbbbbb", "checker-b": "#ffffff" }, "dark": { "checker-a": "#1f1f1f", "checker-b": "#2a2a2a" } }, "docs": "Docs & live playground: https://www.fluidfunctionalism.com/docs/color-picker.", "categories": [ "components" ] } ] }