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

Dark Mode Toggle

View Transition Animation

Click to see the radial clip-path animation expand from the button

Toggle Theme

Variants

Default

Ghost

Outline

Sizes

Small

Default

Large

Status Indicator

Glowing Dot

A minimal pulsing dot with a liquid glass glow effect. Useful for indicating active status or drawing subtle attention.

Default (4s)

Fast (2s)

Slow (6s)

Status Indicator with Rotating Topics

Combines the glowing dot with a rotating text animation. Topics cycle through with a vertical scroll effect.

Currently exploring: AI-assisted development

Social Links

Icons

GitHub

Sizes

Small

GitHub

Default

GitHub

Large

GitHub

Icon Only

Vertical Layout

GitHub LinkedIn

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.

Blog Cards

Blog cards display a featured image, title, and description. They follow the neobrutalist design with Mac-style shadows and optional accent colors on hover.

Basic Usage

Getting Started with TanStack Router

Learn how to build modern React applications with type-safe routing and nested layouts.

Project Cards

Project cards display a media preview (image or video), title, description, tags, and action links. Ideal for showcasing portfolio projects with links to repositories, demos, and articles.

Basic Usage

CLI Task Manager

A fast, keyboard-driven task manager built with Rust and SQLite for local-first productivity.

GitHub

With Tags

Add tags to highlight tech stack, achievements, or project status. Tags support accent colors: emerald, coral, lavender, sky.

ReactTypeScriptHackathon Winner

Analytics Dashboard

Real-time analytics platform with customizable widgets and data export.

GitHub Live Demo Article

Video Preview

Use mediaType="video" for auto-playing, looped video previews. Videos play muted and loop continuously like a GIF but with better compression.

Canvas APIWebGL

Motion Graphics Editor

Browser-based motion graphics tool with timeline editing and real-time preview.

GitHub

Post Lists

Post lists display blog entries in a compact format with tap-to-expand on mobile and hover-to-reveal on desktop. The description expands smoothly using CSS grid transitions.

Basic Usage

Building with Claude CodeDec 2024

How AI-assisted development is changing my workflow

Why I rebuilt my siteNov 2024

A fresh start with modern tooling

Modern CSS tricks worth knowingOct 2024

Container queries, cascade layers, and more

Project Lists

Project lists showcase work with accent-colored underlines, type indicators, and badges. Features 40x40 thumbnails on mobile with tap-to-expand, and hover-to-reveal on desktop with full image and description.

Basic Usage

CLI Task Manager

CLIFeatured

Rust · SQLite2024→

Fast, keyboard-driven productivity tool for developers who live in the terminal

View project →

Analytics Dashboard

WebNew

React · TypeScript2024→

Real-time metrics visualization with customizable widgets and dark mode

View project →

Motion Editor

Tool

Canvas · WebGL2023→

Browser-based animation tool with timeline editing and real-time preview

View project →

Design System

Design

React · Tailwind2023→

Component library with accessibility-first approach and theme customization

View project →

Navbar

Variants

Default

Glass (backdrop-blur)

Link Color Variants

Hover over links to see colored highlights with subtle shadow

Animated Toggle (2-line)

Spring-animated hamburger with 2 lines that morphs into an X. Click to toggle.

State: Closed (=)

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