The default look
Unless you ask for a specific style, the AI builds a clean, minimal design. It keeps most of the screen neutral and uses your primary brand color for the moments that matter: main buttons, links, selected items. It uses at most two fonts. If your organization has a Brand Theme (Settings → Organization → General), new apps start with its colors, logos and fonts, and the AI follows them. To change the look, say so:Use a compact layout with smaller text so more rows fit on screen.
Give the dashboard more breathing room: more space between cards and sections.
Use our logo in the sidebar header and make the primary buttons dark green.
Components
Apps include 56 shadcn/ui components. You don’t need their names: “add a confirmation popup before deleting” gets you an Alert Dialog. The names help when you want something precise.
Some common pieces aren’t a single component. The AI builds them from the ones above:
- Data tables with sorting, filtering and pagination: Table plus TanStack Table.
- Date pickers: Calendar inside a Popover.
- Searchable dropdowns (comboboxes): Command inside a Popover.
Charts
Charts use Recharts through shadcn/ui’s chart component, with tooltips, legends and responsive sizing. Bar, line, area and pie charts all work.Add a line chart of monthly revenue for the past 12 months.
Show support tickets by status as a donut chart.
Compare sales by region with horizontal bars, sorted by value.
Icons and notifications
Icons come from Lucide. The AI picks them for you, or you can ask:Put a chart icon next to the Analytics heading and a gear icon on the settings link.Short confirmation and error messages use Sonner toasts. The AI adds them to forms and actions automatically, and you can ask for specific ones:
Show a success toast when the form is submitted, and an error toast if saving fails.
Light and dark mode
Apps follow each viewer’s system light or dark setting. The starter app’s sidebar includes a light/dark toggle. The sidebar appears once your app has more than one page in its navigation. You can change this behavior:Add a light/dark toggle to the top right of every page.
Always use dark mode.
Pages and navigation
A new app has one page. When the AI adds a page, it also adds a way to reach it. Once the app has two or more pages in its navigation, the starter layout shows them in a sidebar.Add a sidebar with links to Dashboard, Customers, Orders and Settings. Highlight the current page.
Collaborative editing and rich text
For text people write together, the AI can add ready-made editors:Add a shared meeting notes page where the whole team can edit the same document live.
Let reviewers highlight text in the proposal and leave comments, and let them ask our Legal coworker to answer a comment.Real-time features, like live cursors, “who’s online” avatars or a shared board that updates for everyone, also work outside documents:
Show avatars of everyone currently viewing this board, and update cards for everyone when someone moves one.
Layout tips for internal tools
Internal tools are about finding and acting on records quickly. These patterns work well:-
Make the table the backbone. Most tools revolve around a list.
Show customers in a table with sortable columns, a search bar and pagination. Add a filter for account status.
-
Add search and filters to every list.
Add a search bar that matches name or email, plus filters for status and date range.
-
Lead with summary cards.
Add four cards at the top: Total Customers, Active Subscriptions, Monthly Revenue and Churn Rate.
-
Use tabs for related views instead of separate pages.
Organize the customer page with tabs for Overview, Orders, Support Tickets and Activity.
-
Design empty and loading states.
When there are no results, show an icon and a short message explaining what to do next.
Common layouts
Master-detail:Build a two-panel layout. The left panel lists orders. Clicking an order shows its details on the right.Settings page:
Create a settings page with sections for Profile, Notifications and Integrations, using vertical tabs on the left.Search page:
Build a search page with a search bar, category filters, a date range picker and a results table.Form with validation:
Create a form to add a customer with name (required), email (required, must be valid), phone and company. Show errors next to each field.Kanban board:
Show tasks as a board with columns for Todo, In Progress and Done. Let people drag cards between columns.