Introduction
3D components
for React.
React components with soft highlights, sculpted surfaces, and tactile motion. Choose a component to explore its behavior, copy an example, and inspect the source.
The collection
01 / 09Button
A glossy, raised button with a soft highlight and a tactile press.
01 / Actions
Icon button
Compact actions with a tactile press.
02 / Actions
Toggle button
Icon buttons with a persistent pressed state.
03 / Actions
Tabs
A glossy pill slides and resizes to fit the selected tab.
04 / Navigation
Segmented control
Text or icons. One selection at a time.
05 / Navigation
Checkbox
Independent selections with a sculpted check.
06 / Inputs
Switch
A glossy thumb with a sliding on/off state.
07 / Inputs
Liquid selector
Grab near an edge to stretch the surface. Release to let it settle.
08 / Motion
Liquid toggle
A two-position version with the same fluid motion.
09 / Motion
Getting started
These components live in your project. Start with a Next.js application and Tailwind CSS, install the shared dependencies, then copy a component’s source files and styles from its documentation.
npm install motion lucide-react clsx tailwind-merge