---
name: "@tactile"
slug: "tactile"
description: "Interface pieces that behave like hardware: an odometer that carries, a liquid-damped compass, a pull-cord lamp, engraved plates and a machined footer. Vanilla JS and CSS with React, Vue and Svelte wrappers. MIT."
category: "Uncategorized"
tags: ["glassmorphism", "overlays", "pro-available"]
framework: "vue"
license: null
author: null
website: "https://tactileui.dev"
github: null
registry: "https://tactileui.dev/r/free/registry.json"
pro: true
pro_url: "https://tactileui.dev/pricing"
github_stars: null
component_count: 6
generated_at: "2026-10-17T06:30:14.294Z"
---

# @tactile

Interface pieces that behave like hardware: an odometer that carries, a liquid-damped compass, a pull-cord lamp, engraved plates and a machined footer. Vanilla JS and CSS with React, Vue and Svelte wrappers. MIT.

## Links

- Website: https://tactileui.dev
- Registry JSON: https://tactileui.dev/r/free/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/tactile
- This file: https://sh4dcn.vercel.app/md/tactile.md
- Pro / pricing: https://tactileui.dev/pricing

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://tactileui.dev/r/free/registry.json
pnpm dlx shadcn@latest add https://tactileui.dev/r/free/registry.json
bunx shadcn@latest add https://tactileui.dev/r/free/registry.json
# fetch the raw registry index
curl -s https://tactileui.dev/r/free/registry.json
```

## Components (6)

| name | type | description | install |
| --- | --- | --- | --- |
| client-plates | registry:block | Block. “Used in production by…”, as metal name plates. Brushed aluminium or anodised black, screwed or riveted, each client’s mark cut into the metal with one … | `npx shadcn@latest add https://tactileui.dev/r/free/client-plates.json` |
| faq-drawer | registry:block | Block. An FAQ as a card-index drawer. Each question is typed along a card’s edge with its subject on a staggered tab; pull one and it lifts out to show the ans… | `npx shadcn@latest add https://tactileui.dev/r/free/faq-drawer.json` |
| machined-footer | registry:block | Block. A footer made as the bottom panel of a device. Printed columns of links, a status window with a real lamp, a changelog key, an Aluminium / Graphite swit… | `npx shadcn@latest add https://tactileui.dev/r/free/machined-footer.json` |
| compass | registry:block | Object. A liquid-damped compass. The card swings past the mark and settles while a lit display reads the bearing. Your hand turns the knurled bezel, one click … | `npx shadcn@latest add https://tactileui.dev/r/free/compass.json` |
| odometer | registry:block | Object. A mechanical drum counter. A digit moves only while the one to its right carries, so 1,099 to 1,100 rolls three drums over together. Not a number that … | `npx shadcn@latest add https://tactileui.dev/r/free/odometer.json` |
| pull-cord | registry:block | Object. A pendant lamp that is a switch. Pull the acorn: the detent resists and snaps, and the filament warms from dull red to white while the lamp sways. It c… | `npx shadcn@latest add https://tactileui.dev/r/free/pull-cord.json` |

## For AI agents

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