@archon-research/design-system

Shared UI components and design tokens built with React and Panda CSS.

Installation

npm install @archon-research/design-system react react-dom

Features

• Pre-built React components
• Design system tokens and recipes
• Theme customization via Panda CSS
• TypeScript support
• Component stories and documentation

Usage

Import components

import { Button, Card, Text } from '@archon-research/design-system';

export function Example() {
  return (
    <Card>
      <Text>Hello from the design system</Text>
      <Button onClick={() => console.log('clicked')}>Click me</Button>
    </Card>
  );
}

Use design tokens

import { defineConfig } from '@pandacss/dev';
import designSystemPreset from '@archon-research/design-system/panda-preset';

export default defineConfig({
  presets: [designSystemPreset],
});

Browse components

View available components and their stories at: https://archon-research.github.io/uikit/

Peer dependencies

• react: React UI library
• react-dom: React DOM rendering

Key dependencies

• @ark-ui/react: Unstyled component primitives
• @pandacss/dev: CSS-in-JS styling solution

See also

• Live component preview
• Development guide for local component development