A Responsive React modal component for shadcn/ui

 

Credenza

A responsive modal component for shadcn/ui.

Installation

1. Copy the dialog and drawer 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.

2. 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
}

3. Copy the credenza component: credenza.tsx

Click to show code

4. Update the import paths based on your project structure.

5. 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&apos;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

GitHub

View Github