saturation/uisaturation/ui
DocsComponentsBlocksPagesEmails
GitHub

Sections

IntroductionComponentsInstallationMCPThemingDesignComposing a Detail Panel

Components

Components

General

AvatarBadgeButtonKbdProgressSeparatorSkeletonSpin ResolveSpinnerSplit ButtonSync ButtonTypography

Forms & Inputs

Address LookupCalendar PickerCheckboxColor PickerComboboxDate PickerEmoji PickerFavicon SearchFieldInputInput GroupInput OTPRadio GroupSelectSliderSwitchTextareaToggleToggle Group

Data Display

AccordionAlertCardChartComparison SliderCredit CardData TableEmptyItemMarkdownSaturation Credit CardStatus BadgeTableTree

Detail Panels

Detail FieldDetail HeroDetail Toolbar

Navigation

BreadcrumbCommandMenubarNavigation MenuPaginationTabs

Overlays

CollapsibleContext MenuDialogDropdown MenuHover CardSheet

Layout

Button GroupFont ProviderWizard Split Layout

Feedback

Sonner

Animation & Effects

Animated GroupAnimated ListAnimated NumberBeamBlur FadeBorder TrailGlow EffectLiquid MetalLoading StateParallaxPixelProgressive BlurRippleSpotlightText EffectText Shimmer

Productivity

Agent ChatAI Chat InputCoding AgentFiltersFull CalendarKanbanNovel Editor

Directory Toolbar

Search input with animated filter pills and sort dropdown for content directory pages.

Features

  • Animated filter pills — Sliding highlight indicator between options
  • Debounced search — 400ms debounce on URL param updates
  • Sort dropdown — Optional sort with Select component
  • URL-driven state — Pushes filter/search/sort to URL params
  • Two layouts — Stacked or inline arrangement

API Reference

PropTypeDefaultDescription
filters{ value: string; label: string }[]-Filter pill options (first is 'All')
sortOptions{ value: string; label: string }[]-Sort dropdown options
searchPlaceholderstring"Search..."Search input placeholder
totalDocsnumber-Total result count
resultLabelstring"results"Label for results
layout"stacked" | "inline""stacked"Pills below or beside search

Components Used

inputbuttonselect