// Data Display

QR Code

Displays a QR code.

// Rendering preview…

// Install

npx shadcn@latest add @dakik/qr-code

// Usage

1import { QrCode, QrCodeFrame, QrCodeOverlay, QrCodeDownload } from "@/components/ui/qr-code";
2
3<QrCode />

// Code

1"use client";
2
3import { QrCode as ArkQrCode, useQrCodeContext } from "@ark-ui/react/qr-code";
4import type React from "react";
5import { cn } from "@/lib/utils";
6
7export const useQrCode = useQrCodeContext;
8
9export const QrCode = (props: React.ComponentProps<typeof ArkQrCode.Root>) => {
10  const { className, ...rest } = props;
11
12  return (
13    <ArkQrCode.Root
14      className={cn(
15        "[--qr-code-overlay-size:calc(var(--qr-code-size)/4)] [--qr-code-size:--spacing(32)]",
16        "relative",
17        "w-fit",
18        "flex shrink-0 flex-col gap-4",
19        className
20      )}
21      data-slot="qr-code"
22      {...rest}
23    />
24  );
25};
26
27export const QrCodeFrame = (
28  props: React.ComponentProps<typeof ArkQrCode.Frame>

// Dependencies

@ark-ui/react