Design System

Getting Started

What are you trying to do? Pick a flow to get started quickly.

I need to build a CRUD page

COPY

List, detail, create, and edit pages for any entity.

  1. Copy the Contact List pattern from /crud/contact-list
  2. Replace Contact types with your entity
  3. Wire server actions for real data
  4. Use DataTable for production lists

Go to copy workspace →

I need to add a component

IMPORT

Import production-ready atoms and molecules into your app.

  1. Browse the component catalog at /interactive/atoms
  2. Import: import { Button } from '@stackmates/ui-interactive/atoms'
  3. Check PropsTable for available props
  4. Use StatusBadge for status, DataTable for tables

Go to import workspace →

I need wallet connection

SECURE

Solana wallet integration with safety-first UX.

  1. Wrap your layout with SolanaWalletProvider
  2. Use WalletConnect component for connection UI
  3. See /onchain/solana for 6 working examples
  4. Check /solana for crypto-specific patterns

Go to secure workspace →

I need to explore an idea

COMPARE

Prototype and compare approaches before committing.

  1. Create a page in (explorations)/ route group
  2. 'use client' is OK in explorations
  3. Import from @stackmates/ui-interactive and @stackmates/ui-fixtures
  4. Keep exploration self-contained

Go to compare workspace →

Press Cmd+K to search all pages anytime.