---
name: "@vernostudio"
slug: "vernostudio"
description: "The full OKLCH scale plus every variable shadcn components read, so anything you install lands on the same tokens instead of its own colors."
category: "Theming/styling"
tags: ["accessibility", "loaders", "media", "theming"]
framework: "react"
license: "MIT"
author: "verno-studio"
website: "https://verno-studio.vercel.app/components"
github: "https://github.com/verno-studio/website"
registry: "https://verno-studio.vercel.app/r/registry.json"
pro: false
pro_url: null
github_stars: 2
component_count: 5
generated_at: "2026-09-05T09:50:59.044Z"
---

# @vernostudio

The full OKLCH scale plus every variable shadcn components read, so anything you install lands on the same tokens instead of its own colors.

## Links

- Website: https://verno-studio.vercel.app/components
- GitHub: https://github.com/verno-studio/website
- Registry JSON: https://verno-studio.vercel.app/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/vernostudio
- This file: https://sh4dcn.vercel.app/md/vernostudio.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://verno-studio.vercel.app/r/registry.json
pnpm dlx shadcn@latest add https://verno-studio.vercel.app/r/registry.json
bunx shadcn@latest add https://verno-studio.vercel.app/r/registry.json
# clone the source repo
git clone https://github.com/verno-studio/website.git
# fetch the raw registry index
curl -s https://verno-studio.vercel.app/r/registry.json
```

## Components (5)

| name | type | description | install |
| --- | --- | --- | --- |
| theme | registry:theme | The color scale plus the variables shadcn components read, so a component from either registry agrees with the other on what --background means. | `npx shadcn@latest add https://verno-studio.vercel.app/r/theme.json` |
| badge | registry:ui | A label for the metadata a reader scans rather than reads. Eight hues with a low-contrast pair each, plus inverted and the house gradient, in three sizes with … | `npx shadcn@latest add https://verno-studio.vercel.app/r/badge.json` |
| file-tree | registry:ui | A directory listing with collapsible folders, built from nested disclosures rather than a tree role. | `npx shadcn@latest add https://verno-studio.vercel.app/r/file-tree.json` |
| json-view | registry:ui | A collapsible tree for inspecting a JSON payload, with syntax roles, search highlighting and the full ARIA tree keyboard model. | `npx shadcn@latest add https://verno-studio.vercel.app/r/json-view.json` |
| spinner | registry:ui | A wireframe atom that assembles itself and then turns in space: three orbits arrive one per beat, then the whole thing turns as one. Three sizes, in the curren… | `npx shadcn@latest add https://verno-studio.vercel.app/r/spinner.json` |

## For AI agents

```text
You are adding components from @vernostudio to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/vernostudio.md) for the component list.
2. Fetch the machine-readable index: https://verno-studio.vercel.app/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: vernostudio).
```