Tactile CSS

Neumorphic UI with physical material themes

Soft, Tactile, Beautiful

A minimal neumorphic CSS library with physical material themes.

Installation

npm
npm install tactile-css
CDN (jsDelivr)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tactile-css/dist/tactile.min.css">
CDN (unpkg)
<link rel="stylesheet" href="https://unpkg.com/tactile-css/dist/tactile.min.css">

Shadows

Outer
Small
Large
Inner
Small
Clay (Claymorphism)
Clay
Small
Large

Buttons

Clay

Input

Select and field styles now ship with the library.

Basics

Badge
Default Primary Warning Success
Avatar
AL
TK
UI
Checkbox & Switch

Segmented Control

Tabs

Tabs share the same pressed neumorphic interaction pattern while keeping content blocks readable.

Keypad

Overlay

Saved
Everything is in sync.

Delete note?

This action cannot be undone.

Accordion

What is included now?
Buttons, inputs, tabs, overlay patterns, keyboard primitives, and a growing React wrapper set.
Can I use these with React?
Yes. Import the CSS once and use the components from tactile-css/react.

Keyboard

Clay

Radial Gauge

30%
70%
100%
60%

Progress

Clay

Slider

Clay

FAB

Clay

Cards

Raised

Outer shadow

Inset

Inner shadow

Clay

Fluffy feel

Generative AI

AI Workspace

Build full copilots, not just single bubbles.

The AI primitives are designed to compose into a complete review flow: pinned context, assistant output, user follow-up, quick actions, and an embedded composer.

3 Priority issues
12s Draft latency
94% Context reuse
Pinned context
You are a product copilot. Prioritize onboarding friction, retention impact, and experiment readiness.
Assistant · GPT-5 Product Analyst · 9:41
Activation Onboarding High confidence

Three drop-offs stand out. The biggest leak happens before the first successful integration, so that is the best first experiment.

  • Users stall on workspace setup before they reach the first useful moment.
  • The invite step appears too early and interrupts solo activation.
  • Reporting loads late, so value is visible after intent has already decayed.
You · 9:42

Turn that into a two-week rollout plan and call out the riskiest experiment.

Assistant · Drafting rollout

Start with activation copy and setup simplification, then test the invite timing once the first-run path is cleaner.

Week 1
- shorten setup to one primary action
- move invites below first success

Week 2
- ship progress checkpoints
- compare assisted vs self-serve onboarding
Streaming from product context

Control Objects

Analog Deck

Displays, knobs, and meters for dashboards that should feel like physical instruments.

These are the kinds of skeuomorphic objects that fit this library naturally: audio panels, climate controls, synth UI, monitoring decks, and timer consoles.

Bus Output
24.8 dB
Warm saturation / live chain
64%
Drive
41%
Tone
82%
Input
57%
Output
Mode
Studio
Noise gate / adaptive trim

Colors

Primary
Success
Danger
Warning
Clay
Primary
Success
Danger
Warning

Modal

Toast

Modal Title

This is a neumorphic modal with soft shadows. Click outside or the button below to close.