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
• One-line CSS setup via styles.css
• Selective exports for optimal bundle sizes

Installation

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

Usage

import { Breadcrumb } from '@dnanpm/ui-components';
import '@dnanpm/ui-components/styles.css';

const items = [
    { label: 'Home', href: '/' },
    { label: 'Products', href: '/products' },
    { label: 'Mobile Plans', href: '/products/mobile' },
];

function App() {
    return <Breadcrumb items={items} />;
}

Implementation Model

Components are written as plain React function components with CSS Modules and BEM naming. Design tokens are available as CSS custom properties: var(--color-semantic-foreground-default), 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 { Breadcrumb } from '@dnanpm/ui-components';

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

Contributing

See CONTRIBUTING.md for contribution guidelines.