# Emboss > A tactile React component library where state is depth: pressed things depress, active things rise, inputs are recessed wells, and every shadow derives from one movable light source (two CSS variables). Components are distributed as TypeScript source through a shadcn-compatible registry — no npm package, the code lands in the consumer's repo. Requires React 19 and Tailwind CSS v4. MIT licensed. ## Install Add the registry namespace to components.json: ```json { "registries": { "@emboss": "https://embossui.vercel.app/r/{name}.json" } } ``` Then add components: `npx shadcn@latest add @emboss/` — or directly by URL with no configuration: `npx shadcn@latest add https://embossui.vercel.app/r/.json`. The registry index for tooling is https://embossui.vercel.app/r/registry.json. Design tokens arrive automatically with the first component. Theme with five variables on :root — --light-x, --light-y (light direction), --depth (relief intensity), --accent-h (accent hue in oklch degrees), --radius-scale. ## Guides - [Introduction](https://embossui.vercel.app/docs): What Emboss is, the thesis behind it, and what ships in the box. - [Installation](https://embossui.vercel.app/docs/installation): Point your project at the registry, add components, or copy the source by hand. - [Theming](https://embossui.vercel.app/docs/theming): Five variables theme the entire system: light direction, depth, accent hue, and radius. - [Depth & Light](https://embossui.vercel.app/docs/depth): The elevation scale, the state-to-depth grammar, and how one light casts every shadow. - [Motion](https://embossui.vercel.app/docs/motion): Five springs drive everything; CSS and JS share one physical model. - [Accessibility](https://embossui.vercel.app/docs/accessibility): Contrast enforced by test, depth as a reinforcing channel, and full keyboard maps. ## Components ### Actions - [Button](https://embossui.vercel.app/docs/components/button): A momentary push button that rests embossed, depresses to flush while held, and springs back with a machined overshoot. Install: `npx shadcn@latest add @emboss/button`. Registry JSON: https://embossui.vercel.app/r/button.json - [Kbd](https://embossui.vercel.app/docs/components/kbd): A machined keycap for keyboard shortcuts — a semantic kbd element with a raised, lit-from-above profile. Install: `npx shadcn@latest add @emboss/kbd`. Registry JSON: https://embossui.vercel.app/r/kbd.json ### Forms - [Input](https://embossui.vercel.app/docs/components/input): A recessed text well. Focus brightens the floor of the well; invalid state deepens the recess and inks the text in danger. Install: `npx shadcn@latest add @emboss/input`. Registry JSON: https://embossui.vercel.app/r/input.json - [Switch](https://embossui.vercel.app/docs/components/switch): A console slide switch: the thumb travels a milled channel and seats with a sprung settle, with engraved I/O glyphs for state. Install: `npx shadcn@latest add @emboss/switch`. Registry JSON: https://embossui.vercel.app/r/switch.json - [Textarea](https://embossui.vercel.app/docs/components/textarea): A multi-line recessed well with focus brightening and content-based growth in supporting browsers. Install: `npx shadcn@latest add @emboss/textarea`. Registry JSON: https://embossui.vercel.app/r/textarea.json - [Checkbox](https://embossui.vercel.app/docs/components/checkbox): A small machined well that fills and rises when checked — state reads through color, shape, and depth together. Install: `npx shadcn@latest add @emboss/checkbox`. Registry JSON: https://embossui.vercel.app/r/checkbox.json - [Radio Group](https://embossui.vercel.app/docs/components/radio-group): Recessed circular wells where the selected option seats an embossed accent pin; arrow keys rove between options. Install: `npx shadcn@latest add @emboss/radio-group`. Registry JSON: https://embossui.vercel.app/r/radio-group.json - [Select](https://embossui.vercel.app/docs/components/select): A picker with an embossed trigger and a floating option list; the highlighted option presses into the surface as you traverse. Install: `npx shadcn@latest add @emboss/select`. Registry JSON: https://embossui.vercel.app/r/select.json - [Slider](https://embossui.vercel.app/docs/components/slider): A fader with a milled channel, an embossed accent fill, and a thumb that lifts to a higher elevation while dragged. Install: `npx shadcn@latest add @emboss/slider`. Registry JSON: https://embossui.vercel.app/r/slider.json - [Input OTP](https://embossui.vercel.app/docs/components/input-otp): A one-time-code field rendered as a row of milled cells over a single real input — paste, autofill, and screen readers all behave normally. Install: `npx shadcn@latest add @emboss/input-otp`. Registry JSON: https://embossui.vercel.app/r/input-otp.json ### Hardware - [Progress](https://embossui.vercel.app/docs/components/progress): A milled channel filling with accent — indeterminate state sweeps instead of pretending to know the total. Install: `npx shadcn@latest add @emboss/progress`. Registry JSON: https://embossui.vercel.app/r/progress.json - [Stepper](https://embossui.vercel.app/docs/components/stepper): A machined number input — a mono readout milled into the chassis, flanked by keycap buttons that auto-repeat when held. Install: `npx shadcn@latest add @emboss/stepper`. Registry JSON: https://embossui.vercel.app/r/stepper.json - [Knob](https://embossui.vercel.app/docs/components/knob): A rotary control machined into a recess — drag vertically to turn it, pro-audio style, or drive it entirely from the keyboard. Install: `npx shadcn@latest add @emboss/knob`. Registry JSON: https://embossui.vercel.app/r/knob.json - [Meter](https://embossui.vercel.app/docs/components/meter): A level meter milled into the chassis — zone colors are painted into the channel and a shutter covers what the value hasn't reached. Install: `npx shadcn@latest add @emboss/meter`. Registry JSON: https://embossui.vercel.app/r/meter.json ### Display - [Card](https://embossui.vercel.app/docs/components/card): A surface for grouped content with three seatings: raised off the page, flush with it, or recessed into a well. Install: `npx shadcn@latest add @emboss/card`. Registry JSON: https://embossui.vercel.app/r/card.json - [Badge](https://embossui.vercel.app/docs/components/badge): An etched part-number chip in neutral, semantic, and outline tints — the label text always carries the meaning. Install: `npx shadcn@latest add @emboss/badge`. Registry JSON: https://embossui.vercel.app/r/badge.json - [Separator](https://embossui.vercel.app/docs/components/separator): A machined score line — a hairline groove whose catch-light follows the global light source. Install: `npx shadcn@latest add @emboss/separator`. Registry JSON: https://embossui.vercel.app/r/separator.json - [Skeleton](https://embossui.vercel.app/docs/components/skeleton): A debossed empty pocket awaiting content, with a slow light sheen sweeping across it. Install: `npx shadcn@latest add @emboss/skeleton`. Registry JSON: https://embossui.vercel.app/r/skeleton.json - [Table](https://embossui.vercel.app/docs/components/table): A semantic table with engraved hairline rules, an etched header strip, and tint-first hover rows. Install: `npx shadcn@latest add @emboss/table`. Registry JSON: https://embossui.vercel.app/r/table.json - [Accordion](https://embossui.vercel.app/docs/components/accordion): Disclosure rows machined into one housing — the open panel recesses into the chassis with a sprung height transition. Install: `npx shadcn@latest add @emboss/accordion`. Registry JSON: https://embossui.vercel.app/r/accordion.json - [Avatar](https://embossui.vercel.app/docs/components/avatar): A portrait set into a machined bezel — the image sits debossed inside the ring and the fallback engraves mono initials. Install: `npx shadcn@latest add @emboss/avatar`. Registry JSON: https://embossui.vercel.app/r/avatar.json ### Navigation - [Tabs](https://embossui.vercel.app/docs/components/tabs): Layered panels switched by a flush rail of triggers — the active tab seats into the rail like a latched key. Install: `npx shadcn@latest add @emboss/tabs`. Registry JSON: https://embossui.vercel.app/r/tabs.json - [Breadcrumb](https://embossui.vercel.app/docs/components/breadcrumb): A trail of locations where the current page sits gently debossed and carries aria-current. Install: `npx shadcn@latest add @emboss/breadcrumb`. Registry JSON: https://embossui.vercel.app/r/breadcrumb.json - [Pagination](https://embossui.vercel.app/docs/components/pagination): Page navigation where the current page is a latched, pressed-in key with tabular numerals. Install: `npx shadcn@latest add @emboss/pagination`. Registry JSON: https://embossui.vercel.app/r/pagination.json - [Segmented Control](https://embossui.vercel.app/docs/components/segmented-control): A bank of positions milled into one housing — a debossed carriage glides between segments with a sprung settle. Install: `npx shadcn@latest add @emboss/segmented-control`. Registry JSON: https://embossui.vercel.app/r/segmented-control.json ### Overlay - [Tooltip](https://embossui.vercel.app/docs/components/tooltip): A floating micro-plate that labels a control on hover or focus, with mono shortcut hints. Install: `npx shadcn@latest add @emboss/tooltip`. Registry JSON: https://embossui.vercel.app/r/tooltip.json - [Popover](https://embossui.vercel.app/docs/components/popover): A floating panel anchored to its trigger, with title and description wired for assistive tech. Install: `npx shadcn@latest add @emboss/popover`. Registry JSON: https://embossui.vercel.app/r/popover.json - [Dialog](https://embossui.vercel.app/docs/components/dialog): A modal plate at the highest float elevation; the page physically recesses behind it while focus is trapped. Install: `npx shadcn@latest add @emboss/dialog`. Registry JSON: https://embossui.vercel.app/r/dialog.json - [Sheet](https://embossui.vercel.app/docs/components/sheet): An edge-anchored tray that slides in from any side and hovers above the page with a live penumbra. Install: `npx shadcn@latest add @emboss/sheet`. Registry JSON: https://embossui.vercel.app/r/sheet.json - [Dropdown Menu](https://embossui.vercel.app/docs/components/dropdown-menu): A floating menu of actions with submenus, checkbox and radio items; the highlighted row presses momentarily into the surface. Install: `npx shadcn@latest add @emboss/dropdown-menu`. Registry JSON: https://embossui.vercel.app/r/dropdown-menu.json - [Toast](https://embossui.vercel.app/docs/components/toast): Floating notification plates with an imperative handle — call toast.add anywhere and the mounted Toaster renders it. Install: `npx shadcn@latest add @emboss/toast`. Registry JSON: https://embossui.vercel.app/r/toast.json - [Command](https://embossui.vercel.app/docs/components/command): A filtering command list with combobox semantics — the virtual highlight walks visible options while focus stays in the input. Install: `npx shadcn@latest add @emboss/command`. Registry JSON: https://embossui.vercel.app/r/command.json ### AI - [Chat Message](https://embossui.vercel.app/docs/components/chat-message): A conversation surface with physical turn-taking — user messages are placed onto the surface, assistant messages are milled into it. Install: `npx shadcn@latest add @emboss/chat-message`. Registry JSON: https://embossui.vercel.app/r/chat-message.json - [Thinking Indicator](https://embossui.vercel.app/docs/components/thinking-indicator): Three pockets breathe between recessed and flush while the assistant works — a status region with visible text. Install: `npx shadcn@latest add @emboss/thinking-indicator`. Registry JSON: https://embossui.vercel.app/r/thinking-indicator.json - [Streaming Text](https://embossui.vercel.app/docs/components/streaming-text): Token-streaming text whose tail fades as if still being machined, with a blinking caret slab and aria-busy semantics. Install: `npx shadcn@latest add @emboss/streaming-text`. Registry JSON: https://embossui.vercel.app/r/streaming-text.json ## Notes - Every docs page shows the component's complete source with consumer-ready import paths. - The registry is MCP-consumable: point shadcn's MCP server at the @emboss namespace. - llms-full.txt contains the full API reference for every component.