Components

Every fandry-* primitive, with a live example, its props, and the code to use it.

Breadcrumb

A navigation trail of ancestor pages — pair with fandry-breadcrumb-item for each crumb.

Breadcrumb Item

A single crumb inside fandry-breadcrumb, with a current-page state.

Card

A bordered, padded surface for grouping related content.

Divider

A horizontal or vertical rule for separating content.

Pagination

Previous/next navigation between pages. Links between two adjacent pages, or Previous / Page N of M / Next buttons for paging a collection.

Sidebar

A vertical navigation rail — pair with fandry-sidebar-item for links.

Sidebar Item

A single navigation row for fandry-sidebar, with an active/current-page state.

Tabs

A set of tabs that switch between panels — pair with fandry-tab and fandry-tab-panel.

Tab

A single tab inside fandry-tabs.

Tab Panel

The content shown for one fandry-tab.

Heading

A semantically-leveled heading, sized off the shared type scale.

Icon

A sizing/color frame around a slotted glyph — brings no icon set of its own.

Label

The text of a form label, with an optional required indicator. Put it inside your own <label>, or in the label slot of a field.

Text

Body text — pick the rendered tag and size independently.

Button

A native button with default/secondary/ghost variants and three sizes.

Checkbox

A checkbox with a built-in label and indeterminate support.

Combobox

A searchable select — type to narrow the options, then pick one.

Input

A text input with a label, help text, and prefix/suffix slots.

Link

Anchor styling with default/muted variants and a disabled state.

Radio

A single radio input — pair with fandry-radio-group for the roving-tabindex group.

Radio Group

A roving-tabindex container for a set of fandry-radio buttons.

Select

A custom listbox-style select, with optional grouped options.

Switch

A toggle switch with a built-in label.

Textarea

A multi-line text input with a label and help text.

Alert

An inline banner for a status message, with an optional title.

Badge

A small status/label pill.

Progress

A determinate or indeterminate progress bar.

Skeleton

A loading placeholder shaped like the content it stands in for.

Spinner

A loading spinner in three sizes, with optional text beside it.

Loading Overlay

Covers the page, or one panel, while it is busy. A backdrop blocks the pointer and the keyboard, and a panel shows a spinner and a label.

Toast

An auto-dismissing notification — pair with fandry-toast-viewport for placement.

Toast Viewport

A fixed or contained stacking region that positions fandry-toast.

Tooltip

A hover/focus description bubble for a slotted trigger.

Avatar

A circular avatar with an image and initials fallback.

Command

A command palette — a modal search box over a list of actions. Generic: it reports the chosen value and leaves what it does (and the Cmd+K/Ctrl+K shortcut) to you.

Dialog

A modal panel over a backdrop, with Escape/backdrop-click to close and focus returned to the trigger.

Menu

A listbox-style menu — composes with fandry-popover for its own trigger and positioning.

Menu Item

A single selectable row inside fandry-menu.

Popover

An anchored floating panel — owns positioning, not the trigger or content. The panel is never narrower than its trigger; set display: block on the popover for a trigger that fills its row.

Table

A data table with sorting, pagination, selection, and filtering — wraps @tanstack/table-core.

Lookup

Find and pick a record — one by default, or several with multiple. It fetches nothing itself: it reports what was typed, you run the query and hand the records back.