Components
Edit profile
Make changes to your profile here. Click save when you're done.
Customize
Installation
$ pnpm dlx shadcn@latest add @framecn/sheet
Usage
import { Sheet } from "@/components/ui/sheet";<Sheet state="opened" />Sheet is a side panel 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 sheet in from the right and closes via useSheetTransition. Pair it with useButtonTransition on the trigger:
import { Sheet } from "@/components/framecn/sheet";
import { useSheetTransition } from "@/components/framecn/use-sheet-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 sheet = useSheetTransition([
{ at: 32, state: "opened", duration: 16 },
{ at: 92, state: "closed", duration: 12 },
]);
<>
<Button label="Edit profile" style={trigger} />
<Sheet
title="Edit profile"
description="Make changes to your profile here. Click save when you're done."
actionLabel="Save changes"
cancelLabel="Cancel"
style={sheet}
/>
</>;style takes precedence over state when both are provided.
API Reference
Sheet
| Prop | Type | Default |
|---|---|---|
state | "opened" | "closed" | "closed" |
style | SheetStyle | - (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 | - |