{"id":13810077,"url":"https://github.com/redpangilinan/credenza","last_synced_at":"2025-05-15T10:03:24.437Z","repository":{"id":214752138,"uuid":"737234878","full_name":"redpangilinan/credenza","owner":"redpangilinan","description":"Ready-made responsive modal component for shadcn/ui.","archived":false,"fork":false,"pushed_at":"2025-04-04T03:16:23.000Z","size":1271,"stargazers_count":746,"open_issues_count":4,"forks_count":19,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-14T16:57:11.562Z","etag":null,"topics":["component","drawer","modal","modal-dialog","next-14","nextjs","react","shadcn-ui"],"latest_commit_sha":null,"homepage":"https://credenza.rdev.pro","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/redpangilinan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-12-30T09:35:48.000Z","updated_at":"2025-04-11T22:51:59.000Z","dependencies_parsed_at":"2024-03-17T12:27:55.368Z","dependency_job_id":"128ad682-09a9-47c2-b4f3-5ee5b50ea5ab","html_url":"https://github.com/redpangilinan/credenza","commit_stats":null,"previous_names":["redpangilinan/credenza"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redpangilinan%2Fcredenza","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redpangilinan%2Fcredenza/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redpangilinan%2Fcredenza/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redpangilinan%2Fcredenza/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/redpangilinan","download_url":"https://codeload.github.com/redpangilinan/credenza/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254319716,"owners_count":22051072,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","drawer","modal","modal-dialog","next-14","nextjs","react","shadcn-ui"],"created_at":"2024-08-04T02:00:45.090Z","updated_at":"2025-05-15T10:03:19.395Z","avatar_url":"https://github.com/redpangilinan.png","language":"TypeScript","funding_links":[],"categories":["Libs and Components","Components","Components \u0026 Libraries"],"sub_categories":[],"readme":"# Credenza\n\nA responsive modal component for shadcn/ui.\n\n![Demo](https://github.com/redpangilinan/credenza/assets/82772769/d22580b3-9dbc-4a56-95e9-15b4bd278ff0)\n\n## Installation\n\n### Using shadcn registry (Recommended)\n\nThe easiest way to install Credenza is through the shadcn registry:\n\n```bash\npnpm dlx shadcn@latest add https://credenza.rdev.pro/r/credenza.json\n```\n\nYou can also use npm:\n\n```bash\nnpx shadcn@latest add https://credenza.rdev.pro/r/credenza.json\n```\n\n### Manual Installation\n\n1. Copy the `dialog` and `drawer` component from shadcn/ui.\n\n```bash\nnpx shadcn@latest add dialog drawer\n```\n\nAlternatively, if you are not using shadcn/ui cli, you can manually copy the components from [shadcn/ui](https://ui.shadcn.com/docs) or directly copy from [dialog.tsx](src/components/ui/dialog.tsx) and [drawer.tsx](src/components/ui/drawer.tsx).\n\nIf you copied the drawer component manually, make sure to install vaul.\n\n```\nnpm install vaul\n```\n\n2. Copy the `useIsMobile` hook: [use-mobile.ts](src/hooks/use-mobile.ts)\n\n```tsx\nimport * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState\u003cboolean | undefined\u003e(undefined)\n\n  React.useEffect(() =\u003e {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () =\u003e {\n      setIsMobile(window.innerWidth \u003c MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth \u003c MOBILE_BREAKPOINT)\n    return () =\u003e mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n```\n\n3. Copy the `credenza` component: [credenza.tsx](src/components/ui/credenza.tsx)\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to show code\u003c/summary\u003e\n\n```tsx\n\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useIsMobile } from \"@/hooks/use-mobile\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/components/ui/dialog\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/components/ui/drawer\"\n\ninterface BaseProps {\n  children: React.ReactNode\n}\n\ninterface RootCredenzaProps extends BaseProps {\n  open?: boolean\n  onOpenChange?: (open: boolean) =\u003e void\n}\n\ninterface CredenzaProps extends BaseProps {\n  className?: string\n  asChild?: true\n}\n\nconst CredenzaContext = React.createContext\u003c{ isMobile: boolean }\u003e({\n  isMobile: false,\n})\n\nconst useCredenzaContext = () =\u003e {\n  const context = React.useContext(CredenzaContext)\n  if (!context) {\n    throw new Error(\n      \"Credenza components cannot be rendered outside the Credenza Context\"\n    )\n  }\n  return context\n}\n\nconst Credenza = ({ children, ...props }: RootCredenzaProps) =\u003e {\n  const isMobile = useIsMobile()\n  const Credenza = isMobile ? Drawer : Dialog\n\n  return (\n    \u003cCredenzaContext.Provider value={{ isMobile }}\u003e\n      \u003cCredenza {...props} {...(isMobile \u0026\u0026 { autoFocus: true })}\u003e\n        {children}\n      \u003c/Credenza\u003e\n    \u003c/CredenzaContext.Provider\u003e\n  )\n}\n\nconst CredenzaTrigger = ({ className, children, ...props }: CredenzaProps) =\u003e {\n  const { isMobile } = useCredenzaContext()\n  const CredenzaTrigger = isMobile ? DrawerTrigger : DialogTrigger\n\n  return (\n    \u003cCredenzaTrigger className={className} {...props}\u003e\n      {children}\n    \u003c/CredenzaTrigger\u003e\n  )\n}\n\nconst CredenzaClose = ({ className, children, ...props }: CredenzaProps) =\u003e {\n  const { isMobile } = useCredenzaContext()\n  const CredenzaClose = isMobile ? DrawerClose : DialogClose\n\n  return (\n    \u003cCredenzaClose className={className} {...props}\u003e\n      {children}\n    \u003c/CredenzaClose\u003e\n  )\n}\n\nconst CredenzaContent = ({ className, children, ...props }: CredenzaProps) =\u003e {\n  const { isMobile } = useCredenzaContext()\n  const CredenzaContent = isMobile ? DrawerContent : DialogContent\n\n  return (\n    \u003cCredenzaContent className={className} {...props}\u003e\n      {children}\n    \u003c/CredenzaContent\u003e\n  )\n}\n\nconst CredenzaDescription = ({\n  className,\n  children,\n  ...props\n}: CredenzaProps) =\u003e {\n  const { isMobile } = useCredenzaContext()\n  const CredenzaDescription = isMobile ? DrawerDescription : DialogDescription\n\n  return (\n    \u003cCredenzaDescription className={className} {...props}\u003e\n      {children}\n    \u003c/CredenzaDescription\u003e\n  )\n}\n\nconst CredenzaHeader = ({ className, children, ...props }: CredenzaProps) =\u003e {\n  const { isMobile } = useCredenzaContext()\n  const CredenzaHeader = isMobile ? DrawerHeader : DialogHeader\n\n  return (\n    \u003cCredenzaHeader className={className} {...props}\u003e\n      {children}\n    \u003c/CredenzaHeader\u003e\n  )\n}\n\nconst CredenzaTitle = ({ className, children, ...props }: CredenzaProps) =\u003e {\n  const { isMobile } = useCredenzaContext()\n  const CredenzaTitle = isMobile ? DrawerTitle : DialogTitle\n\n  return (\n    \u003cCredenzaTitle className={className} {...props}\u003e\n      {children}\n    \u003c/CredenzaTitle\u003e\n  )\n}\n\nconst CredenzaBody = ({ className, children, ...props }: CredenzaProps) =\u003e {\n  return (\n    \u003cdiv className={cn(\"px-4 md:px-0\", className)} {...props}\u003e\n      {children}\n    \u003c/div\u003e\n  )\n}\n\nconst CredenzaFooter = ({ className, children, ...props }: CredenzaProps) =\u003e {\n  const { isMobile } = useCredenzaContext()\n  const CredenzaFooter = isMobile ? DrawerFooter : DialogFooter\n\n  return (\n    \u003cCredenzaFooter className={className} {...props}\u003e\n      {children}\n    \u003c/CredenzaFooter\u003e\n  )\n}\n\nexport {\n  Credenza,\n  CredenzaTrigger,\n  CredenzaClose,\n  CredenzaContent,\n  CredenzaDescription,\n  CredenzaHeader,\n  CredenzaTitle,\n  CredenzaBody,\n  CredenzaFooter,\n}\n```\n\n\u003c/details\u003e\n\n4. Update the import paths based on your project structure.\n\n5. If you want to enable background scaling, wrap your app with the `vaul-drawer-wrapper`.\n\n```html\n\u003cdiv vaul-drawer-wrapper=\"\" className=\"bg-background\"\u003e{children}\u003c/div\u003e\n```\n\nSee my implementation at [layout.tsx](src/app/layout.tsx). Make sure to update the background color to match your project's theme.\n\n## Usage\n\n```tsx\nimport {\n  Credenza,\n  CredenzaBody,\n  CredenzaClose,\n  CredenzaContent,\n  CredenzaDescription,\n  CredenzaFooter,\n  CredenzaHeader,\n  CredenzaTitle,\n  CredenzaTrigger,\n} from \"@/components/ui/credenza\"\n```\n\nBasic usage with `CredenzaTrigger`\n\n```tsx\n\u003cCredenza\u003e\n  \u003cCredenzaTrigger asChild\u003e\n    \u003cbutton\u003eOpen modal\u003c/button\u003e\n  \u003c/CredenzaTrigger\u003e\n  \u003cCredenzaContent\u003e\n    \u003cCredenzaHeader\u003e\n      \u003cCredenzaTitle\u003eCredenza\u003c/CredenzaTitle\u003e\n      \u003cCredenzaDescription\u003e\n        A responsive modal component for shadcn/ui.\n      \u003c/CredenzaDescription\u003e\n    \u003c/CredenzaHeader\u003e\n    \u003cCredenzaBody\u003e\n      This component is built using shadcn/ui\u0026apos;s dialog and drawer\n      component, which is built on top of Vaul.\n    \u003c/CredenzaBody\u003e\n    \u003cCredenzaFooter\u003e\n      \u003cCredenzaClose asChild\u003e\n        \u003cbutton\u003eClose\u003c/button\u003e\n      \u003c/CredenzaClose\u003e\n    \u003c/CredenzaFooter\u003e\n  \u003c/CredenzaContent\u003e\n\u003c/Credenza\u003e\n```\n\nUsing state to open modal\n\n```tsx\nfunction StateModal() {\n  const [open, setOpen] = React.useState(false)\n\n  const handleOpen = () =\u003e {\n    setOpen(true)\n  }\n\n  return (\n    \u003c\u003e\n      \u003cButton onClick={handleOpen}\u003eOpen with State\u003c/Button\u003e\n\n      \u003cCredenza open={open} onOpenChange={setOpen}\u003e\n        \u003cCredenzaContent\u003e\n          \u003cCredenzaHeader\u003e\n            \u003cCredenzaTitle\u003eCredenza\u003c/CredenzaTitle\u003e\n            \u003cCredenzaDescription\u003e\n              A responsive modal component for shadcn/ui.\n            \u003c/CredenzaDescription\u003e\n          \u003c/CredenzaHeader\u003e\n          \u003cCredenzaBody\u003eThis modal got triggered using state\u003c/CredenzaBody\u003e\n          \u003cCredenzaFooter\u003e\n            \u003cCredenzaClose asChild\u003e\n              \u003cButton\u003eClose\u003c/Button\u003e\n            \u003c/CredenzaClose\u003e\n          \u003c/CredenzaFooter\u003e\n        \u003c/CredenzaContent\u003e\n      \u003c/Credenza\u003e\n    \u003c/\u003e\n  )\n}\n```\n\n## Credits\n\n- [shadcn/ui](https://github.com/shadcn-ui/ui) by [shadcn](https://github.com/shadcn)\n- [Vaul](https://github.com/emilkowalski/vaul) by [emilkowalski](https://github.com/emilkowalski)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fredpangilinan%2Fcredenza","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fredpangilinan%2Fcredenza","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fredpangilinan%2Fcredenza/lists"}