DNA UI Components

⚠️ Under Heavy Development — This package is actively being developed. Breaking changes may occur between minor versions during the 0.x release cycle.

React component library for the DNA Design System. Built with TypeScript, CSS Modules, and design tokens.

• Design System
• Figma Specification

Features

• Accessible, responsive, and customizable components
• Canonical DNA component APIs with swappable internal implementations
• Built with TypeScript and CSS Modules
• Themed with design tokens from @dnanpm/design-tokens
• Supports server-side rendering and tree-shaking
• Comprehensive documentation and examples
• Single CSS file for easier consumption
• Selective exports for optimal bundle sizes

Installation

pnpm add @dnanpm/ui-components @dnanpm/design-tokens

Usage

import { Box, Button, Dialog, Tooltip } from '@dnanpm/ui-components';
import '@dnanpm/ui-components/styles.css';

function App() {
    return (
        <div>
            <Button variant="primary">Primary Button</Button>
            <Button variant="secondary" size="small">
                Small Secondary
            </Button>
            <Button loading>Processing...</Button>

            <Box elevation="high">
                <h2>Elevated Content</h2>
            </Box>

            <Tooltip content="Additional context lives behind the same DNA API.">
                <Button aria-label="Show more information" variant="secondary">
                    Hover me
                </Button>
            </Tooltip>

            <Dialog
                trigger={<Button>Open dialog</Button>}
                title="Project details"
                description="Implementation stays internal to the design system."
                footer={<Button>Done</Button>}
            >
                <p>
                    Consumers use the same component contract regardless of what powers it
                    underneath.
                </p>
            </Dialog>
        </div>
    );
}

Implementation Model

This package now supports two contributor paths under one public API surface:

• Plain React components, written entirely in-house.
• Base UI components, where the public DNA API is built on top of a headless library primitive directly in the component file.

Consumers should not need to know which path a component uses. Public names, props, and behavior belong to DNA; implementation choices stay internal.

Design tokens are available as CSS custom properties: var(--colors-primitive-pink-500), var(--spacing-ui-md), etc.

Tree-shaking

This package uses selective exports to optimize bundle sizes. Import only what you need:

// ✅ Good: Named imports (tree-shakeable)
import { Button, Box } from '@dnanpm/ui-components';

// ❌ Avoid: Wildcard imports (larger bundle)
import * as UI from '@dnanpm/ui-components';

Contributing

See CONTRIBUTING.md for contribution guidelines.