mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-02 17:08:39 +00:00
34223a842d
* 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>
Examples
This directory contains demo components for the component documentation.
Directory Structure
examples
├── base
│ ├── button-demo.tsx
│ └── ...
├── radix
│ └── ...
└── __index__.tsx # Auto-generated by registry:build
Adding a New Example
- Create a new
.tsxfile inexamples/baseorexamples/radix:
// examples/base/button-loading.tsx
import { Button } from "@/styles/base-nova/ui/button"
export function ButtonLoading() {
return <Button disabled>Loading...</Button>
}
- Run the registry build to regenerate the index:
pnpm --filter=v4 registry:build
- Use the example in documentation by referencing its name (filename without
.tsx):
<ComponentPreview name="button-loading" />
Notes
- Example files should be placed directly in
examples/baseorexamples/radix, not in subdirectories. - Base examples should import from
@/styles/base-nova/*. Radix examples should import from@/styles/radix-nova/*. - Both named exports and default exports are supported.
- After adding or removing examples, run
pnpm --filter=v4 registry:buildto update the index.