Component Library

Complete Design System Showcase

Explore all 24 components with every variant, size, and style option. Built with semantic tokens and OKLCH colors.

View on GitHub Documentation

Buttons

5 variants × 3 sizes = 15 combinations

Primary Variant

Secondary Variant

Outline Variant

Ghost Variant

Danger Variant

Cards

Multiple padding options and hover states

Demo

No Padding Card

Image extends to edges, content has manual padding

Small Padding

Compact card with minimal spacing

Medium Padding (Default)

Standard card padding for most use cases

Large Padding

Spacious card for prominent content

Hover Effect Card

Hover over me to see the elevation change!

Badges

5 semantic variants × 2 sizes

Medium Size (Default)

Default Primary Success Warning Danger

Small Size

Default Primary Success Warning Danger

Typography

Headings

Heading 1 - Main Page Title

Heading 2 - Section Title

Heading 3 - Subsection

Heading 4 - Card Title

Heading 5 - Small Heading

Heading 6 - Smallest Heading

Text Component Variants

Extra Small Text - For captions and labels

Small Text - For metadata and secondary info

Base Text - Standard body copy

Large Text - For lead paragraphs

Extra Large Text - For emphasis

Text Colors

Primary text color (main content)

Secondary text color (less emphasis)

Muted text color (minimal emphasis)

Inverse text (for dark backgrounds)

Text Weights

Normal weight - Regular text

Medium weight - Slightly emphasized

Semibold weight - Strong emphasis

Bold weight - Maximum emphasis

Text Alignment

Left aligned text (default)

Center aligned text

Right aligned text

Form Components

Input Field Variants

Required Fields

Error State

Please enter a valid email address

Textarea

Complete Contact Form

Content Components

Blog Cards

5 min read

Getting Started with Astro

Learn how to build fast, content-focused websites with Astro's island architecture and zero-JS by default approach.

Astro Tutorial Web Dev
Read article →
8 min read

Understanding OKLCH Colors

Dive deep into the OKLCH color space and why it's better for designing accessible, perceptually uniform color systems.

Design Colors CSS
Read article →

Tool Cards

🎨

Color Palette Generator

Generate beautiful OKLCH color palettes with automatic shade generation and accessibility checking.

CSS Design Tool
Try Demo View Code
📝

Typography Scale Calculator

Calculate fluid typography scales using CSS clamp() with live preview and code generation.

Typography CSS Tool
Try Demo

Code Block

Example Component typescript 
interface Props {
  variant?: 'primary' | 'secondary';
  size?: 'sm' | 'md' | 'lg';
}

const { variant = 'primary', size = 'md' } = Astro.props;

Blockquote

Good design is as little design as possible. Less, but better – because it concentrates on the essential aspects, and the products are not burdened with non-essentials.
Dieter Rams 10 Principles of Good Design

Layout Components

Grid Component

Auto-fit Grid (responsive)

Item 1

Item 2

Item 3

Item 4

2 Columns

Column 1

Column 2

3 Columns

Col 1

Col 2

Col 3

Stack Component

Vertical Stack (default)

Item 1

Item 2

Item 3

Horizontal Stack

Item 1

Item 2

Item 3

Stack with Center Alignment

Aligned to Center

Stack with Space Between

Left Right

Container Variants

XS Container (max-width: 20rem)

SM Container (max-width: 24rem)

Readable Container (max-width: 65ch)

Blog Components

Table of Contents

Reading Progress

The reading progress bar is visible at the top of this page. Scroll to see it in action!