Getting Started

Introduction

Skip the months of implementation. EDEN UI turns a full design system into a production-ready reference site where tokens, typography, and components all live in one place.

Why Copy/Paste?

Instead of hiding the system behind a package, this site exposes the actual structures teams need to build with confidence. It becomes both a reference and a handoff artifact.

  • Complete control over implementation details
  • Freedom to customize and extend component behavior
  • No dependency lock-in or hidden design decisions
  • Fast onboarding for design and engineering teams

Built for Production

Foundations

Token-first documentation

Colors, spacing, radius, and typography are exposed as reusable system primitives.

Components

Preview and implementation

Each component page balances visual preview, usage notes, and code-facing references.

Navigation

Docs that scale

The layout is designed for long-form browsing, quick search, and topic-based discovery.

Next Steps

Use the foundations pages to audit the token system, then move into components to inspect interactive primitives like buttons, inputs, sliders, and layout patterns.

Foundations

Design Tokens

This page now renders the actual tokens from your exported JSON, grouped by collection and token family so the documentation stays aligned with the source of truth.

Token Summary

Token Controls

Color Tokens

Spacing and Radius

Foundations

Typography

The typography page reads the Responsive token collection directly from your export, including family, weight, size, line-height, and letter-spacing scales.

Responsive Tokens

Base Components

Button

Renders a button or an element styled to resemble a button. This page mirrors the docs pattern used throughout the system with preview, installation, examples, and reference content. 

<button class="ui-button">Button</button>

Installation

npm pnpm yarn 
npm install @radix-ui/react-slot

Examples

Primary

Round Edge

Swipe

Input

Accordion

What does this component do?

It exposes the same docs pattern used for previews, tokens, and API-facing guidance.

API Reference

Prop Type Default Description
variant primary | secondary primary Controls emphasis and surface treatment.
size sm | md | lg lg Maps the component to the relevant spacing and type tokens.
asChild boolean false Lets the component inherit semantics from its child.