saturation/uisaturation/ui
DocsComponentsBlocksPages
GitHub

Sections

IntroductionComponentsInstallationMCPTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBeamBlur FadeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandComparison SliderContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmoji PickerEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNavigation MenuNovel EditorPaginationParallaxProgressProgressive BlurRadio GroupRippleSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography

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