### Install Credenza using npm

Source: https://github.com/redpangilinan/credenza/blob/main/README.md

This command installs the Credenza modal component using npm. It provides an alternative installation method for users who prefer npm or are not using pnpm.

```bash
npx shadcn@latest add https://credenza.rdev.pro/r/credenza.json
```

--------------------------------

### Install shadcn/ui Components

Source: https://github.com/redpangilinan/credenza/blob/main/README.md

Command to add the dialog and drawer components from shadcn/ui using the npx command-line interface.

```bash
npx shadcn@latest add dialog drawer
```

--------------------------------

### Install Credenza using shadcn registry

Source: https://github.com/redpangilinan/credenza/blob/main/README.md

This command installs the Credenza modal component using the shadcn registry, which is the recommended method for integration. It fetches the component's configuration and assets directly.

```bash
pnpm dlx shadcn@latest add https://credenza.rdev.pro/r/credenza.json
```

--------------------------------

### Install vaul Dependency

Source: https://github.com/redpangilinan/credenza/blob/main/README.md

Command to install the 'vaul' library, which is a dependency for the drawer component if manually copied.

```bash
npm install vaul
```

--------------------------------

### Enabling Background Scaling

Source: https://github.com/redpangilinan/credenza/blob/main/README.md

Shows how to wrap the application with `vaul-drawer-wrapper` to enable background scaling for the drawer component. It also advises updating the background color to match the project's theme.

```html
<div vaul-drawer-wrapper="" className="bg-background">{children}</div>
```

--------------------------------

### Credenza Component Imports

Source: https://github.com/redpangilinan/credenza/blob/main/README.md

Imports necessary components for using the Credenza modal, including Credenza, CredenzaBody, CredenzaClose, CredenzaContent, CredenzaDescription, CredenzaFooter, CredenzaHeader, CredenzaTitle, and CredenzaTrigger.

```tsx
import {
  Credenza,
  CredenzaBody,
  CredenzaClose,
  CredenzaContent,
  CredenzaDescription,
  CredenzaFooter,
  CredenzaHeader,
  CredenzaTitle,
  CredenzaTrigger,
} from "@/components/ui/credenza"
```

--------------------------------

### Basic Credenza Usage

Source: https://github.com/redpangilinan/credenza/blob/main/README.md

Demonstrates the basic implementation of the Credenza modal. It uses a button as a trigger to open the modal, which contains a header, body, and footer with a close button.

```tsx
<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>
```

--------------------------------

### Credenza Component Implementation

Source: https://github.com/redpangilinan/credenza/blob/main/README.md

The main Credenza component which conditionally renders either shadcn/ui's Dialog or Drawer based on the `useIsMobile` hook. It manages context for its children to access the mobile state and provides wrapper components for Dialog/Drawer elements like Trigger, Content, Close, etc.

```tsx
"use client"

import * as React from "react"

import { cn } from "@/lib/utils"
import { useIsMobile } from "@/hooks/use-mobile"
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"

interface BaseProps {
  children: React.ReactNode
}

interface RootCredenzaProps extends BaseProps {
  open?: boolean
  onOpenChange?: (open: boolean) => void
}

interface CredenzaProps extends BaseProps {
  className?: string
  asChild?: true
}

const CredenzaContext = React.createContext<{ isMobile: boolean }>({
  isMobile: false,
})

const useCredenzaContext = () => {
  const context = React.useContext(CredenzaContext)
  if (!context) {
    throw new Error(
      "Credenza components cannot be rendered outside the Credenza Context"
    )
  }
  return context
}

const Credenza = ({ children, ...props }: RootCredenzaProps) => {
  const isMobile = useIsMobile()
  const Credenza = isMobile ? Drawer : Dialog

  return (
    <CredenzaContext.Provider value={{ isMobile }}>
      <Credenza {...props} {...(isMobile && { autoFocus: true }) }>
        {children}
      </Credenza>
    </CredenzaContext.Provider>
  )
}

const CredenzaTrigger = ({ className, children, ...props }: CredenzaProps) => {
  const { isMobile } = useCredenzaContext()
  const CredenzaTrigger = isMobile ? DrawerTrigger : DialogTrigger

  return (
    <CredenzaTrigger className={className} {...props}>
      {children}
    </CredenzaTrigger>
  )
}

const CredenzaClose = ({ className, children, ...props }: CredenzaProps) => {
  const { isMobile } = useCredenzaContext()
  const CredenzaClose = isMobile ? DrawerClose : DialogClose

  return (
    <CredenzaClose className={className} {...props}>
      {children}
    </CredenzaClose>
  )
}

const CredenzaContent = ({ className, children, ...props }: CredenzaProps) => {
  const { isMobile } = useCredenzaContext()
  const CredenzaContent = isMobile ? DrawerContent : DialogContent

  return (
    <CredenzaContent className={className} {...props}>
      {children}
    </CredenzaContent>
  )
}

const CredenzaDescription = ({
  className,
  children,
  ...props
}: CredenzaProps) => {
  const { isMobile } = useCredenzaContext()
  const CredenzaDescription = isMobile ? DrawerDescription : DialogDescription

  return (
    <CredenzaDescription className={className} {...props}>
      {children}
    </CredenzaDescription>
  )
}

const CredenzaHeader = ({ className, children, ...props }: CredenzaProps) => {
  const { isMobile } = useCredenzaContext()
  const CredenzaHeader = isMobile ? DrawerHeader : DialogHeader

  return (
    <CredenzaHeader className={className} {...props}>
      {children}
    </CredenzaHeader>
  )
}

const CredenzaTitle = ({ className, children, ...props }: CredenzaProps) => {
  const { isMobile } = useCredenzaContext()
  const CredenzaTitle = isMobile ? DrawerTitle : DialogTitle

  return (
    <CredenzaTitle className={className} {...props}>
      {children}
    </CredenzaTitle>
  )
}

const CredenzaBody = ({ className, children, ...props }: CredenzaProps) => {
  return (
    <div className={cn("px-4 md:px-0", className)} {...props}>
      {children}
    </div>
  )
}

const CredenzaFooter = ({ className, children, ...props }: CredenzaProps) => {
  const { isMobile } = useCredenzaContext()
  const CredenzaFooter = isMobile ? DrawerFooter : DialogFooter

  return (
    <CredenzaFooter className={className} {...props}>
      {children}
    </CredenzaFooter>
  )
}

export {
  Credenza,

```

--------------------------------

### Credenza Usage with State Management

Source: https://github.com/redpangilinan/credenza/blob/main/README.md

Illustrates how to control the Credenza modal's open/closed state using React state. A button click updates the state, which in turn controls the modal's visibility via the `open` and `onOpenChange` props.

```tsx
function StateModal() {
  const [open, setOpen] = React.useState(false)

  const handleOpen = () => {
    setOpen(true)
  }

  return (
    <>
      <Button onClick={handleOpen}>Open with State</Button>

      <Credenza open={open} onOpenChange={setOpen}>
        <CredenzaContent>
          <CredenzaHeader>
            <CredenzaTitle>Credenza</CredenzaTitle>
            <CredenzaDescription>
              A responsive modal component for shadcn/ui.
            </CredenzaDescription>
          </CredenzaHeader>
          <CredenzaBody>This modal got triggered using state</CredenzaBody>
          <CredenzaFooter>
            <CredenzaClose asChild>
              <Button>Close</Button>
            </CredenzaClose>
          </CredenzaFooter>
        </CredenzaContent>
      </Credenza>
    </>
  )
}
```

--------------------------------

### useIsMobile Hook

Source: https://github.com/redpangilinan/credenza/blob/main/README.md

A React hook that determines if the current viewport width is below a predefined mobile breakpoint (768px). It uses `window.matchMedia` for efficient updates and returns a boolean indicating the mobile state. The initial state is undefined until the effect runs.

```tsx
import * as React from "react"

const MOBILE_BREAKPOINT = 768

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)

  React.useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
    const onChange = () => {
      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    }
    mql.addEventListener("change", onChange)
    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    return () => mql.removeEventListener("change", onChange)
  }, [])

  return !!isMobile
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.