Credenza
A responsive modal component for shadcn/ui.
Installation
- Copy the
dialog
anddrawer
component from shadcn/ui.
npx shadcn-ui@latest add dialog npx shadcn-ui@latest add drawer
Alternatively, if you are not using shadcn/ui cli, you can manually copy the components from shadcn/ui or directly copy from dialog.tsx and drawer.tsx.
- Copy the
useMediaQuery
hook: use-media-query.tsx
import * as React from "react" export function useMediaQuery(query: string) { const [value, setValue] = React.useState(false) React.useEffect(() => { function onChange(event: MediaQueryListEvent) { setValue(event.matches) } const result = matchMedia(query) result.addEventListener("change", onChange) setValue(result.matches) return () => result.removeEventListener("change", onChange) }, [query]) return value }
- Copy the
credenza
component: credenza.tsx
Click to show code
- Update the import paths based on your project structure.
- If you want to enable background scaling, wrap your app with the
vaul-drawer-wrapper
.
<div vaul-drawer-wrapper="" className="bg-background">{children}</div>
See my implementation at layout.tsx. Make sure to update the background color to match your project’s theme.
Usage
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>
Credits
- shadcn/ui by shadcn
- Vaul by emilkowalski