---
title: Credenza
description: Ready-made responsive modal component for shadcn/ui.
icon: credit-card
author:
  name: redpangilinan
  url: https://github.com/redpangilinan
search:
  keywords: [responsive dialog, modal]
related:
  - /dialog
  - /drawer
mode: wide
---

<PoweredBy packages={[{ name: 'Credenza', url: 'https://credenza.rdev.pro/' }]} />

### Installation

```package-install
npx shadcn@latest add @redpanda/credenza
```

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.

<ComponentPreview name="credenza-demo" />

## When to use

Use this decision tree to determine when to use the Credenza component:

```mermaid
graph TD;
    A[❓ Need modal/overlay interface?] --> B{What device support?};
    B --> C[✅ Desktop + Mobile responsive];
    B --> D[ℹ️ Desktop only];
    B --> E[ℹ️ Mobile only];

    C --> F[❓ Content complexity?];
    D --> G[ℹ️ Use Dialog instead];
    E --> H[ℹ️ Use Drawer instead];

    F --> I[✅ Forms/complex layouts];
    F --> J[✅ Multi-step processes];
    F --> K[⚠️ Simple confirmations];

    I --> P[❓ Trigger method?];
    J --> P;
    K --> M[⚠️ Use AlertDialog instead];

    P --> Q["✅ Button click (CredenzaTrigger)"];
    P --> R["✅ Programmatic (state-based)"];

    Q --> S[ℹ️ Standard Credenza pattern];
    R --> T[✅ Use state trigger variant];

    classDef recommended fill:#4ade80,stroke:#22c55e,stroke-width:2px,color:#000;
    classDef discouraged fill:#fbbf24,stroke:#f59e0b,stroke-width:2px,color:#000;
    classDef decision fill:#60a5fa,stroke:#3b82f6,stroke-width:2px,color:#fff;
    classDef neutral fill:#9ca3af,stroke:#6b7280,stroke-width:2px,color:#fff;

    class C,I,J,Q,R,T recommended;
    class K,M discouraged;
    class A,B,F,P decision;
    class D,E,G,H,S neutral;
```

## Usage

On mobile the drawer is a bottom [Drawer](/docs/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&apos;s dialog and drawer components, which are built on Base UI.
    </CredenzaBody>
    <CredenzaFooter>
      <CredenzaClose render={<Button>Close</Button>} />
    </CredenzaFooter>
  </CredenzaContent>
</Credenza>
```

## Examples

<ComponentPreview
  name="credenza-demo"
  description="Demo showing a credenza component that combines a dialog and a drawer to create a responsive dialog/modal."
/>

<ComponentPreview
  name="credenza-state-trigger-demo"
  description="Demo showing a credenza component that combines a dialog and a drawer to create a responsive dialog/modal, that can be triggered using state."
/>

## Credits

- We use [Credenza](https://credenza.rdev.pro/) by [redpangilinan](https://github.com/redpangilinan) for the credenza component.