Animated Components
Documentation Index
Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.
Source-first React components with purposeful motion and complete reduced-motion behavior.
Animated components bring movement to the moments where it improves understanding: state changes, spatial relationships, progress, focus, and direct manipulation. They use the same source-first model as the rest of Honest UI, so you install the code into your project and own every detail.
Why animated components?
Good motion explains what changed without slowing people down. These components pair polished interactions with familiar React APIs, keyboard behavior, and fallbacks for people who prefer reduced motion.
Every component is:
- Purposeful. Motion communicates state, hierarchy, direction, or completion.
- Accessible. Interactive controls retain native semantics and respect
prefers-reduced-motion. - Themeable. Styling uses the same Honest UI color roles and Tailwind utilities as UI Components.
- Source-first. Install the component, tune its timing and appearance, and keep it in your codebase.
Built for product interfaces
The collection covers animated actions, text, navigation, disclosures, pickers, previews, and direct-manipulation patterns. Use the reload control in any preview to replay entrance motion, then switch to Code to inspect the exact example.
Get started
Follow Installation, then choose a component from the sidebar. Start with subtle defaults and use motion only where it helps people understand the interface.