Skip to content
Junco
Junco
Examples

Components

32 components so far, each usable as semantic classes, utilities, copy-in source or an installed package.

Actions

ButtonTriggers an action. Five variants, four sizes, loading state and asChild for links.

Forms

InputA single-line text field with sizes and an invalid state.
TextareaA multi-line text field that can grow with its content.
SelectPick one option from a list, with full keyboard support.
CheckboxA yes/no choice, including an indeterminate state.
SwitchAn on/off toggle for settings that apply right away.
Radio groupPick exactly one option from a small set.
FieldLabel, control, help text and error, wired together for you.
LabelA caption for a form control, with a required marker.
FormReact Hook Form + Zod, with labels, help text and errors wired for you.

Overlays

DialogA modal window for focused tasks, with focus trapping and Esc to close.
SheetA panel that slides in from an edge. A swipeable bottom sheet on phones.
PopoverRich content anchored to a trigger, for small bits of extra UI.
Dropdown menuA list of actions with checkbox, radio and nested items.
CommandA searchable command palette, opened with ⌘K.

Data

Data tableSorting, selection, search, column visibility and paging on TanStack Table.
StatA key number with its change and a sparkline. Direction never by color alone.
Empty stateSay why there's nothing here, and offer the next step.

Layout

CardA bordered container with header, action, content and footer parts.
AccordionStacked sections that expand and collapse. Good for FAQs.

Display

BadgeA short label for status or counts. Never color alone.
AvatarA person's picture with initials as the fallback.
KbdShows a keyboard key or shortcut.
SeparatorA thin line between content, horizontal or vertical.

Feedback

TooltipA short hint on hover and keyboard focus, with an optional shortcut.
SpinnerAn accessible loading indicator.
SkeletonA placeholder shape while content loads.
ToastBrief notifications from anywhere with toast(), including promises and actions.

Navigation

TabsSwitch between related views. Line and segmented styles.
PaginationMove between pages of results, with a fixed width and real links.
BreadcrumbWhere a page sits in the hierarchy, with links back up.

Theming

ThemeProviderLight, dark and system themes plus the global motion switch.