# interior.dev

> Free animated React components and micro-interactions for the half-second after a click. Copy the TypeScript source. Open source, MIT licensed. Components are self-contained files. Most expose a headless hook alongside a styled example; Progress Bar and Segmented Control currently export the component only. React is required, Motion is the additional runtime dependency, and the styled examples use Tailwind CSS.

- Source code: https://github.com/ddoemonn/interior
- Full documentation with component source: https://www.interior.dev/llms-full.txt
- Install for any component: `bun add motion`, then copy the file from its docs page
- shadcn registry: `bunx shadcn@latest add https://www.interior.dev/r/<name>.json` — catalog at https://www.interior.dev/r/registry.json

## Action Feedback

- [Copy Button](https://www.interior.dev/docs/copy-button): Copy to tick, width locked, reverts after 2s. [Plain-text reference](https://www.interior.dev/reference/copy-button)
- [Loading Button](https://www.interior.dev/docs/loading-button): Label to state without layout shift. [Plain-text reference](https://www.interior.dev/reference/loading-button)
- [Hold to Confirm](https://www.interior.dev/docs/hold-to-confirm): A guard rail in front of destructive actions. [Plain-text reference](https://www.interior.dev/reference/hold-to-confirm)
- [Like Burst](https://www.interior.dev/docs/like-burst): Optimistic like that survives rapid taps. [Plain-text reference](https://www.interior.dev/reference/like-burst)
- [Ripple](https://www.interior.dev/docs/ripple): Touch feedback from the pointer origin. [Plain-text reference](https://www.interior.dev/reference/ripple)
- [Icon Morph](https://www.interior.dev/docs/icon-morph): Play/pause, menu/close as one mechanism. [Plain-text reference](https://www.interior.dev/reference/icon-morph)
- [Press Depth](https://www.interior.dev/docs/press-depth): The feeling that the press landed. [Plain-text reference](https://www.interior.dev/reference/press-depth)

## Input

- [Floating Label](https://www.interior.dev/docs/floating-label): The label makes room instead of disappearing. [Plain-text reference](https://www.interior.dev/reference/floating-label)
- [Inline Validation](https://www.interior.dev/docs/inline-validation): Error message that does not shove the form. [Plain-text reference](https://www.interior.dev/reference/inline-validation)
- [Password Strength](https://www.interior.dev/docs/password-strength): Strength read segment by segment. [Plain-text reference](https://www.interior.dev/reference/password-strength)
- [OTP Input](https://www.interior.dev/docs/otp-input): Auto advance, paste, error recovery. [Plain-text reference](https://www.interior.dev/reference/otp-input)
- [Tag Input](https://www.interior.dev/docs/tag-input): Enter adds, backspace highlights then removes. [Plain-text reference](https://www.interior.dev/reference/tag-input)
- [Expanding Search](https://www.interior.dev/docs/expanding-search): Icon to field with focus handled. [Plain-text reference](https://www.interior.dev/reference/expanding-search)

## Async

- [Skeleton Swap](https://www.interior.dev/docs/skeleton-swap): Skeleton to content with zero layout shift. [Plain-text reference](https://www.interior.dev/reference/skeleton-swap)
- [Progress Bar](https://www.interior.dev/docs/progress-bar): Indeterminate handing over to determinate. [Plain-text reference](https://www.interior.dev/reference/progress-bar)
- [Load More](https://www.interior.dev/docs/load-more): Sentinel that loads before you hit the end. [Plain-text reference](https://www.interior.dev/reference/load-more)
- [Streaming Text](https://www.interior.dev/docs/streaming-text): Token by token with a caret. [Plain-text reference](https://www.interior.dev/reference/streaming-text)
- [Task Steps](https://www.interior.dev/docs/task-steps): The system narrates its work. [Plain-text reference](https://www.interior.dev/reference/task-steps)

## Notification

- [Live Activity](https://www.interior.dev/docs/live-activity): The system's ongoing work, worn as a small object. [Plain-text reference](https://www.interior.dev/reference/live-activity)
- [Collapsible Banner](https://www.interior.dev/docs/collapsible-banner): Folds to its title, or lets go entirely. [Plain-text reference](https://www.interior.dev/reference/collapsible-banner)
- [Presence Avatars](https://www.interior.dev/docs/presence-avatars): Join and leave as a layout change. [Plain-text reference](https://www.interior.dev/reference/presence-avatars)
- [Typing Indicator](https://www.interior.dev/docs/typing-indicator): Someone is writing. [Plain-text reference](https://www.interior.dev/reference/typing-indicator)
- [New Items Pill](https://www.interior.dev/docs/new-items-pill): New content without stealing your scroll. [Plain-text reference](https://www.interior.dev/reference/new-items-pill)

## Overlay

- [Modal](https://www.interior.dev/docs/modal): Backdrop, scroll lock, focus trap. [Plain-text reference](https://www.interior.dev/reference/modal)
- [Popover](https://www.interior.dev/docs/popover): Knows its origin, flips on collision. [Plain-text reference](https://www.interior.dev/reference/popover)
- [Tooltip Group](https://www.interior.dev/docs/tooltip-group): Delayed once, instant after that. [Plain-text reference](https://www.interior.dev/reference/tooltip-group)
- [Command Palette](https://www.interior.dev/docs/command-palette): Results reorder as you type. [Plain-text reference](https://www.interior.dev/reference/command-palette)
- [Drawer](https://www.interior.dev/docs/drawer): Side panel that keeps its place. [Plain-text reference](https://www.interior.dev/reference/drawer)
- [Context Menu](https://www.interior.dev/docs/context-menu): Opens from the pointer, not the corner. [Plain-text reference](https://www.interior.dev/reference/context-menu)
- [Dropdown](https://www.interior.dev/docs/dropdown): Active highlight travels between items. [Plain-text reference](https://www.interior.dev/reference/dropdown)

## Navigation

- [Tabs](https://www.interior.dev/docs/tabs): One indicator shared across tabs. [Plain-text reference](https://www.interior.dev/reference/tabs)
- [Segmented Control](https://www.interior.dev/docs/segmented-control): Thumb slides, label inverts through it. [Plain-text reference](https://www.interior.dev/reference/segmented-control)
- [Accordion](https://www.interior.dev/docs/accordion): height auto, done correctly. [Plain-text reference](https://www.interior.dev/reference/accordion)
- [Wizard Steps](https://www.interior.dev/docs/wizard-steps): Transition knows forward from back. [Plain-text reference](https://www.interior.dev/reference/wizard-steps)
- [Pagination](https://www.interior.dev/docs/pagination): The window moves, the row does not. [Plain-text reference](https://www.interior.dev/reference/pagination)
- [Tree View](https://www.interior.dev/docs/tree-view): Disclosure the arrow keys can walk. [Plain-text reference](https://www.interior.dev/reference/tree-view)

## Scroll

- [Sticky Header](https://www.interior.dev/docs/sticky-header): Condenses as you go down. [Plain-text reference](https://www.interior.dev/reference/sticky-header)
- [Reading Progress](https://www.interior.dev/docs/reading-progress): How much is left. [Plain-text reference](https://www.interior.dev/reference/reading-progress)
- [Scroll Spy](https://www.interior.dev/docs/scroll-spy): The section you are actually in. [Plain-text reference](https://www.interior.dev/reference/scroll-spy)
- [Snap Carousel](https://www.interior.dev/docs/snap-carousel): Momentum that lands on a slide. [Plain-text reference](https://www.interior.dev/reference/snap-carousel)
- [Hide on Scroll](https://www.interior.dev/docs/hide-on-scroll): Toolbar yields to the content. [Plain-text reference](https://www.interior.dev/reference/hide-on-scroll)

## Data

- [Sortable Table](https://www.interior.dev/docs/sortable-table): Rows travel to their new order. [Plain-text reference](https://www.interior.dev/reference/sortable-table)
- [Filter Grid](https://www.interior.dev/docs/filter-grid): Filtering rearranges, it does not blink. [Plain-text reference](https://www.interior.dev/reference/filter-grid)
- [Value Flash](https://www.interior.dev/docs/value-flash): Marks what just changed. [Plain-text reference](https://www.interior.dev/reference/value-flash)
- [Poll Results](https://www.interior.dev/docs/poll-results): The winner lands last. [Plain-text reference](https://www.interior.dev/reference/poll-results)

## Gesture

- [Slider Detents](https://www.interior.dev/docs/slider-detents): Stops you can feel. [Plain-text reference](https://www.interior.dev/reference/slider-detents)
- [Swipe Deck](https://www.interior.dev/docs/swipe-deck): A stack you decide through. [Plain-text reference](https://www.interior.dev/reference/swipe-deck)
- [Reorder List](https://www.interior.dev/docs/reorder-list): The gap the siblings open is the drop target. [Plain-text reference](https://www.interior.dev/reference/reorder-list)
- [Long Press](https://www.interior.dev/docs/long-press): Intent confirmed by time, and cancelled by everything else. [Plain-text reference](https://www.interior.dev/reference/long-press)
- [Lightbox](https://www.interior.dev/docs/lightbox): Zoom that returns where it started. [Plain-text reference](https://www.interior.dev/reference/lightbox)

## Content

- [Text Reveal](https://www.interior.dev/docs/text-reveal): Words arrive in reading order. [Plain-text reference](https://www.interior.dev/reference/text-reveal)
- [Logo Marquee](https://www.interior.dev/docs/logo-marquee): Stops when you look at it. [Plain-text reference](https://www.interior.dev/reference/logo-marquee)
- [Blur-up Image](https://www.interior.dev/docs/blur-up-image): Placeholder resolves into the photo. [Plain-text reference](https://www.interior.dev/reference/blur-up-image)
- [Show More](https://www.interior.dev/docs/show-more): Height animates, text does not reflow. [Plain-text reference](https://www.interior.dev/reference/show-more)