* refactor(base-drawer): rewrite base drawer wrapper for @base-ui/react/drawer Replace vaul with @base-ui/react/drawer as the primitive behind the base drawer wrapper. Keep the public API aligned with the radix drawer shape while rewriting DrawerContent to compose Backdrop, Viewport, Popup, and Content internally. Keep the registry dependency change in the same commit so the wrapper rewrite lands as one source-level migration step. * refactor(drawer): move shared drawer direction rules from stylesheets to primitives Shared drawer styles previously owned direction-specific layout in CSS. With base and radix now exposing different direction attributes, keeping that logic in shared tokens would duplicate primitive-specific branching in the stylesheets. Move direction-specific layout into the base/radix drawer wrappers and leave shared CSS responsible only for visual surface styling. Also move handle visibility and header alignment into TSX, and unify the shared drawer token names to cn-drawer-*. * fix(base-drawer): migrate examples, blocks, and app consumers to render and swipeDirection Update in-repo base drawer consumers to the new wrapper API. Replace asChild usage with render, switch direction to swipeDirection, and align examples, blocks, app consumers, and docs with the new base drawer usage pattern. * chore: update registries * fix(drawer): update base marker example usage * fix(drawer): clean up base style selectors * docs: add migration docs * wip * fix: nested * feat: drawer * fix * fix * fix * fix: pointer events * fix: clean up radix drawers * fix: position --------- Co-authored-by: shadcn <m@shadcn.com>
Registry
This directory is the source of truth for the v4 component registry. The build
pipeline (../scripts/build-registry.mts) reads the authored source here and
generates the runtime indexes, the local styles/ consumed by the docs app, and
the installable output under public/r/.
Source of truth (authored by hand)
bases/base/,bases/radix/— the two authored base registries (Base UI and Radix). Each holds aregistry.tsplusui/,lib/,hooks/,blocks/,examples/, andinternal/. Shared surfaces should stay in sync across both bases — seebases/README.md.styles/style-*.css— the style token files (nova,sera,vega, …). Each defines the design tokens for one style.new-york-v4/— the legacy source registry. Unlike the generated combinations below, itsregistry.tsand component files are authored directly and committed.../examples/base,../examples/radix— authored component demos. See../examples/README.md.
Generated output (do not edit by hand)
Persistent (committed):
bases/__index__.tsx— runtime lookup for the authored bases.__index__.tsx— runtime lookup across legacy styles and every base/style combination.__blocks__.json— block metadata index.../examples/__index__.tsx— runtime lookup for demos.../styles/<style>/ui/*— compiled components for each base/style combination, imported by the docs app.../styles/<style>/ui-rtl/*— RTL variants, generated forbase-novaandradix-novaonly.../public/r/*— installable registry JSON served by the website and the CLI.
Temporary (created during the build, then cleaned up):
<style>/*— per-combination registries (e.g.base-nova/).../registry-<style>.json
The style model
There are two kinds of "styles", and the distinction drives the build flags:
- Generated combinations — every base (
base,radix) crossed with every style token (nova,sera, …) produces a combination likebase-novaorradix-sera. These are generated from the authored bases plus the style CSS; nothing underregistry/<combination>/is committed. - Legacy source registry —
new-york-v4is authored directly and committed. It is not generated from a base/style combination.
Building
Run from apps/v4:
pnpm registry:build
This runs the full pipeline: build the bases, generate every combination, write
the runtime indexes, export public/r/ for every style, copy the compiled UI
into styles/, and build the RTL styles. It is the canonical build — generated
output is prettier-formatted. Run this before committing or for production.
Fast targeted builds
The targeted flags below are for quick local iteration. To stay fast they
skip formatting the generated output, so they can leave generated files
unformatted (and produce large but harmless git diff churn). The full
pnpm registry:build above re-canonicalizes everything, so run it before you
commit.
For local iteration you can rebuild only the artifact you changed:
pnpm registry:build --examples # examples/__index__.tsx
pnpm registry:build --indexes # runtime registry indexes
pnpm registry:build --style base-nova # styles/base-nova/ui (+ ui-rtl)
pnpm registry:build --style all # every generated combination
pnpm registry:build --registry base-nova # public/r/styles/base-nova
pnpm registry:build --registry all # every style, incl. new-york-v4
| Flag | Rebuilds | Run after |
|---|---|---|
--examples |
../examples/__index__.tsx |
adding, removing, or renaming a demo |
--indexes |
bases/__index__.tsx, __index__.tsx, __blocks__.json, public/r/index.json |
changing registry or block metadata |
--style <style|all> |
../styles/<style>/ui and ui-rtl |
editing authored base UI/components |
--registry <style|all> |
../public/r/styles/<style> |
changing what the CLI installs |
Notes:
- Flags can be combined, e.g.
--style base-nova --registry base-nova. alltargets every supported style.- Editing an existing example file usually does not need a rebuild — only adding, removing, or renaming one (which changes the index) does.
--style new-york-v4is rejected because it is a legacy source registry, not a generated combination. Use--registry new-york-v4instead.- Unknown targets fail with the list of valid style ids.