# Choose components and blocks

## Components

### Foundations

- `button`
- `input`
- `textarea`
- `checkbox`
- `switch`
- `badge`
- `card`
- `alert`
- `avatar`
- `progress`
- `separator`
- `skeleton`
- `spinner`

### Product primitives

- `filter-chip`
- `status-pill`
- `empty-state`
- `color-dot`
- `tag-chip`
- `legend-item`
- `list-row`
- `list-item`
- `color-swatch`
- `status-badge`
- `department-dot`

### Blocks

- `blocks-dashboard-panel`
- `blocks-filter-toolbar`
- `blocks-member-list`

The source of truth is [`registry.json`](https://github.com/qentrah/DUI/blob/master/registry.json). Built registry payloads are generated in [`public/r`](https://github.com/qentrah/DUI/blob/master/public/r).

## Use a local component

After adding `button`, import it from the generated source directory. The alias below assumes your `components.json` uses `@/components/ui`; adapt it to your configured alias.

```tsx
import { Button } from "@/components/ui/button";

export function SaveAction() {
  return <Button variant="primary" size="md" onPress={() => console.log("Save requested")}>
    Save
  </Button>;
}
```

## Button behavior

The source exposes `onPress`, `isPending`, `isIconOnly`, `fullWidth`, and a state render callback, alongside native button attributes. The available variants are primary, secondary, tertiary, outline, ghost, danger and danger-soft; sizes are sm, md and lg. `isPending` disables the control. Provide an accessible label for an icon-only button.

These component details were checked against [this source commit](https://github.com/qentrah/DUI/blob/5ea373366b411d52d0a5481b170e405c5bc5d3f7/components/ui/button.tsx), because component source is fetched separately from the npm installer. The repository currently has no v0.1.2 tag; pin the verified commit instead of that nonexistent tag.