Credenza
Ready-made responsive modal component for shadcn/ui.
Made by redpangilinanPowered by
Installation
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:
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.
Recent changes
- patchv1.2.0Pin shipped dependency floors to the version we develop against. Registry items now declare ranges like `^5.1.9` (the actual installed version) instead of collapsing to `^5.0.0`, so consumers start on the known-tested b…#133
- minorv1.1.0Theme docs refresh, readability pass on semantic foregrounds, and consumer-facing Base UI regression fixes.#121
- minorv1.0.0Post-Base-UI polish. Public API unchanged.#116
- majorv1.0.0Migrate every Radix-based primitive to `@base-ui/react@^1.4.0` (Base UI).#114
- minorv0.3.0Add theme-provider component to the registry with documentation and tests. Includes playground type improvements (export RegistryItem, remove as-const boilerplate) and docs site dark mode border color fix.#109
Built by malinskibeniamin. The source code is available on GitHub.