Browse Learn
Components
Components handle focused interface needs: a button, an input, a dialog, or a toast. Start with documented patterns that you and your AI can reuse consistently.
Start with one interaction
Choose a component by what someone needs to do. Each component page includes working examples, markup, behavior notes, and installation details. Try keyboard and touch interactions before adapting it.
Include only what you use
Use semantic HTML and shared CSS. Some components need no JavaScript; others add a focused behavior module. Follow the component’s listed dependencies instead of loading the whole collection.
Keep appearance and behavior together
Theme tokens coordinate color, corners, and typography. Preserve labels, focus states, validation feedback, and reduced-motion behavior when changing a component’s appearance.
Build directly or with AI
Give your AI the component manifest and an example to adapt, or write the markup yourself. Use documented APIs rather than inventing attributes. Framework integration coverage varies by component; check the integration guide.
Move up to a block when you need composition
A component solves one interface need. A block combines several components into a useful section, such as a hero or feature group.