Choose behavior before choosing decoration
A component is a small part of an interface with a recognizable purpose. A tab switches between related panels; a tooltip explains a nearby control; a modal interrupts the page for a focused task. Select the pattern that fits the interaction before adjusting its border, color, or shadow.
Our generators provide a visual starting point and code to adapt. Styling alone does not make an interaction accessible. Keyboard behavior, focus management, naming, state announcements, and the order of the markup need attention in the actual application.
Use the guidance beneath each component to identify the behavior you need to implement. Keep static content simple when it does not need a special interaction. A list with clear headings is often easier to use than hiding information behind several nested controls.
Review semantic HTML foundations →