{
"$schema": "https://ui.shadcn.com/schema/registry.json",
"name": "washiveil",
"homepage": "https://washiveil.alexchih.com",
"items": [
{
"name": "theme",
"type": "registry:theme",
"title": "Washi Veil Theme",
"description": "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 on.",
"author": "Alex Chih (https://alexchih.com)",
"docs": "Fonts are not bundled — install @fontsource-variable/inter, manrope, jetbrains-mono, noto-sans-tc and noto-sans-jp to pin the stacks; system fonts are the fallback. Text selection ships sumire — the third light’s quietest job. Text contrast meets WCAG AA except the primary fill, which ships display korozen (3.43:1 white label) by design; prefers-contrast: more (or a contrast-more class on ) lifts it to its AA step and hardens control boundaries.",
"cssVars": {
"theme": {
"font-sans": "'Inter Variable', 'Noto Sans TC Variable', 'Noto Sans JP Variable', 'Noto Sans TC', 'Noto Sans JP', ui-sans-serif, system-ui, sans-serif",
"font-display": "'Manrope Variable', 'Noto Sans TC Variable', 'Noto Sans JP Variable', 'Noto Sans TC', 'Noto Sans JP', ui-sans-serif, system-ui, sans-serif",
"font-mono": "'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace",
"color-body": "var(--body)",
"color-faint": "var(--faint)",
"color-glass": "var(--glass)",
"color-glass-border": "var(--glass-border)",
"color-glass-edge": "var(--glass-edge)",
"color-glass-strong": "var(--glass-strong)",
"color-glass-stronger": "var(--glass-stronger)",
"color-ruri": "var(--ruri)",
"color-ruri-soft": "var(--ruri-soft)",
"color-ruri-pale": "var(--ruri-pale)",
"color-korozen": "var(--korozen)",
"color-korozen-soft": "var(--korozen-soft)",
"color-korozen-deep": "var(--korozen-deep)",
"color-sumire": "var(--sumire)",
"color-sumire-soft": "var(--sumire-soft)",
"color-sumire-deep": "var(--sumire-deep)",
"color-deep": "var(--deep)",
"color-code-cream": "var(--code-cream)",
"color-code-panel": "var(--code-panel)",
"color-code-ink": "var(--code-ink)"
},
"light": {
"radius": "1rem",
"background": "#f7f3ec",
"foreground": "#1c1914",
"body": "#4a443c",
"faint": "#9a9184",
"muted": "rgba(28, 25, 20, 0.06)",
"muted-foreground": "#6e6659",
"card": "rgba(255, 255, 255, 0.45)",
"card-foreground": "#1c1914",
"popover": "rgba(255, 255, 255, 0.85)",
"popover-foreground": "#1c1914",
"primary": "#d0722e",
"primary-foreground": "#ffffff",
"secondary": "rgba(255, 255, 255, 0.4)",
"secondary-foreground": "#4a443c",
"accent": "rgba(46, 99, 184, 0.1)",
"accent-foreground": "#2e63b8",
"destructive": "#b0452f",
"destructive-foreground": "#ffffff",
"border": "rgba(28, 25, 20, 0.15)",
"input": "rgba(28, 25, 20, 0.15)",
"ring": "#2e63b8",
"glass": "rgba(255, 255, 255, 0.45)",
"glass-border": "rgba(255, 255, 255, 0.55)",
"glass-edge": "rgba(255, 255, 255, 0.5)",
"glass-strong": "rgba(255, 255, 255, 0.75)",
"glass-stronger": "rgba(255, 255, 255, 0.85)",
"ruri": "#2e63b8",
"ruri-soft": "#82b4f0",
"ruri-pale": "#b7d3f8",
"korozen": "#d0722e",
"korozen-soft": "#f2a36b",
"korozen-deep": "#b64f1b",
"sumire": "#7b68c8",
"sumire-soft": "#a99bea",
"sumire-deep": "#6a58c0",
"deep": "#112441",
"code-cream": "#f0ebe1",
"code-panel": "#16181a",
"code-ink": "#d8dee4",
"veil-grain": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E\")"
},
"dark": {
"background": "#12130f",
"foreground": "#e9e5dc",
"body": "#b5afa2",
"faint": "#7e7869",
"muted": "rgba(255, 255, 255, 0.1)",
"muted-foreground": "#a8a193",
"card": "rgba(255, 255, 255, 0.07)",
"card-foreground": "#e9e5dc",
"popover": "rgba(31, 32, 26, 0.92)",
"popover-foreground": "#e9e5dc",
"primary": "#f2a36b",
"primary-foreground": "#112441",
"secondary": "rgba(255, 255, 255, 0.08)",
"secondary-foreground": "#b5afa2",
"accent": "rgba(130, 180, 240, 0.1)",
"accent-foreground": "#82b4f0",
"destructive": "#e08b74",
"destructive-foreground": "#12130f",
"border": "rgba(255, 255, 255, 0.15)",
"input": "rgba(255, 255, 255, 0.15)",
"ring": "#82b4f0",
"glass": "rgba(255, 255, 255, 0.07)",
"glass-border": "rgba(255, 255, 255, 0.03)",
"glass-edge": "rgba(255, 255, 255, 0.06)",
"glass-strong": "rgba(31, 32, 26, 0.85)",
"glass-stronger": "rgba(31, 32, 26, 0.92)",
"veil-grain": "none"
}
},
"css": {
"h1, h2, h3": {
"text-wrap": "balance"
},
"[lang='ja'] :is(h1, h2, h3)": {
"word-break": "auto-phrase"
},
"::selection": {
"background": "color-mix(in srgb, var(--sumire) 28%, transparent)"
},
".dark ::selection": {
"background": "color-mix(in srgb, var(--sumire-soft) 35%, transparent)"
},
".veil-grain": {
"background-image": "var(--veil-grain)",
"background-size": "128px 128px",
"background-blend-mode": "soft-light"
},
"@media (min-width: 1920px)": {
"html": {
"font-size": "17px"
}
},
"@media (min-width: 2560px)": {
"html": {
"font-size": "19px"
}
},
"@media (prefers-contrast: more)": {
":root": {
"--border": "#8a8072",
"--input": "#8a8072",
"--glass-edge": "rgba(135, 125, 111, 0.9)",
"--primary": "#b64f1b"
},
".dark": {
"--border": "#6e6e68",
"--input": "#6e6e68",
"--glass-edge": "rgba(120, 120, 114, 0.9)",
"--primary": "#f2a36b"
}
},
".contrast-more": {
"--border": "#8a8072",
"--input": "#8a8072",
"--glass-edge": "rgba(135, 125, 111, 0.9)",
"--primary": "#b64f1b"
},
".contrast-more.dark, .contrast-more .dark": {
"--border": "#6e6e68",
"--input": "#6e6e68",
"--glass-edge": "rgba(120, 120, 114, 0.9)",
"--primary": "#f2a36b"
},
"@media (prefers-reduced-motion: reduce)": {
"*, ::before, ::after": {
"animation-duration": "0.01ms !important",
"animation-iteration-count": "1 !important",
"transition-duration": "0.01ms !important"
}
}
}
},
{
"name": "ambient-field",
"type": "registry:ui",
"title": "Ambient Field",
"description": "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-motion safe.",
"author": "Alex Chih (https://alexchih.com)",
"docs": "Render once at the app root, before your content. It is viewport-fixed; everything scrolls over it.",
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/ambient-field.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-nav",
"type": "registry:ui",
"title": "Glass Nav",
"description": "Floating glass pill navigation — sliding hover pill, scroll-adaptive contrast, masked blur scroll edge, working mobile sheet.",
"author": "Alex Chih (https://alexchih.com)",
"docs": "Drop or into the children slot — it renders in the desktop actions zone and the mobile sheet footer. Active state is controlled via activeHref.",
"dependencies": [
"lucide-react"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-nav.tsx",
"type": "registry:ui"
}
]
},
{
"name": "theme-toggle",
"type": "registry:ui",
"title": "Theme Toggle",
"description": "Class-strategy dark mode toggle with localStorage persistence and no-flash pre-paint script helper.",
"author": "Alex Chih (https://alexchih.com)",
"docs": "Place inside in your root layout to avoid a dark-mode flash; put wherever the switch lives.",
"dependencies": [
"lucide-react"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/theme-toggle.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-card",
"type": "registry:ui",
"title": "Glass Card",
"description": "The base translucent surface — blurred white veil on washi in light, lifted warm dark in dark.",
"author": "Alex Chih (https://alexchih.com)",
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-card.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-button",
"type": "registry:ui",
"title": "Glass Button",
"description": "Pill button in three registers — korozen primary, quiet secondary outline, ruri tinted.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"class-variance-authority",
"radix-ui"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-button.tsx",
"type": "registry:ui"
}
]
},
{
"name": "chip",
"type": "registry:ui",
"title": "Chip",
"description": "Taxonomy pill in the tri-color hues (ruri / korozen / sumire) plus a neutral glass register.",
"author": "Alex Chih (https://alexchih.com)",
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/chip.tsx",
"type": "registry:ui"
}
],
"dependencies": [
"radix-ui"
]
},
{
"name": "stat-strip",
"type": "registry:ui",
"title": "Stat Strip",
"description": "Three-up stat band with tri-colored numerals on a glass surface.",
"author": "Alex Chih (https://alexchih.com)",
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/stat-strip.tsx",
"type": "registry:ui"
}
]
},
{
"name": "status-badge",
"type": "registry:ui",
"title": "Status Badge",
"description": "Live-status pill with a pulse dot on a glass ground.",
"author": "Alex Chih (https://alexchih.com)",
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/status-badge.tsx",
"type": "registry:ui"
}
]
},
{
"name": "code-badge",
"type": "registry:ui",
"title": "Code Badge",
"description": "Identifier badge for codes and versions — rounded-md mono, distinct from the taxonomy Chip.",
"author": "Alex Chih (https://alexchih.com)",
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/code-badge.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-toc",
"type": "registry:ui",
"title": "Glass TOC",
"description": "On-this-page navigation card with active-item highlight.",
"author": "Alex Chih (https://alexchih.com)",
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-toc.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-input",
"type": "registry:ui",
"title": "Glass Input",
"description": "Text input on a translucent glass surface with a ruri focus ring.",
"author": "Alex Chih (https://alexchih.com)",
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-input.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-textarea",
"type": "registry:ui",
"title": "Glass Textarea",
"description": "Multiline input on a translucent glass surface with a ruri focus ring.",
"author": "Alex Chih (https://alexchih.com)",
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-textarea.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-dialog",
"type": "registry:ui",
"title": "Glass Dialog",
"description": "Modal dialog as a glass veil — blurred translucent panel over a soft scrim, built on Radix Dialog.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"radix-ui",
"lucide-react"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-dialog.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-tooltip",
"type": "registry:ui",
"title": "Glass Tooltip",
"description": "Tooltip on the strong glass surface, built on Radix Tooltip.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"radix-ui"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-tooltip.tsx",
"type": "registry:ui"
}
]
},
{
"name": "share-row",
"type": "registry:ui",
"title": "Share Row",
"description": "URL-intent share row — native share sheet when supported, clipboard copy fallback, X/LinkedIn intents. No SDKs, no trackers.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"lucide-react"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/share-row.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-label",
"type": "registry:ui",
"title": "Glass Label",
"description": "Form label in the mono uppercase register.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"radix-ui"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-label.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-select",
"type": "registry:ui",
"title": "Glass Select",
"description": "Select on the glass field register — popover panel on strong glass, built on Radix Select.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"radix-ui",
"lucide-react"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-select.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-switch",
"type": "registry:ui",
"title": "Glass Switch",
"description": "Toggle switch — ruri track when on, glass thumb, built on Radix Switch.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"radix-ui"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-switch.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-checkbox",
"type": "registry:ui",
"title": "Glass Checkbox",
"description": "Checkbox on glass with a ruri checked state, built on Radix Checkbox.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"radix-ui",
"lucide-react"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-checkbox.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-radio-group",
"type": "registry:ui",
"title": "Glass Radio Group",
"description": "Radio group on glass with ruri selection dots, built on Radix RadioGroup.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"radix-ui"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-radio-group.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-slider",
"type": "registry:ui",
"title": "Glass Slider",
"description": "Slider with a ruri range on a glass track, built on Radix Slider.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"radix-ui"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-slider.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-popover",
"type": "registry:ui",
"title": "Glass Popover",
"description": "Popover panel on strong glass, built on Radix Popover.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"radix-ui"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-popover.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-dropdown-menu",
"type": "registry:ui",
"title": "Glass Dropdown Menu",
"description": "Menu on strong glass — items, labels, separators, shortcuts, submenus. Built on Radix DropdownMenu.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"radix-ui",
"lucide-react"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-dropdown-menu.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-sheet",
"type": "registry:ui",
"title": "Glass Sheet",
"description": "Side sheet as a veil — slides from any edge over a soft scrim. Built on Radix Dialog.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"radix-ui",
"lucide-react",
"class-variance-authority"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-sheet.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-alert-dialog",
"type": "registry:ui",
"title": "Glass Alert Dialog",
"description": "Confirmation dialog on strong glass, built on Radix AlertDialog.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"radix-ui"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-alert-dialog.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-hover-card",
"type": "registry:ui",
"title": "Glass Hover Card",
"description": "Hover card on strong glass, built on Radix HoverCard.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"radix-ui"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-hover-card.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-sonner",
"type": "registry:ui",
"title": "Glass Sonner",
"description": "Toasts as small veils — sonner styled on the washi glass registers.",
"author": "Alex Chih (https://alexchih.com)",
"docs": "Mount once at the root, then call toast() from anywhere.",
"dependencies": [
"sonner"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-sonner.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-tabs",
"type": "registry:ui",
"title": "Glass Tabs",
"description": "Pill tab list on a glass ground with a ruri active tab, built on Radix Tabs.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"radix-ui"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-tabs.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-accordion",
"type": "registry:ui",
"title": "Glass Accordion",
"description": "Accordion on glass with soft dividers, built on Radix Accordion.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"radix-ui",
"lucide-react"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-accordion.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-table",
"type": "registry:ui",
"title": "Glass Table",
"description": "Data table in the washi editorial register — mono uppercase header, soft row dividers.",
"author": "Alex Chih (https://alexchih.com)",
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-table.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-separator",
"type": "registry:ui",
"title": "Glass Separator",
"description": "Hairline separator on the soft border register, built on Radix Separator.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"radix-ui"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-separator.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-alert",
"type": "registry:ui",
"title": "Glass Alert",
"description": "Inline alert on glass — neutral, ruri info, korozen warning, destructive.",
"author": "Alex Chih (https://alexchih.com)",
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-alert.tsx",
"type": "registry:ui"
}
],
"dependencies": [
"class-variance-authority"
]
},
{
"name": "glass-skeleton",
"type": "registry:ui",
"title": "Glass Skeleton",
"description": "Loading placeholder — a shimmering veil.",
"author": "Alex Chih (https://alexchih.com)",
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-skeleton.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-progress",
"type": "registry:ui",
"title": "Glass Progress",
"description": "Progress bar with a ruri fill on a glass track, built on Radix Progress.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"radix-ui"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-progress.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-avatar",
"type": "registry:ui",
"title": "Glass Avatar",
"description": "Avatar with a glass ring, built on Radix Avatar.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"radix-ui"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-avatar.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-breadcrumb",
"type": "registry:ui",
"title": "Glass Breadcrumb",
"description": "Breadcrumb trail in the quiet text register.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"lucide-react",
"radix-ui"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-breadcrumb.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-pagination",
"type": "registry:ui",
"title": "Glass Pagination",
"description": "Pagination pills on the ghost-circle register.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"lucide-react"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-pagination.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-context-menu",
"type": "registry:ui",
"title": "Glass Context Menu",
"description": "Right-click menu on strong glass — items, checkboxes, radios, submenus. Built on Radix ContextMenu.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"radix-ui",
"lucide-react"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-context-menu.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-menubar",
"type": "registry:ui",
"title": "Glass Menubar",
"description": "Application menubar on the glass pill with strong-glass dropdowns, built on Radix Menubar.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"radix-ui",
"lucide-react"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-menubar.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-navigation-menu",
"type": "registry:ui",
"title": "Glass Navigation Menu",
"description": "Site navigation with strong-glass flyout panels, built on Radix NavigationMenu.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"radix-ui",
"lucide-react",
"class-variance-authority"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-navigation-menu.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-collapsible",
"type": "registry:ui",
"title": "Glass Collapsible",
"description": "Show/hide region, built on Radix Collapsible.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"radix-ui"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-collapsible.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-toggle",
"type": "registry:ui",
"title": "Glass Toggle",
"description": "Pressed-state pill — quiet until on, then ruri. Built on Radix Toggle.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"radix-ui",
"class-variance-authority"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-toggle.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-toggle-group",
"type": "registry:ui",
"title": "Glass Toggle Group",
"description": "Segmented toggles on the glass pill ground, built on Radix ToggleGroup.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"radix-ui",
"class-variance-authority"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json",
"https://washiveil.alexchih.com/r/glass-toggle.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-toggle-group.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-scroll-area",
"type": "registry:ui",
"title": "Glass Scroll Area",
"description": "Custom scrollbar as a faint veil, built on Radix ScrollArea.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"radix-ui"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-scroll-area.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-aspect-ratio",
"type": "registry:ui",
"title": "Glass Aspect Ratio",
"description": "Ratio-locked container, built on Radix AspectRatio.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"radix-ui"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-aspect-ratio.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-kbd",
"type": "registry:ui",
"title": "Glass Kbd",
"description": "Keyboard key cap in the mono register on a faint glass chip.",
"author": "Alex Chih (https://alexchih.com)",
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-kbd.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-spinner",
"type": "registry:ui",
"title": "Glass Spinner",
"description": "Loading spinner in the quiet register, reduced-motion safe.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"lucide-react"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-spinner.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-empty",
"type": "registry:ui",
"title": "Glass Empty",
"description": "Empty state — icon, title, description, action slot on a soft glass ground.",
"author": "Alex Chih (https://alexchih.com)",
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-empty.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-drawer",
"type": "registry:ui",
"title": "Glass Drawer",
"description": "Bottom drawer as a rising veil with a grab handle, built on Vaul.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"vaul"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-drawer.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-input-otp",
"type": "registry:ui",
"title": "Glass Input OTP",
"description": "One-time-code input on glass cells with a ruri active caret.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"input-otp",
"lucide-react"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-input-otp.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-command",
"type": "registry:ui",
"title": "Glass Command",
"description": "Command palette on strong glass — search, groups, shortcuts. Built on cmdk.",
"author": "Alex Chih (https://alexchih.com)",
"docs": "GlassCommandDialog composes the glass dialog for a ⌘K palette; use GlassCommand alone for inline search.",
"dependencies": [
"cmdk",
"lucide-react"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json",
"https://washiveil.alexchih.com/r/glass-dialog.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-command.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-combobox",
"type": "registry:ui",
"title": "Glass Combobox",
"description": "Searchable select composed from the command palette inside a popover.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"cmdk",
"lucide-react"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json",
"https://washiveil.alexchih.com/r/glass-popover.json",
"https://washiveil.alexchih.com/r/glass-command.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-combobox.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-calendar",
"type": "registry:ui",
"title": "Glass Calendar",
"description": "Calendar on the washi ground with ruri selection, built on react-day-picker.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"react-day-picker",
"lucide-react"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-calendar.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-date-picker",
"type": "registry:ui",
"title": "Glass Date Picker",
"description": "Date picker — glass field trigger, calendar in a strong-glass popover.",
"author": "Alex Chih (https://alexchih.com)",
"dependencies": [
"react-day-picker",
"lucide-react"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json",
"https://washiveil.alexchih.com/r/glass-popover.json",
"https://washiveil.alexchih.com/r/glass-calendar.json",
"https://washiveil.alexchih.com/r/glass-button.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-date-picker.tsx",
"type": "registry:ui"
}
]
},
{
"name": "glass-form",
"type": "registry:ui",
"title": "Glass Form",
"description": "react-hook-form wiring with the washiveil label and message registers.",
"author": "Alex Chih (https://alexchih.com)",
"docs": "Pairs with react-hook-form’s useForm + zodResolver; GlassFormField wires Controller, ids and aria for you.",
"dependencies": [
"react-hook-form",
"@hookform/resolvers",
"zod",
"radix-ui"
],
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json",
"https://washiveil.alexchih.com/r/glass-label.json"
],
"files": [
{
"path": "registry/washiveil/ui/glass-form.tsx",
"type": "registry:ui"
}
]
},
{
"name": "lang-switcher",
"type": "registry:ui",
"title": "Lang Switcher",
"description": "Locale switcher on the glass pill — the active language is a filled ruri moment. For sites that take Chinese & Japanese seriously.",
"author": "Alex Chih (https://alexchih.com)",
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"files": [
{
"path": "registry/washiveil/ui/lang-switcher.tsx",
"type": "registry:ui"
}
]
},
{
"name": "prose",
"type": "registry:item",
"title": "Prose",
"description": "Article typography with a stance — 1.85 CJK line-height, ruri for interactive marks, korozen for editorial ones. The ink layer of the system.",
"author": "Alex Chih (https://alexchih.com)",
"docs": "Pairs with any Shiki/rehype highlighter — the pre/code shell is a veil-grain glass panel; token colors are yours. Prefer solid plates? Override background to var(--code-cream) / var(--code-panel). The demo uses shiki with vitesse-light/dark.",
"registryDependencies": [
"https://washiveil.alexchih.com/r/theme.json"
],
"css": {
".prose": {
"font-size": "1rem",
"line-height": "1.85",
"color": "var(--body)"
},
".prose h2, .prose h3, .prose h4": {
"scroll-margin-top": "6.5rem"
},
".prose h1": {
"margin": "0 0 1rem",
"font-family": "var(--font-display)",
"font-size": "2.25rem",
"font-weight": "500",
"letter-spacing": "-0.025em",
"line-height": "1.2",
"color": "var(--foreground)"
},
"[lang='ja'] .prose h1, [lang^='zh'] .prose h1": {
"font-size": "2rem"
},
".prose h2": {
"margin-top": "2.5rem",
"margin-bottom": "1rem",
"font-family": "var(--font-display)",
"font-size": "1.5rem",
"font-weight": "500",
"color": "var(--foreground)"
},
".prose h3": {
"margin-top": "2rem",
"margin-bottom": "0.75rem",
"font-family": "var(--font-display)",
"font-size": "1.25rem",
"font-weight": "500",
"color": "var(--foreground)"
},
".prose h4": {
"margin-top": "1.5rem",
"margin-bottom": "0.5rem",
"font-size": "1rem",
"font-weight": "600",
"color": "var(--foreground)"
},
".prose p": {
"margin-top": "1rem",
"margin-bottom": "1rem"
},
".prose a": {
"color": "var(--ruri)",
"text-decoration": "underline",
"text-underline-offset": "4px"
},
".prose a:hover": {
"color": "var(--deep)"
},
".dark .prose a": {
"color": "var(--ruri-soft)"
},
".dark .prose a:hover": {
"color": "var(--ruri-pale)"
},
".prose strong": {
"font-weight": "600",
"color": "var(--foreground)"
},
".prose blockquote": {
"margin-top": "1.5rem",
"margin-bottom": "1.5rem",
"border-left": "2px solid var(--korozen)",
"padding-left": "1.25rem",
"font-family": "var(--font-display)",
"font-size": "1.125rem"
},
".dark .prose blockquote": {
"border-left-color": "var(--korozen-soft)"
},
".prose ul": {
"margin-top": "1rem",
"margin-bottom": "1rem",
"list-style-type": "disc",
"padding-left": "1.5rem"
},
".prose ul > li + li": {
"margin-top": "0.375rem"
},
".prose ul li::marker": {
"color": "var(--korozen)"
},
".dark .prose ul li::marker": {
"color": "var(--korozen-soft)"
},
".prose ol": {
"margin-top": "1rem",
"margin-bottom": "1rem",
"list-style-type": "decimal",
"padding-left": "1.5rem"
},
".prose ol > li + li": {
"margin-top": "0.375rem"
},
".prose ol li::marker": {
"color": "var(--korozen)"
},
".dark .prose ol li::marker": {
"color": "var(--korozen-soft)"
},
".prose :not(pre) > code": {
"background": "color-mix(in srgb, var(--foreground) 6%, transparent)",
"border-radius": "0.25rem",
"padding": "0.125rem 0.375rem",
"font-family": "var(--font-mono)",
"font-size": "0.8125rem"
},
".prose pre": {
"margin": "1.5rem 0",
"overflow-x": "auto",
"border-radius": "0.75rem",
"border": "1px solid var(--glass-edge)",
"background-color": "var(--glass)",
"-webkit-backdrop-filter": "blur(12px)",
"backdrop-filter": "blur(12px)",
"padding": "1.25rem",
"font-family": "var(--font-mono)",
"font-size": "0.8125rem",
"line-height": "1.625",
"font-weight": "450"
},
".dark .prose pre": {
"background-color": "var(--glass)",
"color": "var(--code-ink)",
"text-shadow": "0 1px 2px rgba(0, 0, 0, 0.4)"
},
".prose hr": {
"margin-top": "2rem",
"margin-bottom": "2rem",
"border-color": "color-mix(in srgb, var(--foreground) 10%, transparent)"
},
".prose img": {
"border-radius": "0.75rem"
},
".prose table": {
"margin-top": "1.5rem",
"margin-bottom": "1.5rem",
"width": "100%",
"text-align": "left",
"font-size": "0.875rem"
},
".prose thead tr": {
"border-bottom": "1px solid color-mix(in srgb, var(--foreground) 15%, transparent)",
"font-family": "var(--font-mono)",
"font-size": "0.75rem",
"letter-spacing": "0.05em",
"text-transform": "uppercase",
"color": "var(--muted-foreground)"
},
".dark .prose thead tr": {
"border-bottom-color": "color-mix(in srgb, white 15%, transparent)",
"color": "var(--muted-foreground)"
},
".prose th, .prose td": {
"padding": "0.5rem 1rem 0.5rem 0"
},
".prose tbody tr": {
"border-bottom": "1px solid color-mix(in srgb, var(--foreground) 8%, transparent)"
},
".prose tbody tr:last-child": {
"border-bottom": "0"
},
".dark .prose tbody tr": {
"border-bottom-color": "color-mix(in srgb, white 8%, transparent)"
},
".dark .prose tbody tr:last-child": {
"border-bottom": "0"
},
".prose figure": {
"margin-top": "1.5rem",
"margin-bottom": "1.5rem"
},
".prose figcaption": {
"margin-top": "0.5rem",
"text-align": "center",
"font-family": "var(--font-mono)",
"font-size": "0.75rem",
"color": "var(--faint)"
}
}
}
]
}