Components
Loading preview...
Ready-made responsive modal component for shadcn/ui. Dialog for desktop and Drawer for mobile
@redpangilinan
npx shadcn@latest add https://21st.dev/r/redpangilinan/credenza"use client"
import { Button } from "@/components/ui/button"
import {
Credenza,
CredenzaBody,
CredenzaClose,
CredenzaContent,
CredenzaDescription,
CredenzaFooter,
CredenzaHeader,
CredenzaTitle,
CredenzaTrigger,
} from "@/components/ui/credenza"
function CredenzaDemo() {
return (
<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>
)
}
export { CredenzaDemo };