Overview

Credenza is a responsive modal component designed for shadcn/ui. It allows for the creation of sleek and user-friendly modals in web applications. By integrating with shadcn/ui, Credenza offers a seamless experience for developers working within that ecosystem.

Features

• Responsive Modal: Credenza provides a responsive modal component that adjusts to different screen sizes, ensuring a consistent user experience across devices.
• Easy Installation: Copying the necessary components and hooks from shadcn/ui allows for a straightforward installation process.
• Background Scaling: By wrapping the app with the vaul-drawer-wrapper, background scaling can be enabled to provide a visually appealing backdrop to the modals.

Installation

1. Copy the dialog and drawer component files from shadcn/ui into your project.
2. If you are not using shadcn/ui cli, manually copy the required components from shadcn/ui or directly from dialog.tsx and drawer.tsx.
3. Copy the useMediaQuery hook from use-media-query.tsx into your project.
4. Copy the credenza component from credenza.tsx into your project.
5. Update the import paths based on your project structure.
6. (Optional) If you want to enable background scaling, wrap your app with the vaul-drawer-wrapper. Refer to the implementation in layout.tsx for an example. Make sure to update the background color to match your project’s theme.

Summary

Credenza is a responsive modal component created for shadcn/ui. It offers developers an easy-to-install solution for adding modals to their web applications. With features such as responsiveness and background scaling, Credenza enhances the user experience and seamlessly integrates with shadcn/ui.