The Sheet component is a side modal that can slide in and out from the left or right side of the screen. It serves as the main container for managing state and logic, while the Sheet.Trigger acts as the interactive element to open the Sheet, and the Sheet.Content holds the content, allowing customization of its position.
Make changes to your account here. Click save when you're done.
import { Sheet, Input, Button } from "mogora-ui";
export default function SheetDemo() {
return (
<Sheet>
<Sheet.Trigger>
<Button variant={"clicki"}>Sheet</Button>
</Sheet.Trigger>
<Sheet.Content position="left" className="w-72 flex flex-col gap-2">
<h1 className="text-start font-bold w-full">Account</h1>
<p className="text-sm leading-4 font-medium text-slate-500">
Make changes to your account here. Click save when you're done.
</p>
<Input className="focus:ring-slate-500" theme={"info"} placeholder="Email" />
<Input className="focus:ring-slate-500" theme={"info"} placeholder="Username" />
</Sheet.Content>
</Sheet>
)
}
The main component for managing the Sheet.
| Prop | Type | Description |
|---|---|---|
| children | ReactNode | Elements to be rendered inside the Sheet. |
| open | boolean | Determines whether the Sheet is open or not. |
| onOpenChange | (open: boolean) => void | Callback function triggered when the Sheet state changes. |
| className | string | Additional classes for styling. |
The trigger component used to open the Sheet.
| Prop | Type | Description |
|---|---|---|
| children | ReactNode | The element that can be clicked to open the Sheet. |
| className | string | Additional classes for styling. |
The component that displays the Sheet content.
| Prop | Type | Description |
|---|---|---|
| children | ReactNode | Content to be displayed inside the Sheet. |
| className | string | Additional classes for styling. |
| position | "left" | "right" | Determines the position of the Sheet (left or right). |