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

@assemblcorp/ui (1.1.0)

Published 2026-03-18 21:40:30 +00:00 by admin

Installation

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

About this package

@assemblcorp/ui

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

Exports

// Components (31)
import { Button, Card, Dialog, Input, Select, ... } from '@assemblcorp/ui/components'

// 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/components'

<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 1.0.11
@base-ui/react ^1.2.0
@mantine/hooks ^8.3.15
@tanstack/react-form ^1.28.3
@texel/color ^1.1.11
neverthrow ^8.2.0
tailwind-variants ^3.2.2
zustand ^5.0.11

Development Dependencies

ID Version
@playwright/test ^1.58.2
@terrazzo/plugin-css 2.0.0-beta.0
@testing-library/jest-dom ^6.9.1
@testing-library/react ^16.3.2
@testing-library/user-event ^14.6.1
@types/css-tree ^2.3.11
@types/jest-axe ^3.5.9
@types/react ^19.2.14
@types/react-dom ^19.2.3
@typescript/native-preview 7.0.0-dev.20260225.1
css-tree ^3.1.0
htmlparser2 ^10.1.0
jest-axe ^10.0.0
lucide-react ^0.575.0
react ^19.2.4
react-dom ^19.2.4
tailwindcss ^4.2.1
type-fest ^5.4.4
typescript npm:@typescript/native-preview@7.0.0-dev.20260225.1
vitest ^4.0.18

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-18 21:40:30 +00:00
13
Project Site
MIT
823 KiB
Assets (1)
ui-1.1.0.tgz 823 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