admin
0 Followers · 0 Following
  • Joined on 2026-02-18
Repositories Projects Packages Public Activity Starred Repositories

@assemblcorp/ui (1.1.2)

Published 2026-03-20 11:11:21 +00:00 by admin

Installation

@assemblcorp:registry=
npm install @assemblcorp/ui@1.1.2
"@assemblcorp/ui": "1.1.2"

About this package

@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

License

MIT

Dependencies

Dependencies

ID Version
@assemblcorp/kernel workspace:*
@base-ui/react catalog:
@mantine/hooks catalog:
@tanstack/react-form catalog:
@texel/color catalog:
neverthrow catalog:
tailwind-variants catalog:
zustand catalog:

Development Dependencies

ID Version
@playwright/test catalog:
@terrazzo/plugin-css catalog:
@testing-library/jest-dom catalog:
@testing-library/react catalog:
@testing-library/user-event catalog:
@types/css-tree catalog:
@types/jest-axe catalog:
@types/react catalog:
@types/react-dom catalog:
@typescript/native-preview catalog:
css-tree catalog:
htmlparser2 catalog:
jest-axe catalog:
lucide-react catalog:
react catalog:
react-dom catalog:
tailwindcss catalog:
type-fest catalog:
typescript catalog:
vitest catalog:

Peer Dependencies

ID Version
react ^19.0.0
react-dom ^19.0.0
zod ^4.0.0

Keywords

react ui components typescript tailwind base-ui design-system
Details
npm
2026-03-20 11:11:21 +00:00
15
Project Site
MIT
779 KiB
Assets (1)
ui-1.1.2.tgz 779 KiB
Versions (25) View all
1.1.9 2026-04-08
1.1.8 2026-04-08
1.1.7 2026-04-08
1.1.6 2026-04-03
1.1.5 2026-04-02