export const title = "QR code components"
export const description = "Free and open-source React QR code components built for modern applications and websites. This component is built using QR Code Styling library and styled with Tailwind CSS."
export const links = {
    github: "https://github.com/untitleduico/react/tree/main/components/shared-assets/qr-code",
}

import { QRCode, GradientScan } from "@/components/shared-assets/qr-code.tsx";

<PreviewAndCode title="QR code example">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <QRCode value="https://www.untitledui.com/" size="lg" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```jsx
        import { QRCode } from '@/components/shared-assets/qr-code';

        <QRCode value="https://www.untitledui.com/" size="lg" />
        ```
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this QR code component using our CLI or manually:

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui@latest add qr-code
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Install dependencies">
                As our QR code component is built with [qr-code-styling](https://qr-code-styling.com/), you'll need to install the dependencies:
                ```bash
                npm install qr-code-styling
                ```
            </Step>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="shared-assets/qr-code" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the QR code component in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>

<Divider />

## QR code examples

Below are examples and variations of this QR code component:

### Default

In order to use the default QR code, you can simply import the component and pass the value you want to encode in the QR code via the `value` prop.

<PreviewAndCode title="Default example">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-8 items-center justify-center py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <QRCode value="https://www.untitledui.com/" size="md" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```jsx
        import { QRCode } from '@/components/shared-assets/qr-code';

        <QRCode value="https://www.untitledui.com/" size="md" />
        ```
    </TabPanel>
</PreviewAndCode>

### Large

You can change the size of the QR code by passing the `size` prop. For example, to use a large QR code, you can pass `size="lg"` to the component.

<PreviewAndCode title="Large example">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-8 items-center justify-center py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <QRCode value="https://www.untitledui.com/" size="lg" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```jsx
        import { QRCode } from '@/components/shared-assets/qr-code';

        <QRCode value="https://www.untitledui.com/" size="lg" />
        ```
    </TabPanel>
</PreviewAndCode>

### With gradient scan

You can add a gradient scan effect to the QR code by passing using the `GradientScan` component together with the `QRCode` component.

<PreviewAndCode title="With gradient scan example">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-8 items-center justify-center py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="relative flex w-full items-center justify-center max-w-60 aspect-square">
            <QRCode value="https://www.untitledui.com/" size="md" />
            <GradientScan />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```jsx
        import { QRCode, GradientScan } from '@/components/shared-assets/qr-code';

        <div className="relative flex w-full items-center justify-center max-w-60 aspect-square">
            <QRCode value="https://www.untitledui.com/" size="md" />
            <GradientScan />
        </div>
        ```
    </TabPanel>
</PreviewAndCode>

### With custom options

The QR code component is built using [QR Code Styling](https://github.com/kozakdenys/qr-code-styling) library, which provides a lot of customization options. For example, to add an image to the QR code, you can pass your image URL to the `options.image`. To see the full list of options, please refer to the [QR Code Styling documentation](https://github.com/kozakdenys/qr-code-styling?tab=readme-ov-file#api-documentation).

<PreviewAndCode title="With custom options example">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-8 items-center justify-center py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <QRCode
            size="lg"
            value="https://www.untitledui.com/"
            options={{
                image: "https://www.untitledui.com/shared-assets/untitledui-logomark.png",
                imageOptions: { imageSize: 0.5, margin: 2 },
                dotsOptions: { color: "#53389e" },
                cornersSquareOptions: { color: "#53389e" },
                cornersDotOptions: { color: "#53389e" },
            }}
        />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        ```jsx
        import { QRCode } from '@/components/shared-assets/qr-code';

        <QRCode
            size="lg"
            value="https://www.untitledui.com/"
            options={{
                image: "/untitledui-logomark.png",
                imageOptions: { imageSize: 0.5, margin: 2 },
                dotsOptions: { color: "#53389e" },
                cornersSquareOptions: { color: "#53389e" },
                cornersDotOptions: { color: "#53389e" },
            }}
        />
        ```
    </TabPanel>
</PreviewAndCode>