Credenza
Ready-made responsive modal component for shadcn/ui.
Made by redpangilinanPowered by
This is a component that combines a dialog and a drawer, and uses a media query hook to determine what should be shown on the screen depending on the viewport size, creating a responsive dialog/modal.
Loading component...
When to use
Use this decision tree to determine when to use the Credenza component:
Installation
Usage
Wrap your app with the vaul-drawer-wrapper for background scaling
<div vaul-drawer-wrapper="" className="bg-background"> {children} </div>import {
Credenza,
CredenzaBody,
CredenzaClose,
CredenzaContent,
CredenzaDescription,
CredenzaFooter,
CredenzaHeader,
CredenzaTitle,
CredenzaTrigger,
} from "@/components/ui/credenza"<Credenza>
<CredenzaTrigger asChild>
<Button>Open modal</Button>
</CredenzaTrigger>
<CredenzaContent>
<CredenzaHeader>
<CredenzaTitle>Credenza</CredenzaTitle>
<CredenzaDescription>
A responsive modal component for shadcn/ui.
</CredenzaDescription>
</CredenzaHeader>
<CredenzaBody>
This component is built using shadcn/ui's dialog and drawer
component, which is built on top of Vaul.
</CredenzaBody>
<CredenzaFooter>
<CredenzaClose asChild>
<Button>Close</Button>
</CredenzaClose>
</CredenzaFooter>
</CredenzaContent>
</Credenza>Examples
Loading component...
Loading component...
Credits
- We use Credenza by redpangilinan for the credenza component.
Built by malinskibeniamin. The source code is available on GitHub.