Access all components via the `ui.*` namespace:

```tsx
import { ui } from '@stackable-labs/sdk-extension-react'
```

The SDK provides **39 available components** for building extension interfaces. Only use the attributes listed below for each component.

## Layout

### `<ui.Card>`
Allowed attributes: `className`, `onClick`

{% storybook-demo component="Card" /%}
{% storybook-variants component="Card" /%}

### `<ui.CardContent>`
Allowed attributes: `className`

### `<ui.CardHeader>`
Allowed attributes: `className`

### `<ui.Inline>`
Allowed attributes: `gap`, `className`

{% storybook-demo component="Inline" /%}
{% storybook-variants component="Inline" /%}

### `<ui.ScrollArea>`
Allowed attributes: `className`

{% storybook-demo component="ScrollArea" /%}
{% storybook-variants component="ScrollArea" /%}

### `<ui.Separator>`
Allowed attributes: `className`

{% storybook-demo component="Separator" /%}
{% storybook-variants component="Separator" /%}

### `<ui.Stack>`
Allowed attributes: `gap`, `direction`, `className`

{% storybook-demo component="Stack" /%}
{% storybook-variants component="Stack" /%}

## Text

### `<ui.Badge>`
Allowed attributes: `variant`, `hue`, `tone`, `className`

{% storybook-demo component="Badge" /%}
{% storybook-variants component="Badge" /%}

### `<ui.Heading>`
Allowed attributes: `level`, `className`

{% storybook-demo component="Heading" /%}
{% storybook-variants component="Heading" /%}

### `<ui.Text>`
Allowed attributes: `className`, `tone`

{% storybook-demo component="Text" /%}
{% storybook-variants component="Text" /%}

## Input

### `<ui.Button>`
Allowed attributes: `variant`, `size`, `disabled`, `onClick`, `type`, `className`, `title`

{% storybook-demo component="Button" /%}
{% storybook-variants component="Button" /%}

### `<ui.Checkbox>`
Allowed attributes: `checked`, `onChange`, `disabled`, `className`, `id`

{% storybook-demo component="Checkbox" /%}
{% storybook-variants component="Checkbox" /%}

### `<ui.Input>`
Allowed attributes: `type`, `placeholder`, `value`, `onChange`, `disabled`, `className`, `id`

{% storybook-demo component="Input" /%}
{% storybook-variants component="Input" /%}

### `<ui.Label>`
Allowed attributes: `htmlFor`, `className`

{% storybook-demo component="Label" /%}
{% storybook-variants component="Label" /%}

### `<ui.RadioGroup>`
Allowed attributes: `value`, `defaultValue`, `onChange`, `className`

{% storybook-demo component="RadioGroup" /%}
{% storybook-variants component="RadioGroup" /%}

### `<ui.RadioGroupItem>`
Allowed attributes: `value`, `disabled`, `className`, `id`

### `<ui.Select>`
Allowed attributes: `value`, `defaultValue`, `onChange`, `placeholder`, `disabled`, `className`

{% storybook-demo component="Select" /%}
{% storybook-variants component="Select" /%}

### `<ui.SelectOption>`
Allowed attributes: `value`, `disabled`, `className`

### `<ui.Switch>`
Allowed attributes: `checked`, `onChange`, `disabled`, `size`, `className`, `id`

{% storybook-demo component="Switch" /%}
{% storybook-variants component="Switch" /%}

### `<ui.Textarea>`
Allowed attributes: `placeholder`, `value`, `onChange`, `disabled`, `rows`, `className`, `id`

{% storybook-demo component="Textarea" /%}
{% storybook-variants component="Textarea" /%}

## Navigation

### `<ui.Link>`
Allowed attributes: `href`, `target`, `rel`, `className`

{% storybook-demo component="Link" /%}
{% storybook-variants component="Link" /%}

### `<ui.Menu>`
Allowed attributes: `title`, `className`

{% storybook-demo component="Menu" /%}
{% storybook-variants component="Menu" /%}

### `<ui.MenuItem>`
Allowed attributes: `icon`, `label`, `description`, `onClick`, `className`

### `<ui.Tabs>`
Allowed attributes: `defaultValue`, `className`

{% storybook-demo component="Tabs" /%}
{% storybook-variants component="Tabs" /%}

### `<ui.TabsContent>`
Allowed attributes: `value`, `className`

### `<ui.TabsList>`
Allowed attributes: `className`

### `<ui.TabsTrigger>`
Allowed attributes: `value`, `className`

## Feedback

### `<ui.Alert>`
Allowed attributes: `variant`, `title`, `className`

{% storybook-demo component="Alert" /%}
{% storybook-variants component="Alert" /%}

### `<ui.Progress>`
Allowed attributes: `value`, `className`

{% storybook-demo component="Progress" /%}
{% storybook-variants component="Progress" /%}

### `<ui.Skeleton>`
Allowed attributes: `width`, `height`, `className`

{% storybook-demo component="Skeleton" /%}
{% storybook-variants component="Skeleton" /%}

### `<ui.Tooltip>`
Allowed attributes: `content`, `className`

{% storybook-demo component="Tooltip" /%}
{% storybook-variants component="Tooltip" /%}

## Composite

### `<ui.Avatar>`
Allowed attributes: `src`, `alt`, `className`

{% storybook-demo component="Avatar" /%}
{% storybook-variants component="Avatar" /%}

### `<ui.Collapsible>`
Allowed attributes: `defaultOpen`, `className`

{% storybook-demo component="Collapsible" /%}
{% storybook-variants component="Collapsible" /%}

### `<ui.CollapsibleContent>`
Allowed attributes: `className`

### `<ui.CollapsibleTrigger>`
Allowed attributes: `className`

### `<ui.Icon>`
Allowed attributes: `name`, `size`, `className`

{% storybook-demo component="Icon" /%}
{% storybook-variants component="Icon" /%}

### `<ui.Image>`
Allowed attributes: `src`, `alt`, `loading`, `width`, `height`, `className`

{% storybook-demo component="Image" /%}
{% storybook-variants component="Image" /%}

### `<ui.QRCode>`
Allowed attributes: `value`, `size`, `variant`, `level`, `alt`, `className`

{% storybook-demo component="QRCode" /%}
{% storybook-variants component="QRCode" /%}

### `<ui.Video>`
Allowed attributes: `videoId`, `autoPlay`, `showControls`, `allowTracking`, `shape`, `title`, `className`

{% storybook-demo component="Video" /%}
{% storybook-variants component="Video" /%}

## Available Icons (31)

Use with `<ui.Icon name="icon-name" />`. Valid icon names:
{% storybook-variants component="Icon" byProp="name" /%}