Section

Install

Pull Section from the barrel for everyday use, or the granular path when you want a tighter bundle.

import { Section } from "@brika/clay";

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

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

import {
  Section,
  SectionContent,
  SectionDescription,
  SectionHeader,
  SectionIcon,
  SectionInfo,
  SectionTitle,
} from '@brika/clay/components/section';
import { Server } from 'lucide-react';

/** Section card with a header and body content. */
export default function SectionDefaultDemo() {
  return (
    <Section className="w-full max-w-md">
      <SectionHeader>
        <SectionInfo>
          <SectionIcon>
            <Server className="size-4" />
          </SectionIcon>
          <div>
            <SectionTitle>Database</SectionTitle>
            <SectionDescription>PostgreSQL 16, primary cluster</SectionDescription>
          </div>
        </SectionInfo>
      </SectionHeader>
      <SectionContent>
        <p className="text-muted-foreground text-sm">Connection pool: 18 / 100 active.</p>
      </SectionContent>
    </Section>
  );
}

Section, every way

import { Badge } from '@brika/clay/components/badge';
import { Button } from '@brika/clay/components/button';
import {
  Section,
  SectionContent,
  SectionDescription,
  SectionHeader,
  SectionIcon,
  SectionInfo,
  SectionTitle,
} from '@brika/clay/components/section';
import { Terminal } from 'lucide-react';

/** Action button and a badge in the header's right slot, for settings panels with inline controls. */
export default function SectionWithActionDemo() {
  return (
    <Section className="w-full max-w-md">
      <SectionHeader>
        <SectionInfo>
          <SectionIcon>
            <Terminal className="size-4" />
          </SectionIcon>
          <div>
            <SectionTitle>Hub Control</SectionTitle>
            <SectionDescription>Restart or stop the runtime process.</SectionDescription>
          </div>
        </SectionInfo>
        <div className="flex shrink-0 items-center gap-2">
          <Badge>PID 4823</Badge>
          <Button size="sm" variant="outline">
            Restart
          </Button>
        </div>
      </SectionHeader>
      <SectionContent>
        <p className="text-muted-foreground text-sm">Uptime: 14 days, 3 hours.</p>
      </SectionContent>
    </Section>
  );
}

Accessibility

• › SectionTitle renders as <h2> by default, adjust via the as prop to maintain heading hierarchy.
• › Actions in the header slot should have descriptive labels matching the operation.

Theme tokens

Every CSS variable Section reads, with its default and the dotted path you'd write in a ThemeConfig JSON to override it. Set any of these in your theme to retune Section without touching component code.

Override in a theme

Authoring a theme is plain JSON. Drop overrides under components.section, the names are camelCase versions of the variable suffix.

{
  "id": "my-theme",
  "name": "My Theme",
  "description": "...",
  "accentSwatches": ["#000"],

  "components": {
    "section": {
      "descriptionColor": "var(--muted-foreground)"
    }
  }
}

Then apply with applyTheme(myTheme) (see the theming guide), scope it to a subtree with themeToCssVars(myTheme, mode), or consume any token directly in your own JSX with the matching Tailwind utility (e.g. bg-section-…) — see the chips on each token row.

API reference

Props specific to Section. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.