Browse Learn
Building Interfaces
Use icons, components, blocks, and templates together to build a consistent interface.
Icons
Icons give actions, navigation, and status a recognizable visual language. Use the Icon component to render named inline SVGs with shared sizing and currentColor. Give icon-only buttons an accessible name; keep decorative icons hidden from assistive technology. Use visible text for important status messages.
Components
Components solve focused interface needs, such as a button, input, dialog, or chart. Start with a working example and preserve its semantics, keyboard interaction, focus states, and reduced-motion behavior. Use the build tooling to discover components and include their dependencies automatically.
Blocks
Blocks combine components into a useful section, such as a hero or feature group. Replace sample copy and actions with your content while preserving shared spacing, responsive layouts, and heading hierarchy. Use a block when you need one section rather than a complete page.
Templates
Templates combine sections into a complete starting layout. Choose one that fits your content, then update the navigation, metadata, links, and form labels. Remove unnecessary sections and connect real data and application behavior; demo interactions are not a production backend.
Keep the interface cohesive
Choose a small set of component variants and reuse them across related screens. Follow the shared CSS utilities and theme tokens for spacing, typography, and color. When extending the icon set, follow the Icon Drawing Guide and review artwork at its intended size.
Build directly or with AI
Write native HTML, CSS, and JavaScript, or give your AI the AI Guide and documented examples. Check integration coverage before using a component in another framework. Review mobile layouts, long content, keyboard navigation, forms, contrast, and motion before shipping.