Component Library

Shared components built with the ChromaDB design system

Typography

Headings

Heading 1 - Playfair Display

Heading 2 - Playfair Display

Heading 3 - Playfair Display

Heading 4 - Playfair Display

Heading 5 - Playfair Display

Heading 6 - Playfair Display

Text Variants

Extra Large Text - Inter

Large Text - Inter

Base Text - Inter (Default)

Small Text - Inter

Extra Small Text - Inter

Text Colors

Default text color

Muted text color (#737373)

Emerald Green (#00855d)

Coral Orange (#ff6b35)

Lavender Purple (#cba6f7)

Sky Blue (#4a81de)

Code

Inline Code:

Use the console.log() function to debug your code.

Code Block:

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/about')({
  component: AboutComponent,
})

Buttons

Variants

Sizes

States

Cards

Variants

Default Card

Standard card with subtle border

This is a default card with a subtle border (#e5e5e5). Perfect for content sections.

Emphasis Card

Mac-style card with shadow effect

This card features the signature Mac-style offset shadow and black border for emphasis.

Complete Card Example

Feature Card

A complete example with header, content, and footer

This card demonstrates all available card components working together with the ChromaDB design system.

<Card variant="emphasis">
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardContent>Content here</CardContent>
  <CardFooter>Footer content</CardFooter>
</Card>

Card Grid

Emerald

Feature One

Mac-style card with emerald green accent on hover.

Coral

Feature Two

Mac-style card with coral orange accent on hover.

Lavender

Feature Three

Mac-style card with lavender purple accent on hover.

Containers

Container sizes control max-width and responsive padding:

<Container size="sm">Small (640px)</Container>
<Container size="md">Medium (768px)</Container>
<Container size="lg">Large (1024px)</Container>
<Container size="xl">Extra Large (1280px)</Container>
<Container size="2xl">2XL (1536px)</Container>
<Container size="full">Full Width</Container>

Current page container:

<Container size="xl" padding="default">

Design Tokens

Colors

Primary Palette

--background: #fafafa

--card-background: #fff

--foreground: #0a0a0a

--muted: #737373

Accent Colors

--color-emerald: #00855d

--color-coral: #ff6b35

--color-lavender: #cba6f7

--color-sky: #4a81de

Typography

Font Families

Playfair Display

Headings & Display

Inter

Body Text

IBM Plex Mono

Code & Technical

Spacing

--spacing: 0.25rem (4px base)

Border Radius

--radius-sm: 2px (cards)--radius-md: 6px (buttons)--radius-lg: 8px (images)

Component library built with TanStack Start, Tailwind CSS, and CVA

Following the ChromaDB design system principles

Back to Home