Available Components

Generated apps use Tailwind CSS, native browser controls, local reusable components, and headless primitives for complex interactions.

Component System

The AI usually builds the app's visual language directly inside the generated app.tsx file. This gives each app room to feel purpose-built instead of sharing the same default component style.

For complex behavior such as dialogs, dropdown menus, popovers, tabs, and custom selects, apps can use headless Radix primitives and style them with Tailwind.

Common Categories

Useful UI categories include:

• Layout components such as cards, panels, sidebars, tabs, and dialogs.
• Inputs such as buttons, forms, text fields, selects, checkboxes, and toggles.
• Feedback components such as alerts, loading states, empty states, and toasts.
• Data display components such as tables, lists, charts, and badges.
• Rich content components such as markdown, Mermaid diagrams, and math rendering.

Prompting for Components

Ask for the outcome you want instead of naming every implementation detail. For example:

• "Add a sidebar with sections for Projects, Tasks, and Settings."
• "Use cards to show each customer summary."
• "Add a chart that compares weekly usage."
• "Show a confirmation dialog before deleting an item."

If the generated UI is close but not quite right, ask for a targeted change such as "make the filters a compact toolbar" or "move the settings into a dialog."

Developer References

For implementation-oriented details, see the Radix primitives reference, charts reference, Mermaid reference, and KaTeX reference.