V-/Srcv0.1.0beta
19 surfaces, one optic.Install the registry once, then add any surface with the shadcn CLI — each refracts for real in Chromium; Safari and Firefox get clear frost. Every tile links to full docs: props, optics, accessibility, and the source you'll own.
// installation
Components are copied into your project through the shadcn CLI. The only npm package is vsrc — the optics engine.
{
"registries": {
"@vsrc": "https://vsrc-weld.vercel.app/r/{name}.json"
}
}npx shadcn add @vsrc/buttonimport { Button } from "@/components/ui/button"
<Button variant="primary">Ship it</Button>
<Button>Clear glass</Button>
<Button variant="ghost">Quiet</Button>Your components.json must use a Radix-based style such as new-york. The Base UI base-nova style rewrites asChild composition during install and breaks these components.
// playground
Pick a surface and drop it over moving type. The middle stays still; the rim bends whatever drifts past.
// glass-surface
Everything bends at the rim.
Content stays legible in the middle; the edge does the optics.
// glass-surface
The refraction primitive every other component builds on.
npx shadcn add @vsrc/glass-surface// input
A glass field. The backdrop stays legible behind your text.
npx shadcn add @vsrc/input// select
A glass trigger and a floating glass panel, Radix typeahead intact.
npx shadcn add @vsrc/select// switch
Glass track, cream thumb, red when checked.
npx shadcn add @vsrc/switch// slider
A glass lens for a thumb; the rim bends the track as it slides. The switch, inverted.
npx shadcn add @vsrc/slider// popover
Anchored glass panel for small forms and detail.
npx shadcn add @vsrc/popover// hover-card
A glass preview that opens on hover or focus.
npx shadcn add @vsrc/hover-card// alert-dialog
A modal that forces a choice: cancel, or one confirming action.
npx shadcn add @vsrc/alert-dialog// sheet
A side panel of glass; softer optics keep big maps cheap.
npx shadcn add @vsrc/sheet// command
cmdk in a glass panel. Press ⌘K anywhere on this site — the palette is the same registry component.
npx shadcn add @vsrc/command// toast
Glass-styled sonner. Toasts move constantly, so they skip the displacement engine by design.
npx shadcn add @vsrc/toast// dock
The signature piece — the brand board's docked nav, in glass.
npx shadcn add @vsrc/dock