---
name: "@washiveil"
slug: "washiveil"
description: "Washi at the ground, veils above, three lights beneath. A design system with Chinese & Japanese typography considered from the start."
category: "Charts/data viz"
tags: ["auth", "buttons", "cards", "charts", "design-system", "forms", "glassmorphism", "loaders", "media", "navigation", "overlays", "tables", "theming"]
framework: "react"
license: "MIT"
author: "tochny"
website: "https://washiveil.alexchih.com"
github: "https://github.com/tochny/washiveil"
registry: "https://washiveil.alexchih.com/r/registry.json"
pro: false
pro_url: null
github_stars: 5
component_count: 58
generated_at: "2026-09-05T09:50:59.044Z"
---

# @washiveil

Washi at the ground, veils above, three lights beneath. A design system with Chinese & Japanese typography considered from the start.

## Links

- Website: https://washiveil.alexchih.com
- GitHub: https://github.com/tochny/washiveil
- Registry JSON: https://washiveil.alexchih.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/washiveil
- This file: https://sh4dcn.vercel.app/md/washiveil.md

## Install

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

## Components (58)

| name | type | description | install |
| --- | --- | --- | --- |
| theme | registry:theme | Warm washi ground, translucent glass veils, and the ruri/korozen/sumire tri-color — light and dark. Installs the token layer every Washi Veil component builds … | `npx shadcn@latest add https://washiveil.alexchih.com/r/theme.json` |
| ambient-field | registry:ui | Viewport-fixed tri-color light field the page scrolls over — WebGL glows with per-pixel dither, CSS fallback for first paint, film-grain overlay. Reduced-motio… | `npx shadcn@latest add https://washiveil.alexchih.com/r/ambient-field.json` |
| glass-nav | registry:ui | Floating glass pill navigation — sliding hover pill, scroll-adaptive contrast, masked blur scroll edge, working mobile sheet. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-nav.json` |
| theme-toggle | registry:ui | Class-strategy dark mode toggle with localStorage persistence and no-flash pre-paint script helper. | `npx shadcn@latest add https://washiveil.alexchih.com/r/theme-toggle.json` |
| glass-card | registry:ui | The base translucent surface — blurred white veil on washi in light, lifted warm dark in dark. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-card.json` |
| glass-button | registry:ui | Pill button in three registers — korozen primary, quiet secondary outline, ruri tinted. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-button.json` |
| chip | registry:ui | Taxonomy pill in the tri-color hues (ruri / korozen / sumire) plus a neutral glass register. | `npx shadcn@latest add https://washiveil.alexchih.com/r/chip.json` |
| stat-strip | registry:ui | Three-up stat band with tri-colored numerals on a glass surface. | `npx shadcn@latest add https://washiveil.alexchih.com/r/stat-strip.json` |
| status-badge | registry:ui | Live-status pill with a pulse dot on a glass ground. | `npx shadcn@latest add https://washiveil.alexchih.com/r/status-badge.json` |
| code-badge | registry:ui | Identifier badge for codes and versions — rounded-md mono, distinct from the taxonomy Chip. | `npx shadcn@latest add https://washiveil.alexchih.com/r/code-badge.json` |
| glass-toc | registry:ui | On-this-page navigation card with active-item highlight. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-toc.json` |
| glass-input | registry:ui | Text input on a translucent glass surface with a ruri focus ring. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-input.json` |
| glass-textarea | registry:ui | Multiline input on a translucent glass surface with a ruri focus ring. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-textarea.json` |
| glass-dialog | registry:ui | Modal dialog as a glass veil — blurred translucent panel over a soft scrim, built on Radix Dialog. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-dialog.json` |
| glass-tooltip | registry:ui | Tooltip on the strong glass surface, built on Radix Tooltip. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-tooltip.json` |
| share-row | registry:ui | URL-intent share row — native share sheet when supported, clipboard copy fallback, X/LinkedIn intents. No SDKs, no trackers. | `npx shadcn@latest add https://washiveil.alexchih.com/r/share-row.json` |
| glass-label | registry:ui | Form label in the mono uppercase register. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-label.json` |
| glass-select | registry:ui | Select on the glass field register — popover panel on strong glass, built on Radix Select. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-select.json` |
| glass-switch | registry:ui | Toggle switch — ruri track when on, glass thumb, built on Radix Switch. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-switch.json` |
| glass-checkbox | registry:ui | Checkbox on glass with a ruri checked state, built on Radix Checkbox. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-checkbox.json` |
| glass-radio-group | registry:ui | Radio group on glass with ruri selection dots, built on Radix RadioGroup. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-radio-group.json` |
| glass-slider | registry:ui | Slider with a ruri range on a glass track, built on Radix Slider. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-slider.json` |
| glass-popover | registry:ui | Popover panel on strong glass, built on Radix Popover. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-popover.json` |
| glass-dropdown-menu | registry:ui | Menu on strong glass — items, labels, separators, shortcuts, submenus. Built on Radix DropdownMenu. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-dropdown-menu.json` |
| glass-sheet | registry:ui | Side sheet as a veil — slides from any edge over a soft scrim. Built on Radix Dialog. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-sheet.json` |
| glass-alert-dialog | registry:ui | Confirmation dialog on strong glass, built on Radix AlertDialog. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-alert-dialog.json` |
| glass-hover-card | registry:ui | Hover card on strong glass, built on Radix HoverCard. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-hover-card.json` |
| glass-sonner | registry:ui | Toasts as small veils — sonner styled on the washi glass registers. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-sonner.json` |
| glass-tabs | registry:ui | Pill tab list on a glass ground with a ruri active tab, built on Radix Tabs. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-tabs.json` |
| glass-accordion | registry:ui | Accordion on glass with soft dividers, built on Radix Accordion. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-accordion.json` |
| glass-table | registry:ui | Data table in the washi editorial register — mono uppercase header, soft row dividers. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-table.json` |
| glass-separator | registry:ui | Hairline separator on the soft border register, built on Radix Separator. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-separator.json` |
| glass-alert | registry:ui | Inline alert on glass — neutral, ruri info, korozen warning, destructive. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-alert.json` |
| glass-skeleton | registry:ui | Loading placeholder — a shimmering veil. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-skeleton.json` |
| glass-progress | registry:ui | Progress bar with a ruri fill on a glass track, built on Radix Progress. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-progress.json` |
| glass-avatar | registry:ui | Avatar with a glass ring, built on Radix Avatar. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-avatar.json` |
| glass-breadcrumb | registry:ui | Breadcrumb trail in the quiet text register. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-breadcrumb.json` |
| glass-pagination | registry:ui | Pagination pills on the ghost-circle register. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-pagination.json` |
| glass-context-menu | registry:ui | Right-click menu on strong glass — items, checkboxes, radios, submenus. Built on Radix ContextMenu. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-context-menu.json` |
| glass-menubar | registry:ui | Application menubar on the glass pill with strong-glass dropdowns, built on Radix Menubar. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-menubar.json` |
| glass-navigation-menu | registry:ui | Site navigation with strong-glass flyout panels, built on Radix NavigationMenu. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-navigation-menu.json` |
| glass-collapsible | registry:ui | Show/hide region, built on Radix Collapsible. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-collapsible.json` |
| glass-toggle | registry:ui | Pressed-state pill — quiet until on, then ruri. Built on Radix Toggle. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-toggle.json` |
| glass-toggle-group | registry:ui | Segmented toggles on the glass pill ground, built on Radix ToggleGroup. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-toggle-group.json` |
| glass-scroll-area | registry:ui | Custom scrollbar as a faint veil, built on Radix ScrollArea. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-scroll-area.json` |
| glass-aspect-ratio | registry:ui | Ratio-locked container, built on Radix AspectRatio. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-aspect-ratio.json` |
| glass-kbd | registry:ui | Keyboard key cap in the mono register on a faint glass chip. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-kbd.json` |
| glass-spinner | registry:ui | Loading spinner in the quiet register, reduced-motion safe. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-spinner.json` |
| glass-empty | registry:ui | Empty state — icon, title, description, action slot on a soft glass ground. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-empty.json` |
| glass-drawer | registry:ui | Bottom drawer as a rising veil with a grab handle, built on Vaul. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-drawer.json` |
| glass-input-otp | registry:ui | One-time-code input on glass cells with a ruri active caret. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-input-otp.json` |
| glass-command | registry:ui | Command palette on strong glass — search, groups, shortcuts. Built on cmdk. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-command.json` |
| glass-combobox | registry:ui | Searchable select composed from the command palette inside a popover. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-combobox.json` |
| glass-calendar | registry:ui | Calendar on the washi ground with ruri selection, built on react-day-picker. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-calendar.json` |
| glass-date-picker | registry:ui | Date picker — glass field trigger, calendar in a strong-glass popover. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-date-picker.json` |
| glass-form | registry:ui | react-hook-form wiring with the washiveil label and message registers. | `npx shadcn@latest add https://washiveil.alexchih.com/r/glass-form.json` |
| lang-switcher | registry:ui | Locale switcher on the glass pill — the active language is a filled ruri moment. For sites that take Chinese & Japanese seriously. | `npx shadcn@latest add https://washiveil.alexchih.com/r/lang-switcher.json` |
| prose | registry:item | Article typography with a stance — 1.85 CJK line-height, ruri for interactive marks, korozen for editorial ones. The ink layer of the system. | `npx shadcn@latest add https://washiveil.alexchih.com/r/prose.json` |

## For AI agents

```text
You are adding components from @washiveil to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/washiveil.md) for the component list.
2. Fetch the machine-readable index: https://washiveil.alexchih.com/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: washiveil).
```