@assemblcorp/ui

31 Base-UI wrapper components with integrated design tokens, 150+ patterns, and theme system.

Exports

// Components (31)
import { Button } from '@assemblcorp/ui/button'
import { Card } from '@assemblcorp/ui/card'
import { Dialog } from '@assemblcorp/ui/dialog'
import { Input } from '@assemblcorp/ui/input'
import { Select } from '@assemblcorp/ui/select'

// Design tokens & theme
import { primitiveTokens, semanticTokens } from '@assemblcorp/ui/theme'
import { useThemeId, useColorScheme, setColorScheme } from '@assemblcorp/themes'

// Patterns (150+)
import { focusRingPattern, transitionPattern, surfacePattern } from '@assemblcorp/ui/patterns'

// Utilities
import { cn } from '@assemblcorp/shared'
import { tv } from 'tailwind-variants'

// Styles (required, preferred)
import '@assemblcorp/ui/theme.css'

@assemblcorp/ui/styles remains as a legacy alias to theme.css, but new consumers should import @assemblcorp/ui/theme.css directly.

Dependencies

{
  "@assemblcorp/shared": "workspace:*",
  "@assemblcorp/kernel": "workspace:*",
  "@assemblcorp/themes": "workspace:*",
  "@base-ui/react": "^1.0+",
  "tailwind-variants": "^3.2.2",
  "tailwindcss": "^4.1.18"
}

Key Features

| Feature | Details | |---------|---------| | Components | 31 Base-UI wrappers with TailwindVariants styling | | Design Tokens | 3-tier: primitives → semantics → components | | Patterns | 150+ reusable class arrays (focus, transitions, surfaces) | | Dark Mode | CSS-first via semantic tokens + data-color-scheme | | Accessibility | WCAG AAA compliant, full ARIA support via Base-UI | | RTL Support | Logical properties (ms-, ps-, border-s, inset-inline-*) | | TypeScript | Strict mode, zero any types, VariantProps patterns |

Quick Start

// Component with variant
import { Button } from '@assemblcorp/ui/button'

<Button variant="solid" color="primary" size="md">
  Click me
</Button>

// Theme switching
import { useThemeActions } from '@assemblcorp/themes'

const { setColorScheme } = useThemeActions()
setColorScheme('dark')

Build

pnpm -C packages/ui build    # TypeScript → dist/
pnpm -C packages/ui typecheck

Output: dist/index.d.ts (types), dist/*.mts (built files)

Architecture

Component Pattern (Base-UI + TailwindVariants):

import { Input as BaseInput } from '@base-ui/react'
import { tv } from 'tailwind-variants'

const inputVariants = tv({
  base: 'px-3 py-2 rounded border border-emphasis',
  variants: { size: { sm: 'h-8', md: 'h-10' }}
})

export function Input({ size, ...props }) {
  return <BaseInput className={inputVariants({ size })} {...props} />
}

3-Tier Token System:

1. Primitives - Raw colors, spacing (no semantic meaning)
2. Semantics - Color roles (bg-surface-base, text-foreground), spacing scales
3. Components - Applied at component level with TailwindVariants

Shared Patterns: Instead of hardcoding classes, use pattern arrays from patterns/:

import { focusRingPattern, transitionPattern } from '@assemblcorp/ui/patterns'

const buttonVariants = tv({
  base: [...transitionPattern, ...focusRingPattern, 'px-4 py-2']
})

Documentation

• MONOREPO_README.md - Development workflow
• ARCHITECTURE_IMPROVEMENTS.md - Structural decisions
• Docs folder (component guides, patterns, tokens) - Run pnpm dev to view

License

MIT