interior: 54 Copy-Paste React Micro-Interaction Components

Description:

interior is a React UI component library that provides a collection of micro-interactions for action feedback, inputs, async states, notifications, overlays, navigation, scrolling, data, gestures, and content.

Every file in components/interior/ copies directly into a project. There is no npm package for the components themselves. The only dependency is the motion animation library.

Features

Copies into a project as a single file per component.
Each file exports a headless useX hook and a styled X component built on it.
Reserves space for every state a component can reach.
Resumes interrupted transitions from their current position.
Skips the animated transition under prefers-reduced-motion.
Keyboard behavior, focus management, live announcements, and ARIA state as part of the interaction.
Cancels or recovers pointer interactions after pointer loss, operating-system interruption, or window blur.

How To Use It

Motion for React requires React 18.2 or newer. The styled exports use Tailwind utility classes. The headless hooks keep presentation classes outside the behavior layer.

Install Motion

npm install motion

For Bun:

bun add motion

Copy the Component File

interior has no CLI, npm component package, or registry command. Open the required component page, copy its complete Source block, and save it under the same local path.

components/
└── interior/
    └── copy-button.tsx

Basic Usage

The copied file already declares "use client". A Next.js Server Component can render it when all passed props are serializable.

For example, CopyButton accepts value, three state labels, timeout, onCopy, onError, disabled, and className. It reserves the widest label and announces completion through a polite live region.

import { CopyButton } from "@/components/interior/copy-button";
type InviteCodeProps = {
  code: string;
};
export function InviteCode({ code }: InviteCodeProps) {
  return (
    <div className="flex items-center gap-3 rounded-lg border p-3">
      <code className="min-w-0 flex-1 truncate font-mono text-sm">
        {code}
      </code>
      <CopyButton
        value={code}
        label="Copy code"
        copiedLabel="Copied"
        errorLabel="Copy failed"
        timeout={1800}
      />
    </div>
  );
}

Available Components

Category	Components
Action Feedback	Copy Button, Loading Button, Hold to Confirm, Like Burst, Ripple, Icon Morph, Press Depth
Input	Floating Label, Inline Validation, Password Strength, OTP Input, Tag Input, Expanding Search
Async	Skeleton Swap, Progress Bar, Load More, Streaming Text, Task Steps
Notification	Live Activity, Collapsible Banner, Presence Avatars, Typing Indicator, New Items Pill
Overlay	Modal, Popover, Tooltip Group, Command Palette, Drawer, Context Menu, Dropdown
Navigation	Tabs, Segmented Control, Accordion, Wizard Steps, Pagination, Tree View
Scroll	Sticky Header, Reading Progress, Scroll Spy, Snap Carousel, Hide on Scroll
Data	Sortable Table, Filter Grid, Value Flash, Poll Results
Gesture	Slider Detents, Swipe Deck, Reorder List, Long Press, Lightbox
Content	Text Reveal, Logo Marquee, Blur-up Image, Show More

ReactScript