# Chips

```tsx
import { Chips } from '@tangible/ui';
```

Interactive docs and examples: [Chips in Storybook](https://storybook-tangible-ui.pages.dev/?path=/docs/composites-chips--docs).

## Chips props

| Prop | Type | Default | Description |
| - | - | - | - |
| `options` | `ChipOption[]` | | |
| `alignment?` | `"center" \| "end" \| "start"` | | Inline: distribution along the row. Stack: cross-axis alignment. Published as `data-align`. |
| `className?` | `string` | | |
| `density?` | `"md" \| "sm" \| "xs"` | `'sm'` | Gap between chips |
| `direction?` | `"inline" \| "stack"` | `'inline'` | |
| `name?` | `string` | | |
| `role?` | `React.AriaRole` | `'group'` | |

## Examples

Stories: Linked, Plain ([interactive page](https://storybook-tangible-ui.pages.dev/?path=/docs/composites-chips--docs)).

---

Interactive version: https://storybook-tangible-ui.pages.dev/?path=/docs/composites-chips--docs