Section

A collapsible content panel with an optional icon and title. Use it to divide a page or card into named, optionally togglable groupings. Supports both controlled and uncontrolled expand state.

📖 Storybook

Preview

Live preview↗ Open in Storybook

Import

import { Section } from "@xocialive/ui-components";

Basic usage

<Section textOverrides={{ title: "User Details" }}>
  <p>Content goes here.</p>
</Section>

Non-collapsible

<Section collapsible={false} textOverrides={{ title: "Summary" }}>
  {/* content */}
</Section>

Controlled expand state

const [open, setOpen] = useState(true);

<Section expanded={open} onToggle={setOpen} textOverrides={{ title: "Filters" }}>
  {/* filter fields */}
</Section>;

Props

Prop	Type	Default	Description
textOverrides.title	string	—	Section heading text
icon	ReactNode	—	Icon rendered before the title
collapsible	boolean	true	Whether the section can be collapsed
defaultExpanded	boolean	true	Initial expand state (uncontrolled)
expanded	boolean	—	Controlled expand state
onToggle	(expanded: boolean) => void	—	Called when the user toggles the section
children	ReactNode	—	Section body content