Components

Every item in the foldcn registry — copy-paste source built on @foldkit/ui with Foldkit TEA and Tailwind CSS.

The foundation: theme variables, base CSS, and core dependencies.

• foldcn base style — The foldcn design system base: CSS variables, Tailwind v4 theme mapping, base CSS and core dependencies. Install this first.

Utilities and helpers used across the registry.

• cn — Class name merger built on cn. Used by every foldcn component.
• Code Block — Syntax-highlighted code block with file header and copy button, powered by @tanstack/highlight.
• Icons — Lucide icons rendered as Foldkit virtual DOM via the h builder. Includes a generic renderer for any lucide icon plus a set of commonly used icons.

The styled primitives: stateless helpers and stateful submodels.

• Button — Styled button with variants and sizes, built on the @foldkit/ui Button helper.
• Input — Styled text input with label and description, built on the @foldkit/ui Input helper.
• Textarea — Styled multi-line textarea with label and description, built on the @foldkit/ui Textarea helper.
• Select — Styled custom dropdown select (single/multi) backed by the @foldkit/ui Listbox submodel — a real submodel you embed via h.submodel. For a plain native <select> helper, use native-select.
• Native Select — Styled native <select> with label, chevron and description, built on the @foldkit/ui Select helper. Stateless; for a searchable dropdown submodel use select.
• Carousel — Embla-powered carousel with orientation, slide basis/spacing, loop and align options, plugins, keyboard, and programmatic control.
• Card — Composable card primitives — Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter. A pure layout primitive.
• Checkbox — Styled checkbox with label, indeterminate state and description, built on the @foldkit/ui Checkbox helper.
• Switch — Styled switch toggle with label and description, built on the @foldkit/ui Switch helper.
• Fieldset — Styled fieldset with legend and description, built on the @foldkit/ui Fieldset helper.
• Nav — Styled navigation landmark with current-page marking, built on the @foldkit/ui Nav helper.
• Dialog — Composable modal dialog — Dialog.header, Dialog.title, Dialog.description, Dialog.footer, Dialog.closeButton. Built on the @foldkit/ui Dialog submodel.
• Popover — Composable floating panel — Popover.header, Popover.title, Popover.description. Built on the @foldkit/ui Popover submodel.
• Tooltip — Styled tooltip with trigger and hover/focus reveal, built on the @foldkit/ui Tooltip submodel.
• Menu — Styled dropdown menu with keyboard navigation and typeahead, built on the @foldkit/ui Menu submodel.
• Listbox — Styled custom select with single and multi selection, built on the @foldkit/ui Listbox submodel.
• Combobox — Styled autocomplete input with filtering, built on the @foldkit/ui Combobox submodel.
• Tabs — Composable tabbed interface — Tabs.list, Tabs.trigger, Tabs.content. Built on the @foldkit/ui Tabs submodel.
• Radio Group — Styled radio options with roving tabindex, built on the @foldkit/ui RadioGroup submodel.
• Slider — Styled numeric range slider, built on the @foldkit/ui Slider submodel.
• Calendar — Styled inline calendar grid with locale support, built on the @foldkit/ui Calendar submodel.
• Date Picker — Styled date picker combining trigger, popover and calendar, built on the @foldkit/ui DatePicker submodel.
• Toast — Stacked toast notifications — measured-height choreography matching Base UI: uniform collapsed stack with peek layers, hover-to-expand spread, limited visible entries, enter/exit motion, auto-dismiss and hover-pause — built on the @foldkit/ui Toast submodel (embed via h.submodel). ⚠ No swipe-to-dismiss.
• Animation — Styled enter/leave animation coordinator, built on the @foldkit/ui Animation submodel.
• Drag and Drop — Styled sortable lists and cross-container movement, built on the @foldkit/ui DragAndDrop submodel.
• File Drop — Styled file input with drag-and-drop support, built on the @foldkit/ui FileDrop submodel.
• Virtual List — Styled virtualized list for large datasets, built on the @foldkit/ui VirtualList submodel.
• Badge — Styled inline badge with variant support, built as a themed span.
• Skeleton — Styled pulsing placeholder block.
• Separator — Styled divider with horizontal/vertical orientation.
• Kbd — Styled keyboard key(s) with grouping support.
• Avatar — Styled avatar with image, fallback, badge and grouping. Note: no automatic image error fallback — drive the swap from your own state.
• Aspect Ratio — Styled aspect-ratio box wrapper.
• Alert — Styled alert with title and description sub-builders.
• Empty — Styled empty state with header, media, title, description and content.
• Spinner — Styled loading spinner (Loader2 icon in a status wrapper).
• Marker — Styled marker with icon and content sub-builders and variant support.
• Item — Styled flexible list row with media, title, description, actions, header and footer.
• Direction — Text-direction wrapper (ltr/rtl) carrying a data-slot surface.
• Label — Styled form label with optional for association.
• Progress — Styled progress bar with value-driven indicator. Note: no animated indeterminate mode (undefined renders an empty track).
• Questionnaire — Step-by-step questionnaire with progress, single/multiple choices, freeform input, validation and skip. Data-driven Foldkit API — questions are declared on init. Stateful submodel; no @foldkit/ui primitive yet, so the flow is authored in place (see gaps).
• Alert Dialog — Destructive-confirm modal dialog, built on the @foldkit/ui Dialog submodel.
• Sheet — Edge-anchored modal panel (top/bottom/left/right), built on the @foldkit/ui Dialog submodel.
• Drawer — Directional edge drawer with handle drag-to-dismiss, built on the @foldkit/ui Dialog submodel.
• Hover Card — Card-styled floating panel with hover-intent open/close delays (200ms open, 300ms grace), built from @foldkit/ui HoverIntent and Popover.
• Accordion — Vertical stack of collapsible sections with single or multi-open semantics, built on the @foldkit/ui Disclosure helper.
• Collapsible — Stateful single-section collapsible panel, built on the @foldkit/ui Disclosure helper.
• Context Menu — Menu styled for right-click use, built on the @foldkit/ui Menu submodel. ⚠ Opens on activation at a fixed anchor, not at the pointer — foldkit has no pointer-position anchor yet.
• Menubar — Horizontal bar of menus built on the @foldkit/ui Menu submodel. ⚠ Each trigger is an independent menu — no cross-menu arrow-key traversal yet.
• Button Group — Connected run of buttons forming a single segmented control, built on the @foldkit/ui Button helper.
• Input Group — Shared bordered box with text/icon add-ons around a connected input, built on the @foldkit/ui Input helper.
• Toggle — Stateful two-state toggle button marked with aria-pressed and data-state.
• Toggle Group — Stateful group of toggles with shared single or multiple selection.
• Input OTP — Row of single-character slots backed by one combined value.
• Breadcrumb — Presentational breadcrumb landmark with list, link, page and separator builders.
• Pagination — Presentational pagination landmark with content, item, link (button-styled anchors with active page marking), previous, next and ellipsis builders.
• Navigation Menu — Top-level navigation bar with delayed hover/focus dropdowns and trigger/content builders.
• Sidebar — Collapsible app shell — SidebarProvider.view submodel (offcanvas/icon/none × sidebar/floating/inset, mobile sheet, ⌘B shortcut, rail) with menu/badge/skeleton/sub-menu/input primitives.
• Table — Presentational table with header, body, footer, row, head, cell and caption builders.
• Command — Command palette with fuzzy search, ranked groups, keyboard and pointer selection, and a composed CommandDialog.
• Resizable — Resizable panel group with pointer-drag and keyboard separators, N panels, min/max constraints, and collapsible panels.
• Scroll Area — Styled overlay scrollbars over a native-scroll viewport, with draggable thumb and track-click jumping.
• Attachment — Styled attachment with media, title, description, actions, trigger and group. A pure layout primitive.
• Bubble — Styled chat bubble with group, content and reactions sub-builders, variants and start/end alignment.
• Message Scroller — Chat transcript scroller with auto-follow at the live edge, anchored turns, default open position, and scroll-to-end/start controls, as a Foldkit submodel.

Composed pages that combine primitives into ready-to-use sections.

• Login Form — A login page with email and password fields, error state and submit button. Composed from foldcn primitives.
• Settings Page — A settings page with profile and preferences sections. Composed from foldcn primitives.
• Data Table — A searchable table with styled rows and cells. Composed from foldcn primitives.