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

FAQ Section

A styled FAQ section with expandable accordion items, custom plus/minus icons, and configurable heading.

Questions? We're glad you asked.

Features

  • Accordion-based — Built on Saturation UI Accordion component
  • Custom icons — Plus/minus toggle icons with smooth transitions
  • Configurable heading — Title and subtitle with sensible defaults
  • Single or multiple mode — Toggle between one-at-a-time or allow-all
  • Theme-aware — Uses muted/border/foreground CSS variables
  • Responsive — Max-width 3xl with full-width on mobile

API Reference

PropTypeDefaultDescription
items{ question: string; answer: string }[]-Array of Q&A pairs
titlestring"Frequently Asked Questions"Section heading
subtitlestring-Section subheading
multiplebooleanfalseAllow multiple items open at once
classNamestring-Additional className for the section

Components Used

accordion