Introduction
Why these components feel different.
Motion that communicates
A transition can show how two elements relate. When adjacent choices share a surface, you can see that they belong to the same selection. When a tab indicator moves, it shows where your attention should go. Reflow uses shared timing and surface treatments so those cues feel familiar across components.
Hover as preview
Move through a list or menu and the highlight follows the pointer to the next target. It gives you a chance to see what will respond before you click. Buttons use small changes in weight and fill, and keyboard navigation keeps its own visible focus cue.
Spring motion
Fast, moderate, and slow spring curves cover short feedback, moving indicators, and larger reveals. When you change direction quickly, the animation follows the latest target. Reflow also respects the system preference for reduced motion.
Native to Remix
Components use the Remix component runtime, official UI primitives, and browser APIs. The showcase renders the same components you can import from the workspace package. Style them with the shared tokens for surfaces, type, sizes, and radii, or supply your own content in their slots.
Customize using the settings panel
Try a different theme, accent, heading font, radius, size, icon family, or hover style. Changes update the examples as you make them. Use T, A, and R to cycle theme, accent, and radius from the keyboard. Your settings appear in the URL so you can share a particular look.
Installation
Install dependencies from the Reflow workspace.
pnpm install --frozen-lockfileStart the showcase.
pnpm devUse the workspace package and stylesheet in your Remix app. Open the component docs for examples and API details.
import { Button } from '@rtzll/reflow'
import '@rtzll/reflow/styles.css'Icons
The settings panel previews Lucide, Tabler, Phosphor, and HugeIcons. Reflow's built-in icons render as SVG, and components with icon slots also accept your own SVG or Remix nodes. Choose the icons that fit your application.
<Button leadingIcon={<Icon name="plus" />}>New project</Button>