Section

Section is a card container that groups related Field components together under a titled header. It should always be a direct child of SectionGrid.

import { Section } from "@/components/section";

<Section title="General">
  <Field name="Enable">
    <Switch ... />
  </Field>
</Section>

Props

Prop	Type	Default	Description
`title`	`string`	—	The section header title
`description`	`string`	—	Small subtext shown below the title
`icon`	`ReactNode`	—	Optional icon shown to the left of the title
`iconColor`	`string`	—	Color applied to the icon
`collapsible`	`boolean`	`false`	Whether the section can be collapsed by clicking the header
`defaultCollapsed`	`boolean`	`false`	Whether the section starts collapsed
`children`	`ReactNode`	—	`Field` components to render inside the section

Collapsible

Add collapsible to let the user collapse and expand the section by clicking the header. Use defaultCollapsed to start it collapsed:

<Section title="Advanced" collapsible defaultCollapsed>
  <Field name="Some Setting">
    <Switch ... />
  </Field>
</Section>

With Icon

You can pass any Lucide icon and an optional color:

import { Crosshair } from "lucide-react";

<Section title="Aimbot" icon={<Crosshair />} iconColor="#3b82f6">
  <Field name="Enable">
    <Switch ... />
  </Field>
</Section>

Notes

Sections animate in sequentially on page load based on their position in the grid.
The index prop is injected automatically by SectionGrid and controls the stagger delay — you don't need to set it manually.

Section

Props

Collapsible

With Icon

Notes

On this page