# Sanity ID

> Component library, design token library, and TailwindCSS v4 configuration for Sanity ID, the brand design system behind the Sanity marketing website and adjacent properties. TailwindCSS v4 is required.

Version 1.15.2. Components are imported from individual subpaths —
there is no barrel file. 24 components are documented.

Every link below is the markdown representation of a page. Drop the `.md` for
the same page as HTML.

## Components

- [Avatar Stack](https://sanity-id-docs.sanity.build/sanity-id/components/avatar-stack.md): A row of overlapping avatars for showing a group of people compactly.
- [Badge](https://sanity-id-docs.sanity.build/sanity-id/components/badge.md): A small inline label for status or metadata, optionally led by an icon.
- [Breadcrumbs](https://sanity-id-docs.sanity.build/sanity-id/components/breadcrumbs.md): A navigation trail showing the current page's position in the site hierarchy.
- [Button](https://sanity-id-docs.sanity.build/sanity-id/components/button.md): The primary call to action. Renders an `<a>` when given an `href` and a `<button>` otherwise; pass `as` to render a framework link.
- [Card](https://sanity-id-docs.sanity.build/sanity-id/components/card.md): A linkable content card combining an image, an eyebrow, and a title. The media area is reserved whether or not an `image` or `logo` is given, so cards in a row line their titles up even when only some of them have artwork.
- [Checkbox](https://sanity-id-docs.sanity.build/sanity-id/components/checkbox.md): A single checkbox with an associated label and optional error message.
- [Chip](https://sanity-id-docs.sanity.build/sanity-id/components/chip.md): A compact, optionally dismissible token — for filters, tags, and selections.
- [Code](https://sanity-id-docs.sanity.build/sanity-id/components/code.md): An inline code sample with syntax highlighting.
- [Code Block](https://sanity-id-docs.sanity.build/sanity-id/components/code-block.md): A tabbed code sample with syntax highlighting and optional line numbers.
- [Disclosure](https://sanity-id-docs.sanity.build/sanity-id/components/disclosure.md): A collapsible section built on `<details>`, animating between open and closed.
- [Eyebrow](https://sanity-id-docs.sanity.build/sanity-id/components/eyebrow.md): A small label sitting above a heading, optionally paired with a call to action.
- [Icon Button](https://sanity-id-docs.sanity.build/sanity-id/components/icon-button.md): A square button containing only an icon. Requires `label` for accessibility. Renders an `<a>` when given an `href` and a `<button>` otherwise.
- [Input](https://sanity-id-docs.sanity.build/sanity-id/components/input.md): A single-line text field wired to its label, hint, and error text.
- [Link CTA](https://sanity-id-docs.sanity.build/sanity-id/components/link-cta.md): A text link styled as a call to action, with an optional directional arrow. Renders an `<a>` when given an `href` and a `<button>` otherwise.
- [Person](https://sanity-id-docs.sanity.build/sanity-id/components/person.md): A person's avatar alongside their name, job title, and company.
- [Radio](https://sanity-id-docs.sanity.build/sanity-id/components/radio.md): A single radio button with an associated label and optional error message.
- [Radio Switch](https://sanity-id-docs.sanity.build/sanity-id/components/radio-switch.md): A segmented control backed by a radio group — exactly one option is selected.
- [Sanity Icon](https://sanity-id-docs.sanity.build/sanity-id/components/sanity-icon.md): Renders an icon from the Sanity icon set as a reference to an SVG symbol. Hidden from assistive tech by default, since an icon almost always decorates text that already names it. Pass `aria-hidden={false}` with a `role` and a label for the rare icon that carries meaning on its own.
- [Select](https://sanity-id-docs.sanity.build/sanity-id/components/select.md): A dropdown wired to its label, hint, and error text.
- [Switch](https://sanity-id-docs.sanity.build/sanity-id/components/switch.md): A toggle for an on/off setting, wired to its label and optional error text.
- [Table](https://sanity-id-docs.sanity.build/sanity-id/components/table.md): A styled wrapper around `<table>`. Compose the usual `<thead>` and `<tbody>` children inside it, and lead with a `<caption>` so the table has an accessible name.
- [Testimonial](https://sanity-id-docs.sanity.build/sanity-id/components/testimonial.md): A customer quote with author and company attribution.
- [Textarea](https://sanity-id-docs.sanity.build/sanity-id/components/textarea.md): A multi-line text field wired to its label, hint, and error text.
- [Text Card](https://sanity-id-docs.sanity.build/sanity-id/components/text-card.md): A card of text content — eyebrow, title, and body — optionally linkable.

## Reference

- [Colors](https://sanity-id-docs.sanity.build/sanity-id/colors.md): every primitive and semantic color token
- [Typography](https://sanity-id-docs.sanity.build/sanity-id/typography.md): the 29 typography utility classes
- [Textures](https://sanity-id-docs.sanity.build/sanity-id/textures.md): background pattern utility classes

## Optional

- [Full reference](https://sanity-id-docs.sanity.build/sanity-id/llms-full.txt): every component, prop, and design token in a single file