Design Systems
Canonical Definition
Self-contained, interactive UI components that encapsulate visual styling, spring physics, gesture listeners, and state machine logic in a single reusable unit.
Detailed Explanation & Context
Motion Components are the modular building blocks of a living design system. While traditional UI component libraries (such as Chakra UI or Shadcn) primarily define HTML structure and static CSS styling, Motion Components incorporate native gesture tracking, physics-driven entrance/exit dynamics, and multi-state branch transitions.
Mathematical Model / Governing Formula
Motion Component = Visual Geometry + Physics Springs + State Machine LogicKey Takeaways
- Encapsulate complete interaction behavior without external glue code.
- Ready to drop into production React and SwiftUI projects.
- Fully accessible with automatic keyboard and screen reader support.
Implementation Syntax (JSX)
import { ExodeSwitch } from '@exodeui/react';
export function SettingsToggle() {
return <ExodeSwitch checked={darkMode} onChange={setDarkMode} />;
}Related Glossary Terms
Pillar Guides & Tools
Apply in Your Application
ExodeUI makes modern motion engineering effortless. Design visually and compile clean, accessible components directly to production.