saturation/uisaturation/ui
DocsComponentsBlocksPagesEmails
GitHub

Sections

IntroductionComponentsInstallationMCPThemingDesign

Components

Components

General

AvatarBadgeButtonKbdProgressSeparatorSkeletonSpin ResolveSpinnerSync ButtonTypography

Forms & Inputs

Address LookupCalendar PickerCheckboxComboboxDate PickerEmoji PickerFavicon SearchFieldInputInput GroupInput OTPRadio GroupSelectSliderSwitchTextareaToggleToggle Group

Data Display

AccordionAlertCardChartComparison SliderCredit CardData TableEmptyItemSaturation Credit CardTableTree

Navigation

BreadcrumbCommandMenubarNavigation MenuPaginationTabs

Overlays

CollapsibleContext MenuDialogDropdown MenuSheet

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