Checkbox

Installation

npx shadcn@latest add https://liqui.design/r/checkbox.json

Installing more than one? Register the namespace once in components.json and drop the URLs:

{
  "registries": {
    "@liqui-design": "https://liqui.design/r/{name}.json"
  }
}

npx shadcn@latest add @liqui-design/checkbox

Usage

import { Checkbox, CheckboxLabel } from '@/components/ui/checkbox';

<CheckboxLabel>
  <Checkbox checked={checked} onCheckedChange={setChecked} />
  Show hidden files
</CheckboxLabel>

CheckboxLabel is a plain <label> row. It exists so the whole line is the hit area and so the text dims when the box inside is disabled — that last part is a has-[[data-disabled]] rule, not something the checkbox reaches out to do.

Notes

The smallest surface in the library

At 20px the box is barely wider than its own bezel, so this is where the lens is under the most pressure. The optics are scaled down hard from the popup defaults:

If you raise refraction globally, this component smears first. It is a useful canary — tune here, then check the big surfaces.

Checked state

Checking doesn't swap in a flat filled box. It overrides --lq-tint on the root, so the accent arrives as glass and the bezel and specular arc survive the transition:

data-[checked]:[--lq-tint:color-mix(in_srgb,var(--lq-accent)_88%,transparent)]

Retint through the token if you want a different checked colour, rather than adding a background — a background would paint over the refraction.