Credenza
Ready-made responsive modal component for shadcn/ui.
Powered by
CredenzaInstallation
bash
npx shadcn@latest add @redpanda/credenzabash
pnpm dlx shadcn@latest add @redpanda/credenzabash
yarn dlx shadcn@latest add @redpanda/credenzabash
bunx shadcn@latest add @redpanda/credenzabash
nubx shadcn@latest add @redpanda/credenzabash
aube dlx shadcn@latest add @redpanda/credenzaThis 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.
When to use
Use this decision tree to determine when to use the Credenza component:
Usage
On mobile the drawer is a bottom Drawer: it swipes down to dismiss, and CredenzaTrigger and
CredenzaClose take render on both paths.
tsx
import { Credenza, CredenzaBody, CredenzaClose, CredenzaContent, CredenzaDescription, CredenzaFooter, CredenzaHeader, CredenzaTitle, CredenzaTrigger,} from '@/components/ui/credenza';tsx
<Credenza> <CredenzaTrigger render={<Button>Open modal</Button>} /> <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 components, which are built on Base UI. </CredenzaBody> <CredenzaFooter> <CredenzaClose render={<Button>Close</Button>} /> </CredenzaFooter> </CredenzaContent></Credenza>Examples
Credits
- We use Credenza by redpangilinan for the credenza component.