---
name: "@interior"
slug: "interior"
description: "Copy-paste React micro-interactions: a headless hook plus a styled example in one self-contained file, with motion as the only dependency."
category: "Animated components"
tags: ["animation", "auth", "buttons", "cards", "forms", "hooks", "icons", "loaders", "media", "navigation", "overlays", "tables"]
framework: "react"
license: "MIT"
author: "ddoemonn"
website: "https://www.interior.dev"
github: "https://github.com/ddoemonn/interior"
registry: "https://www.interior.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 764
component_count: 54
generated_at: "2026-09-05T09:50:59.044Z"
---

# @interior

Copy-paste React micro-interactions: a headless hook plus a styled example in one self-contained file, with motion as the only dependency.

## Links

- Website: https://www.interior.dev
- GitHub: https://github.com/ddoemonn/interior
- Registry JSON: https://www.interior.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/interior
- This file: https://sh4dcn.vercel.app/md/interior.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://www.interior.dev/r/registry.json
pnpm dlx shadcn@latest add https://www.interior.dev/r/registry.json
bunx shadcn@latest add https://www.interior.dev/r/registry.json
# clone the source repo
git clone https://github.com/ddoemonn/interior.git
# fetch the raw registry index
curl -s https://www.interior.dev/r/registry.json
```

## Components (54)

| name | type | description | install |
| --- | --- | --- | --- |
| copy-button | registry:ui | Copy to tick, width locked, reverts after 2s. | `npx shadcn@latest add https://www.interior.dev/r/copy-button.json` |
| loading-button | registry:ui | Label to state without layout shift. | `npx shadcn@latest add https://www.interior.dev/r/loading-button.json` |
| hold-to-confirm | registry:ui | A guard rail in front of destructive actions. | `npx shadcn@latest add https://www.interior.dev/r/hold-to-confirm.json` |
| like-burst | registry:ui | Optimistic like that survives rapid taps. | `npx shadcn@latest add https://www.interior.dev/r/like-burst.json` |
| ripple | registry:ui | Touch feedback from the pointer origin. | `npx shadcn@latest add https://www.interior.dev/r/ripple.json` |
| icon-morph | registry:ui | Play/pause, menu/close as one mechanism. | `npx shadcn@latest add https://www.interior.dev/r/icon-morph.json` |
| press-depth | registry:ui | The feeling that the press landed. | `npx shadcn@latest add https://www.interior.dev/r/press-depth.json` |
| floating-label | registry:ui | The label makes room instead of disappearing. | `npx shadcn@latest add https://www.interior.dev/r/floating-label.json` |
| inline-validation | registry:ui | Error message that does not shove the form. | `npx shadcn@latest add https://www.interior.dev/r/inline-validation.json` |
| password-strength | registry:ui | Strength read segment by segment. | `npx shadcn@latest add https://www.interior.dev/r/password-strength.json` |
| otp-input | registry:ui | Auto advance, paste, error recovery. | `npx shadcn@latest add https://www.interior.dev/r/otp-input.json` |
| tag-input | registry:ui | Enter adds, backspace highlights then removes. | `npx shadcn@latest add https://www.interior.dev/r/tag-input.json` |
| expanding-search | registry:ui | Icon to field with focus handled. | `npx shadcn@latest add https://www.interior.dev/r/expanding-search.json` |
| skeleton-swap | registry:ui | Skeleton to content with zero layout shift. | `npx shadcn@latest add https://www.interior.dev/r/skeleton-swap.json` |
| progress-bar | registry:ui | Indeterminate handing over to determinate. | `npx shadcn@latest add https://www.interior.dev/r/progress-bar.json` |
| load-more | registry:ui | Sentinel that loads before you hit the end. | `npx shadcn@latest add https://www.interior.dev/r/load-more.json` |
| streaming-text | registry:ui | Token by token with a caret. | `npx shadcn@latest add https://www.interior.dev/r/streaming-text.json` |
| task-steps | registry:ui | The system narrates its work. | `npx shadcn@latest add https://www.interior.dev/r/task-steps.json` |
| live-activity | registry:ui | The system's ongoing work, worn as a small object. | `npx shadcn@latest add https://www.interior.dev/r/live-activity.json` |
| collapsible-banner | registry:ui | Folds to its title, or lets go entirely. | `npx shadcn@latest add https://www.interior.dev/r/collapsible-banner.json` |
| presence-avatars | registry:ui | Join and leave as a layout change. | `npx shadcn@latest add https://www.interior.dev/r/presence-avatars.json` |
| typing-indicator | registry:ui | Someone is writing. | `npx shadcn@latest add https://www.interior.dev/r/typing-indicator.json` |
| new-items-pill | registry:ui | New content without stealing your scroll. | `npx shadcn@latest add https://www.interior.dev/r/new-items-pill.json` |
| modal | registry:ui | Backdrop, scroll lock, focus trap. | `npx shadcn@latest add https://www.interior.dev/r/modal.json` |
| popover | registry:ui | Knows its origin, flips on collision. | `npx shadcn@latest add https://www.interior.dev/r/popover.json` |
| tooltip-group | registry:ui | Delayed once, instant after that. | `npx shadcn@latest add https://www.interior.dev/r/tooltip-group.json` |
| command-palette | registry:ui | Results reorder as you type. | `npx shadcn@latest add https://www.interior.dev/r/command-palette.json` |
| drawer | registry:ui | Side panel that keeps its place. | `npx shadcn@latest add https://www.interior.dev/r/drawer.json` |
| context-menu | registry:ui | Opens from the pointer, not the corner. | `npx shadcn@latest add https://www.interior.dev/r/context-menu.json` |
| dropdown | registry:ui | Active highlight travels between items. | `npx shadcn@latest add https://www.interior.dev/r/dropdown.json` |
| tabs | registry:ui | One indicator shared across tabs. | `npx shadcn@latest add https://www.interior.dev/r/tabs.json` |
| segmented-control | registry:ui | Thumb slides, label inverts through it. | `npx shadcn@latest add https://www.interior.dev/r/segmented-control.json` |
| accordion | registry:ui | height auto, done correctly. | `npx shadcn@latest add https://www.interior.dev/r/accordion.json` |
| wizard-steps | registry:ui | Transition knows forward from back. | `npx shadcn@latest add https://www.interior.dev/r/wizard-steps.json` |
| pagination | registry:ui | The window moves, the row does not. | `npx shadcn@latest add https://www.interior.dev/r/pagination.json` |
| tree-view | registry:ui | Disclosure the arrow keys can walk. | `npx shadcn@latest add https://www.interior.dev/r/tree-view.json` |
| sticky-header | registry:ui | Condenses as you go down. | `npx shadcn@latest add https://www.interior.dev/r/sticky-header.json` |
| reading-progress | registry:ui | How much is left. | `npx shadcn@latest add https://www.interior.dev/r/reading-progress.json` |
| scroll-spy | registry:ui | The section you are actually in. | `npx shadcn@latest add https://www.interior.dev/r/scroll-spy.json` |
| snap-carousel | registry:ui | Momentum that lands on a slide. | `npx shadcn@latest add https://www.interior.dev/r/snap-carousel.json` |
| hide-on-scroll | registry:ui | Toolbar yields to the content. | `npx shadcn@latest add https://www.interior.dev/r/hide-on-scroll.json` |
| sortable-table | registry:ui | Rows travel to their new order. | `npx shadcn@latest add https://www.interior.dev/r/sortable-table.json` |
| filter-grid | registry:ui | Filtering rearranges, it does not blink. | `npx shadcn@latest add https://www.interior.dev/r/filter-grid.json` |
| value-flash | registry:ui | Marks what just changed. | `npx shadcn@latest add https://www.interior.dev/r/value-flash.json` |
| poll-results | registry:ui | The winner lands last. | `npx shadcn@latest add https://www.interior.dev/r/poll-results.json` |
| slider-detents | registry:ui | Stops you can feel. | `npx shadcn@latest add https://www.interior.dev/r/slider-detents.json` |
| swipe-deck | registry:ui | A stack you decide through. | `npx shadcn@latest add https://www.interior.dev/r/swipe-deck.json` |
| reorder-list | registry:ui | The gap the siblings open is the drop target. | `npx shadcn@latest add https://www.interior.dev/r/reorder-list.json` |
| long-press | registry:ui | Intent confirmed by time, and cancelled by everything else. | `npx shadcn@latest add https://www.interior.dev/r/long-press.json` |
| lightbox | registry:ui | Zoom that returns where it started. | `npx shadcn@latest add https://www.interior.dev/r/lightbox.json` |
| text-reveal | registry:ui | Words arrive in reading order. | `npx shadcn@latest add https://www.interior.dev/r/text-reveal.json` |
| logo-marquee | registry:ui | Stops when you look at it. | `npx shadcn@latest add https://www.interior.dev/r/logo-marquee.json` |
| blur-up-image | registry:ui | Placeholder resolves into the photo. | `npx shadcn@latest add https://www.interior.dev/r/blur-up-image.json` |
| show-more | registry:ui | Height animates, text does not reflow. | `npx shadcn@latest add https://www.interior.dev/r/show-more.json` |

## For AI agents

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