ui-patterns

Higher-level UI patterns built on top of packages/ui. Patterns are composed components that bring in extra dependencies and would not belong in the bare-primitive ui package.

Purpose

Things like the command menu, multi-select with virtualized lists, code blocks with copy-to-clipboard, animated number transitions — UI surface that is ubiquitous in Studio and the marketing site but isn't a Radix primitive.

Directory layout

packages/ui-patterns/
├── src/                # Pattern sources
├── tsconfig.json
├── package.json
└── vitest.config.ts

Each pattern is its own folder under src/ and is exported from a barrel.

How it works

Patterns import from 'ui' and add the extra dependencies needed (e.g. @tanstack/react-virtual for virtualized lists, cmdk for the command palette, framer-motion for animation primitives). They expose stable public APIs so apps don't bind to those underlying libraries directly.

Tests

pnpm test:ui-patterns

CI: ui-patterns-tests.yml.

Integration points

• Built on 'ui'.
• Consumed by apps/studio, apps/www, apps/docs, apps/design-system, and other apps.
• Documented in apps/design-system.

Entry points for modification

• Add a new pattern → create a folder under src/<pattern>/, export from the package barrel, add tests.
• Promote a Studio-local pattern → move it from apps/studio/components/ui-patterns/ (Studio-specific) into this package once it stabilizes and is reused.