{"repo":"redpangilinan/credenza","free":true,"listed":false,"github":"https://github.com/redpangilinan/credenza","clone":"git clone https://github.com/redpangilinan/credenza.git","description":"Ready-made responsive modal component for shadcn/ui.","language":"TypeScript","stars":896,"topics":["component","drawer","modal","modal-dialog","next-14","nextjs","react","shadcn-ui"],"license":"MIT","category":"ui-components","readme_excerpt":"Credenza A responsive modal component for shadcn/ui. Installation Using shadcn registry (Recommended) The easiest way to install Credenza is through the shadcn registry: You can also use npm: Manual Installation 1. Copy the dialog and drawer component from shadcn/ui. 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. If you copied the drawer component manually, make sure to install vaul. 2. Copy the useIsMobile hook: use-mobile.ts 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 . See my implementation at layout.tsx. Make sure to update the background color to match your project's theme. Usage Basic usage with CredenzaTrigger Using state to open modal Credits - shadcn/ui by shadcn - Vaul by emilkowalski","default_branch":null,"files":null,"tree":[],"storefront":"/r/redpangilinan","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/redpangilinan/credenza/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}