# Layout Components

> Generated reference (regen-owned; see [index.md](index.md)). Binds only under `primitives: nurix`.

Content structure and containers. Import each from its own subpath, e.g. `import { Card, CardContent } from "@nurix/components/block/card";`.

## Statistics

Compound schema for dashboard stat / KPI cards — compose only the regions a card needs. Import from `@nurix/components/statistics`. Sub-components throw if rendered outside `<Statistics>`. The wrapper is `bare` (invisible — just a flex column) by default so consumers own its look; opt into a surface with `variant`.

**Sub-components:** `StatisticsHeader`, `StatisticsIcon`, `StatisticsHeading`, `StatisticsTitle`, `StatisticsDescription`, `StatisticsActions`, `StatisticsSection`, `StatisticsMetric`, `StatisticsValue`, `StatisticsUnit`, `StatisticsTrend`, `StatisticsComparison`, `StatisticsGroup`, `StatisticsVisual`, `StatisticsGauge`, `StatisticsProgress`, `StatisticsSegmentedBar`, `StatisticsSparkline`, `StatisticsLegend`, `StatisticsLegendItem`, `StatisticsContent`, `StatisticsFooter`, `StatisticsCaption`, `StatisticsLink`

**Statistics props:** `size` [sm|md|lg] (headline value scale), `variant` [bare|card|elevated|outline|soft|ghost] (default `bare` draws nothing; the rest add padding + surface), `accent` [none|primary|success|warning|danger|info], `gap` [none|sm|md|lg], `justify` [start|center|end|between|around|evenly], `comparisonLabel`
**StatisticsTitle:** `size` [sm|md|lg], `align` [left|center|right]
**StatisticsTrend:** `value:number`, `direction?` [up|down], `invert?` (flip color, keep arrow), `pill?`, `format?:(n)=>string`
**StatisticsIcon:** `variant` [default|primary|success|warning|danger|info], `tone` [soft|solid|outline|plain], `size` [xs|sm|md|lg|xl|oversized] (oversized bleeds out the top-right corner — needs a clipping surface variant), `shape` [circle|rounded|square]
**StatisticsGauge:** `value` (0–100), `sweep?` [180|270], `size?`, `thickness?`, `trackColor?`, `fillColor?` — renders children centered in the dial
**StatisticsSection:** `gap`, `justify` — a vertical group; nest two (top + bottom) in a `justify="between"` card to pin clusters to the top and bottom. `StatisticsVisual` is a generic slot: drop in a built-in visual or any chart (`PieGraph`, `LineGraph`, `BarGraph`, `ProgressBar`).

```tsx
<Statistics variant="card" comparisonLabel="vs last week">
  <StatisticsHeader>
    <StatisticsHeading>
      <StatisticsTitle>Revenue</StatisticsTitle>
    </StatisticsHeading>
    <StatisticsActions>
      <StatisticsIcon variant="success">{/* icon */}</StatisticsIcon>
    </StatisticsActions>
  </StatisticsHeader>
  <StatisticsMetric>
    <StatisticsValue>$21,434</StatisticsValue>
    <StatisticsTrend value={-12.2} invert pill />
    <StatisticsComparison />
  </StatisticsMetric>
</Statistics>
```

## Other layout components

- `accordion` — Accordion, AccordionItem, AccordionTrigger, AccordionContent
- `aspect-ratio` — AspectRatio
- `bento-grid` — BentoGrid, BentoCard
- `card` — Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction, CardImage
- `carousel` — Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext
- `collapsible` — Collapsible, CollapsibleTrigger, CollapsibleContent
- `collapsible-panel` — CollapsiblePanel
- `editable-card` — EditableCard, EditableCardHeader, EditableCardBody, EditableCardFooter
- `resizable` — ResizablePanelGroup, ResizablePanel, ResizableHandle
- `scroll-area` — ScrollArea, ScrollBar
- `separator` — Separator
- `separator-with-text` — SeparatorWithText
- `sortable` — Sortable, SortableContent, SortableItem, SortableItemHandle, SortableOverlay