| name | sanity-id |
| description | Use the Sanity ID design system to build UI with Sanity's brand components, colors, and typography. Includes 23 React components, TailwindCSS v4 integration, design tokens, and theming support. Use when building interfaces that need Sanity brand consistency, creating marketing pages, or implementing component-based UIs with TypeScript and React.
|
Sanity ID Design System
Sanity ID is the official component library, token library, and TailwindCSS v4
config for Sanity's brand design system. This skill helps you build consistent,
accessible, and beautiful interfaces using Sanity's design language.
Quick Start
Installation
pnpm add @sanity/sanity-id
Basic Setup
@import "@sanity/sanity-id/tailwind.css";
@import "@sanity/sanity-id/components.css";
Component Import Pattern
import { Button } from "@sanity/sanity-id/components/button"
import { Card } from "@sanity/sanity-id/components/card"
Core Concepts
1. Framework Agnostic Components
All components accept an as prop for polymorphic rendering:
import { Button } from "@sanity/sanity-id/components/button"
import Link from "next/link"
;<Button as={Link} href="/about">
Learn More
</Button>
2. Theming System
- Uses
data-theme attribute for dark/light modes
- Supports nested theme contexts
- Uses
light-dark() CSS function for colors
<html data-theme="dark">
<section data-theme="light">
</section>
</html>
3. Typography Classes
Typography uses TailwindCSS utility classes:
<h1 class="text-page-heading-xl">Main Heading</h1>
<p class="text-body-lg">Body text content</p>
Available Components (23)
- AvatarStack - Stack of user avatars
- Badge - Status indicators with optional icons
- Breadcrumbs - Navigation breadcrumbs
- Button - Primary interactive element
- Card - Content container
- Checkbox - Form checkbox input
- Chip - Compact info display
- Code - Inline code formatting
- CodeBlock - Syntax-highlighted code blocks
- Eyebrow - Small heading above titles
- IconButton - Icon-only button variant
- Input - Text input field
- LinkCTA - Call-to-action link
- Person - User avatar with info
- Radio - Radio button input
- RadioSwitch - Toggle between options
- SanityIcon - Icon component wrapper
- Select - Dropdown selection
- Switch - Toggle switch
- Table - Data table
- Testimonial - Quote/testimonial display
- Textarea - Multi-line text input
- TextCard - Text content card
Design Tokens
Color System
- Primitive colors: black, white, brand, gray (100-900), blue, green,
magenta, yellow
- Semantic colors: fg-base, bg-base, border-base, accent colors
- All colors support light/dark themes automatically
Using Colors
import { primitiveColors, semanticColors } from "@sanity/sanity-id/colors"
.my-element {
color: var(--color-fg-base);
background: var(--color-bg-dim);
}
<div className="text-fg-base bg-bg-dim">
Font Setup
Sanity ID uses:
- Sans-serif: Waldenburg
- Monospace: IBM Plex Mono
Define CSS custom properties:
:root {
--font-sans: "Waldenburg", ui-sans-serif, system-ui, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, monospace;
}
Detailed References
For comprehensive documentation on specific topics:
- All Components: See
references/components.md for complete props and
examples
- Design Tokens: See
references/design-tokens.md for color values and
usage
- Typography: See
references/typography.md for all text styles
- Theming: See
references/theming.md for dark/light mode setup
Code Templates
Ready-to-use patterns available in references/:
references/component-usage.tsx - Common component patternsreferences/setup-nextjs.md - Next.js integration guide
Best Practices
- Always use semantic colors for automatic theme support
- Import components individually for better tree-shaking
- Use the
as prop for framework integration
- Apply typography classes for consistent text styling
- Set
data-theme at the root for theme control
Common Patterns
Form with Inputs
import { Input } from "@sanity/sanity-id/components/input"
import { Button } from "@sanity/sanity-id/components/button"
import { Checkbox } from "@sanity/sanity-id/components/checkbox"
function ContactForm() {
return (
<form className="space-y-4">
<Input label="Email" type="email" placeholder="you@example.com" />
<Checkbox label="Subscribe to newsletter" />
<Button type="submit" mode="primary">
Submit
</Button>
</form>
)
}
Card Layout
import { Card } from "@sanity/sanity-id/components/card"
import { Badge } from "@sanity/sanity-id/components/badge"
import { Eyebrow } from "@sanity/sanity-id/components/eyebrow"
function FeatureCard() {
return (
<Card>
<Eyebrow>New Feature</Eyebrow>
<h3 className="text-card-heading">Title</h3>
<p className="text-body">Description</p>
<Badge mode="accent-blue">Beta</Badge>
</Card>
)
}
Requirements
- TailwindCSS v4 is required
- React 19+ for components
- TypeScript recommended for best DX
- Peer dependencies: @sanity/icons, classnames, shiki
