Vernostudio

Overview

Verno Studio publishes the shareable part of its design system as a shadcn registry. Most of the site's components stay on the site; what the registry is built to travel is the palette underneath them: a full OKLCH color scale plus every CSS variable shadcn components read, so components installed from either registry agree on what values like --background mean.

Alongside the theme, the registry currently includes four components: a badge, a file tree, a JSON viewer and an animated spinner. In total it lists 5 items.

Features

• Theme: The OKLCH color scale and the shadcn variable set in one installable item.
• Badge: Eight hues with a low-contrast pair each, plus inverted and a house gradient, in three sizes with icon space.
• File tree: A directory listing with collapsible folders built from nested disclosures rather than a tree role.
• JSON view: A collapsible tree for JSON payloads with syntax roles, search highlighting and the full ARIA tree keyboard model.
• Spinner: A wireframe atom that assembles its three orbits one per beat, then turns as one, in three sizes using the current text color.

Tech stack

• React
• shadcn/ui registry
• OKLCH CSS variables

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @vernostudio/component-name