Components
Edit profile
Make changes to your profile here. Click save when you're done.
Customize
Installation
$ pnpm dlx shadcn@latest add @framecn/drawer
Usage
import { Drawer } from "@/components/ui/drawer";<Drawer state="opened" />Drawer is a bottom sheet meant to compose over another scene — pair it with a trigger button or other content in your composition.
Smooth transitions
The docs preview animates an Edit profile trigger press, then slides the drawer up and closed via useDrawerTransition. Pair it with useButtonTransition on the trigger:
import { Drawer } from "@/components/framecn/drawer";
import { useDrawerTransition } from "@/components/framecn/use-drawer-transition";
import { Button } from "@/components/framecn/button";
import { useButtonTransition } from "@/components/framecn/use-button-transition";
const trigger = useButtonTransition([
{ at: 14, state: "hover" },
{ at: 26, state: "press" },
]);
const drawer = useDrawerTransition([
{ at: 32, state: "opened", duration: 16 },
{ at: 92, state: "closed", duration: 12 },
]);
<>
<Button label="Edit profile" style={trigger} />
<Drawer
title="Edit profile"
description="Make changes to your profile here. Click save when you're done."
actionLabel="Save changes"
cancelLabel="Cancel"
style={drawer}
/>
</>;style takes precedence over state when both are provided.
API Reference
Drawer
| Prop | Type | Default |
|---|---|---|
state | "opened" | "closed" | "closed" |
style | DrawerStyle | - (takes precedence over state) |
title | string | "Edit profile" |
description | string | "Make changes to your profile here. Click save when you're done." |
actionLabel | string | "Save changes" |
cancelLabel | string | "Cancel" |
theme | Partial<FramecnTheme> | - |
className | string | - |