Design System
UI
Data UI

Components

Design System Components

Core UI components built with Panda CSS and Park UI. All components are fully typed and accessible.

Accordion

A vertically stacked set of interactive headings that reveal associated content.

Usage

import { Accordion } from "@zenforge/design-system";
<Accordion.Root> with <Accordion.Item>

Examples

Basic Accordion

Alert

Display important messages to users with different severity levels.

Usage

import { Alert } from "@zenforge/design-system";
<Alert.Root> with <Alert.Title> and <Alert.Description>

Examples

Alert Variants

Information
This is an informational alert message.

Avatar

Display user profile images with fallback support.

Usage

import { Avatar } from "@zenforge/design-system";
<Avatar.Root> with <Avatar.Image> and <Avatar.Fallback>

Examples

Avatar Sizes

X
S
M
L
X

Badge

Display labels, tags, or status indicators.

Usage

import { Badge } from "@zenforge/design-system";
<Badge variant="solid">Label</Badge>

Examples

Badge Variants

Solid
Subtle
Outline

Badge Sizes

Small
Medium
Large

Button

Trigger actions and events with accessible button components.

Usage

import { Button } from "@zenforge/design-system";
<Button variant="solid">Click me</Button>

Examples

Button Variants

Button Sizes

Button with Icons

Card

Container for grouping related content.

Usage

import { Card } from "@zenforge/design-system";
<Card.Root> with <Card.Header>, <Card.Body>, <Card.Footer>

Examples

Basic Card

Product Title

A brief description of the product

This is the main content area of the card. You can put any content here.

Checkbox

Allow users to select one or more options.

Usage

import { Checkbox } from "@zenforge/design-system";
<Checkbox.Root> with <Checkbox.Label>

Examples

Basic Checkbox

Heading

Semantic heading elements with consistent sizing.

Usage

import { Heading } from "@zenforge/design-system";
<Heading as="h1" size="4xl">Title</Heading>

Examples

Heading Sizes

Heading 4XL

Heading 3XL

Heading 2XL

Heading XL

Heading LG
Heading MD

Icon Button

Buttons that contain only an icon.

Usage

import { IconButton } from "@zenforge/design-system";
<IconButton><Icon /></IconButton>

Examples

Icon Button Variants

Icon Button Sizes

Input

Text input fields for forms.

Usage

import { Input } from "@zenforge/design-system";
<Input placeholder="Enter text" />

Examples

Input Sizes

Input States

Progress

Indicate the progress of a task.

Usage

import { Progress } from "@zenforge/design-system";
<Progress.Root value={50}><Progress.Track><Progress.Range /></Progress.Track></Progress.Root>

Examples

Progress Values

25%

50%

75%

100%

Radio Group

Allow users to select one option from a set.

Usage

import { RadioGroup } from "@zenforge/design-system";
<RadioGroup.Root> with <RadioGroup.Item>

Examples

Basic Radio Group

Select

Dropdown selection component.

Usage

import { Select, createListCollection } from "@zenforge/design-system";
<Select.Root> with items collection

Examples

Basic Select

Skeleton

Loading placeholders for content.

Usage

import { Skeleton } from "@zenforge/design-system";
<Skeleton width={200} height={20} />

Examples

Skeleton Shapes

Spinner

Loading indicator.

Usage

import { Spinner } from "@zenforge/design-system";
<Spinner />

Examples

Spinner Sizes

Switch

Toggle between two states.

Usage

import { Switch } from "@zenforge/design-system";
<Switch.Root> with <Switch.Control>

Examples

Basic Switch

Table

Display data in rows and columns.

Usage

import { Table } from "@zenforge/design-system";
<Table.Root> with <Table.Head> and <Table.Body>

Examples

Basic Table

NameRoleStatus
John DoeDeveloper
Active
Jane SmithDesigner
Active
Bob JohnsonManager
Away

Tabs

Organize content into multiple panels.

Usage

import { Tabs } from "@zenforge/design-system";
<Tabs.Root> with <Tabs.List> and <Tabs.Content>

Examples

Basic Tabs

Manage your account settings and preferences.

Text

Render text with consistent styling.

Usage

import { Text } from "@zenforge/design-system";
<Text>Content</Text>

Examples

Text Variants

Default text

Muted text

Bold text

Small text

Large text

Textarea

Multi-line text input.

Usage

import { Textarea } from "@zenforge/design-system";
<Textarea placeholder="Enter text" />

Examples

Textarea Sizes