Component Catalog

This catalog is generated from src/lib/showcase/registry.ts in source order. The registry drives category order and previous/next navigation.

Source count at generation: 46 entries. Every slug is unique.

NameSlugCategoryPurposeLocal guideLive demo
AccordionaccordionDisclosure & LayoutOrganizes content into collapsible sectionsGuideOpen
CollapsiblecollapsibleDisclosure & LayoutExpands and collapses a single content regionGuideOpen
TabstabsDisclosure & LayoutSwitches between mutually exclusive panelsGuideOpen
Aspect Ratioaspect-ratioDisclosure & LayoutConstrains content to a fixed width-to-height ratioGuideOpen
Scroll Areascroll-areaDisclosure & LayoutCustom scrollbars that behave like native onesGuideOpen
SeparatorseparatorDisclosure & LayoutSemantic divider between content groupsGuideOpen
ToolbartoolbarDisclosure & LayoutGroups controls behind one roving tab stopGuideOpen
DialogdialogOverlaysModal window layered over the pageGuideOpen
Alert Dialogalert-dialogOverlaysInterruptive dialog that demands a decisionGuideOpen
PopoverpopoverOverlaysFloating panel anchored to a triggerGuideOpen
TooltiptooltipOverlaysHover and focus hint for a controlGuideOpen
Link Previewlink-previewOverlaysRich hover card preview for a linkGuideOpen
Dropdown Menudropdown-menuMenus & NavigationMenu opened from a button triggerGuideOpen
Context Menucontext-menuMenus & NavigationMenu opened by right click or long pressGuideOpen
MenubarmenubarMenus & NavigationDesktop-style horizontal menu barGuideOpen
Navigation Menunavigation-menuMenus & NavigationSite navigation with rich flyout panelsGuideOpen
CommandcommandMenus & NavigationFilterable command paletteGuideOpen
PaginationpaginationMenus & NavigationPage-by-page navigation for long listsGuideOpen
ButtonbuttonForm ControlsButton that renders as a link when given an hrefGuideOpen
CheckboxcheckboxForm ControlsBinary and indeterminate checkbox with a hidden inputGuideOpen
SwitchswitchForm ControlsOn/off toggle for instantly applied settingsGuideOpen
Radio Groupradio-groupForm ControlsSingle choice from a roving-focus setGuideOpen
LabellabelForm ControlsAccessible label wired to any controlGuideOpen
ToggletoggleForm ControlsTwo-state pressed buttonGuideOpen
Toggle Grouptoggle-groupForm ControlsSingle or multiple selection across togglesGuideOpen
SelectselectSelection & InputListbox-backed select with typeaheadGuideOpen
ComboboxcomboboxSelection & InputInput-filtered select with single or multiple valuesGuideOpen
SlidersliderSelection & InputSingle or multi-thumb value rangeGuideOpen
PIN Inputpin-inputSelection & InputOne-time-code entry with paste supportGuideOpen
Rating Grouprating-groupSelection & InputStar rating with half-step supportGuideOpen
CalendarcalendarDates & TimeStandalone date calendar with multi-month supportGuideOpen
Range Calendarrange-calendarDates & TimeCalendar that selects a start and end dateGuideOpen
Date Fielddate-fieldDates & TimeSegmented date entry fieldGuideOpen
Date Pickerdate-pickerDates & TimeDate field plus popover calendarGuideOpen
Date Range Fielddate-range-fieldDates & TimeTwo linked segmented date fieldsGuideOpen
Date Range Pickerdate-range-pickerDates & TimeRange field plus popover range calendarGuideOpen
Time Fieldtime-fieldDates & TimeSegmented time entry fieldGuideOpen
Time Range Fieldtime-range-fieldDates & TimeStart and end time in one controlGuideOpen
AvataravatarFeedbackImage with loading and fallback statesGuideOpen
ProgressprogressFeedbackDeterminate and indeterminate task progressGuideOpen
MetermeterFeedbackStatic measurement inside a known rangeGuideOpen
PortalportalUtilitiesRenders children into another part of the DOMGuideOpen
mergePropsmerge-propsUtilitiesMerges event handlers, classes and styles safelyGuideOpen
useIduse-idUtilitiesSSR-stable unique id generatorGuideOpen
IsUsingKeyboardis-using-keyboardUtilitiesGlobal reactive keyboard-modality flagGuideOpen
BitsConfigbits-configUtilitiesScoped defaults for nested Bits UI componentsGuideOpen

URL rules

  • Local guide links use ../components/<slug> and resolve to /components/<slug>.
  • Live demo links use https://bits.loca.zone/components/<slug>.
  • Upstream API references remain secondary links inside each local guide.

loca.zone · bits.loca.zone · Component guides