@washiveil
Washi at the ground, veils above, three lights beneath. A design system with Chinese & Japanese typography considered from the start.
Install this registry
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 curl -s https://washiveil.alexchih.com/r/registry.json Components
58 totalWarm 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 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 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 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 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 Pill button in three registers — korozen primary, quiet secondary outline, ruri tinted.
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-button.json 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 Three-up stat band with tri-colored numerals on a glass surface.
npx shadcn@latest add https://washiveil.alexchih.com/r/stat-strip.json Live-status pill with a pulse dot on a glass ground.
npx shadcn@latest add https://washiveil.alexchih.com/r/status-badge.json 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 On-this-page navigation card with active-item highlight.
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-toc.json Text input on a translucent glass surface with a ruri focus ring.
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-input.json Multiline input on a translucent glass surface with a ruri focus ring.
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-textarea.json 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 Tooltip on the strong glass surface, built on Radix Tooltip.
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-tooltip.json 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 Form label in the mono uppercase register.
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-label.json 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 Toggle switch — ruri track when on, glass thumb, built on Radix Switch.
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-switch.json Checkbox on glass with a ruri checked state, built on Radix Checkbox.
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-checkbox.json 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 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 Popover panel on strong glass, built on Radix Popover.
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-popover.json 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 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 Confirmation dialog on strong glass, built on Radix AlertDialog.
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-alert-dialog.json Hover card on strong glass, built on Radix HoverCard.
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-hover-card.json Toasts as small veils — sonner styled on the washi glass registers.
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-sonner.json 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 Accordion on glass with soft dividers, built on Radix Accordion.
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-accordion.json 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 Hairline separator on the soft border register, built on Radix Separator.
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-separator.json Inline alert on glass — neutral, ruri info, korozen warning, destructive.
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-alert.json Loading placeholder — a shimmering veil.
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-skeleton.json 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 Avatar with a glass ring, built on Radix Avatar.
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-avatar.json Breadcrumb trail in the quiet text register.
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-breadcrumb.json Pagination pills on the ghost-circle register.
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-pagination.json 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 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 Site navigation with strong-glass flyout panels, built on Radix NavigationMenu.
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-navigation-menu.json Show/hide region, built on Radix Collapsible.
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-collapsible.json Pressed-state pill — quiet until on, then ruri. Built on Radix Toggle.
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-toggle.json Segmented toggles on the glass pill ground, built on Radix ToggleGroup.
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-toggle-group.json Custom scrollbar as a faint veil, built on Radix ScrollArea.
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-scroll-area.json Ratio-locked container, built on Radix AspectRatio.
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-aspect-ratio.json Keyboard key cap in the mono register on a faint glass chip.
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-kbd.json Loading spinner in the quiet register, reduced-motion safe.
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-spinner.json Empty state — icon, title, description, action slot on a soft glass ground.
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-empty.json 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 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 Command palette on strong glass — search, groups, shortcuts. Built on cmdk.
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-command.json Searchable select composed from the command palette inside a popover.
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-combobox.json 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 Date picker — glass field trigger, calendar in a strong-glass popover.
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-date-picker.json react-hook-form wiring with the washiveil label and message registers.
npx shadcn@latest add https://washiveil.alexchih.com/r/glass-form.json 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 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