UI — identity registry

05 — REGISTRY

Components

The full catalog — 63 components across 7 categories, every one running live below with the line that installs it.

05.1 — CATALOG

Forms & inputs

Everything that takes a value: fields, choosers, and the buttons that submit them.

Open forms & inputs on its own page →

INPUT + LABEL

npx shadcn add https://ui.lscaturchio.xyz/r/input.json

npx shadcn add https://ui.lscaturchio.xyz/r/label.json

TEXTAREA

npx shadcn add https://ui.lscaturchio.xyz/r/textarea.json

SELECT

npx shadcn add https://ui.lscaturchio.xyz/r/select.json

NATIVE-SELECT

npx shadcn add https://ui.lscaturchio.xyz/r/native-select.json

COMBOBOX

npx shadcn add https://ui.lscaturchio.xyz/r/combobox.json

CHECKBOX + SWITCH

Subscribed Dark mode

npx shadcn add https://ui.lscaturchio.xyz/r/checkbox.json

npx shadcn add https://ui.lscaturchio.xyz/r/switch.json

RADIO-GROUP

essays photos code

npx shadcn add https://ui.lscaturchio.xyz/r/radio-group.json

SLIDER

npx shadcn add https://ui.lscaturchio.xyz/r/slider.json

TOGGLE + TOGGLE-GROUP

npx shadcn add https://ui.lscaturchio.xyz/r/toggle.json

npx shadcn add https://ui.lscaturchio.xyz/r/toggle-group.json

BUTTON-GROUP

npx shadcn add https://ui.lscaturchio.xyz/r/button-group.json

INPUT-GROUP

https://

npx shadcn add https://ui.lscaturchio.xyz/r/input-group.json

INPUT-OTP

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

npx shadcn add https://ui.lscaturchio.xyz/r/input-otp.json

FIELD

npx shadcn add https://ui.lscaturchio.xyz/r/field.json

FORM (react-hook-form + zod)

npx shadcn add https://ui.lscaturchio.xyz/r/form.json

CALENDAR

September 2026

npx shadcn add https://ui.lscaturchio.xyz/r/calendar.json

BUTTON

npx shadcn add https://ui.lscaturchio.xyz/r/button.json

05.2 — CATALOG

Overlays

Anything that opens on top of the page — modals, menus, popovers, toasts.

Open overlays on its own page →

DIALOG

npx shadcn add https://ui.lscaturchio.xyz/r/dialog.json

ALERT-DIALOG

npx shadcn add https://ui.lscaturchio.xyz/r/alert-dialog.json

SHEET

npx shadcn add https://ui.lscaturchio.xyz/r/sheet.json

DRAWER

npx shadcn add https://ui.lscaturchio.xyz/r/drawer.json

POPOVER

npx shadcn add https://ui.lscaturchio.xyz/r/popover.json

HOVER-CARD

npx shadcn add https://ui.lscaturchio.xyz/r/hover-card.json

DROPDOWN-MENU

npx shadcn add https://ui.lscaturchio.xyz/r/dropdown-menu.json

CONTEXT-MENU (right-click)

Right-click this paper

npx shadcn add https://ui.lscaturchio.xyz/r/context-menu.json

MENUBAR

npx shadcn add https://ui.lscaturchio.xyz/r/menubar.json

TOOLTIP

npx shadcn add https://ui.lscaturchio.xyz/r/tooltip.json

COMMAND

npx shadcn add https://ui.lscaturchio.xyz/r/command.json

SONNER (toasts)

npx shadcn add https://ui.lscaturchio.xyz/r/sonner.json

05.3 — CATALOG

Navigation

Wayfinding: where you are, where you can go, and how to page through it.

Open navigation on its own page →

BREADCRUMB (composable)

npx shadcn add https://ui.lscaturchio.xyz/r/breadcrumb.json

TABS

Long-form writing on paper.

npx shadcn add https://ui.lscaturchio.xyz/r/tabs.json

NAVIGATION-MENU

npx shadcn add https://ui.lscaturchio.xyz/r/navigation-menu.json

PAGINATION

npx shadcn add https://ui.lscaturchio.xyz/r/pagination.json

SIDEBAR (embedded demo)

npx shadcn add https://ui.lscaturchio.xyz/r/sidebar.json

DIRECTION (RTL)

Layout flips right-to-left.

npx shadcn add https://ui.lscaturchio.xyz/r/direction.json

BREADCRUMB-NAV (derived from the route)

npx shadcn add https://ui.lscaturchio.xyz/r/breadcrumb-nav.json

05.4 — CATALOG

Data display

Read-only surfaces: tables, charts, cards, and the small labels around them.

Open data display on its own page →

TABLE

CATALOGUE — Q2 2026
No.	Item	Amount
NO. 001	Warm paper	$120.00
NO. 002	Forest green	$85.00
NO. 003	Hairline rules	$42.00

npx shadcn add https://ui.lscaturchio.xyz/r/table.json

CHART (recharts)

npx shadcn add https://ui.lscaturchio.xyz/r/chart.json

CAROUSEL

Paper

Green

Mono

npx shadcn add https://ui.lscaturchio.xyz/r/carousel.json

ASPECT-RATIO (16/9)

npx shadcn add https://ui.lscaturchio.xyz/r/aspect-ratio.json

ITEM

On warm paper

An essay about backgrounds that are not white.

npx shadcn add https://ui.lscaturchio.xyz/r/item.json

KBD

⌘⇧K

npx shadcn add https://ui.lscaturchio.xyz/r/kbd.json

MARKER

Reading

2026

npx shadcn add https://ui.lscaturchio.xyz/r/marker.json

EMPTY

Nothing filed yet

The catalogue drawer is open and waiting.

npx shadcn add https://ui.lscaturchio.xyz/r/empty.json

CARD

Editorial card

Hairline border, hover lift, no chrome.

Content on open paper, divided by space and thin lines.

npx shadcn add https://ui.lscaturchio.xyz/r/card.json

BADGE

Default

Secondary

Outline

Destructive

npx shadcn add https://ui.lscaturchio.xyz/r/badge.json

AVATAR

LSUI

npx shadcn add https://ui.lscaturchio.xyz/r/avatar.json

05.5 — CATALOG

Feedback

Status told in the identity's own status tokens — success, warning, info, destructive.

Open feedback on its own page →

ALERT

Filed under identity

The default alert sits on card paper.

Committed

The registry build is green.

Heads up

Two upstream items are unpublished.

Build failed

The drift check wants a registry rebuild.

npx shadcn add https://ui.lscaturchio.xyz/r/alert.json

PROGRESS

npx shadcn add https://ui.lscaturchio.xyz/r/progress.json

SPINNER

Fetching the catalogue…

npx shadcn add https://ui.lscaturchio.xyz/r/spinner.json

SKELETON (identity shimmer)

npx shadcn add https://ui.lscaturchio.xyz/r/skeleton.json

05.6 — CATALOG

Layout

Structure and rhythm: the section shell, dividers, and things that fold away.

Open layout on its own page →

COLLAPSIBLE

Three more essays

npx shadcn add https://ui.lscaturchio.xyz/r/collapsible.json

SEPARATOR

Warm paper

Essays

Photos

Code

npx shadcn add https://ui.lscaturchio.xyz/r/separator.json

RESIZABLE

ONE

TWO

npx shadcn add https://ui.lscaturchio.xyz/r/resizable.json

SCROLL-AREA

NO. 001Catalogue entry

NO. 002Catalogue entry

NO. 003Catalogue entry

NO. 004Catalogue entry

NO. 005Catalogue entry

NO. 006Catalogue entry

NO. 007Catalogue entry

NO. 008Catalogue entry

NO. 009Catalogue entry

NO. 010Catalogue entry

NO. 011Catalogue entry

NO. 012Catalogue entry

npx shadcn add https://ui.lscaturchio.xyz/r/scroll-area.json

ACCORDION

npx shadcn add https://ui.lscaturchio.xyz/r/accordion.json

SECTION + SECTIONHEADER

00 — EXAMPLE

A gallery placard

Mono kicker, Fraunces title, hairline rule. Every page on this site is built out of it.

npx shadcn add https://ui.lscaturchio.xyz/r/section.json

05.7 — CATALOG

AI chat

UI-only chat primitives. They render messages; the backend is yours.

Open ai chat on its own page →

MESSAGE

Can I reuse the site identity in new apps?

Yes — one shadcn add away. Paper, green, and mono come along.

npx shadcn add https://ui.lscaturchio.xyz/r/message.json

BUBBLE

Ship it.

Shipping — CI is already green.

npx shadcn add https://ui.lscaturchio.xyz/r/bubble.json

ATTACHMENT

identity.css14 KB — tokens & gallery language

npx shadcn add https://ui.lscaturchio.xyz/r/attachment.json

MESSAGE-SCROLLER

Pins a transcript to the bottom while tokens stream in, and lets go the moment you scroll up. There is nothing to see without a live stream behind it, so it ships without a demo rather than with a fake one.

npx shadcn add https://ui.lscaturchio.xyz/r/message-scroller.json