H
UI by hampton.io
Back to Components
Display

QR Code

Generates a QR code from a value string with configurable size and error correction.

PropsUsage ExampleVariations

Dependencies

  • clsx
  • tailwind-merge
  • qrcode

Files

  • components/ui/qr-code.tsx

Installation

Using shadcn CLI

npx shadcn add qr-code --url https://ui.hampton.io

Manual installation

Copy the component file to your project and install dependencies:

npm install clsx tailwind-merge qrcode

Related Display Components

Activity Timeline

Vertical activity feed with icon, title, description, timestamp, and connector line.

Animated Counter

Counts up to a target value with Framer Motion easing, optional prefix and suffix, and locale formatting.

Calendar Grid

Monthly calendar grid with events and navigation.

Circular Progress

Progress ring with animated stroke and optional value label, built with SVG and Framer Motion.

Comparison Bar

Side by side comparison bars with labels, values, and percentage split.

Comparison Table

Feature comparison table for plans or tiers with boolean checkmarks.