> ## Documentation Index > Fetch the complete documentation index at: https://docs.vybe.build/llms.txt > Use this file to discover all available pages before exploring further. # Building UIs > The components, charts and themes available in every app, and how to prompt for the layout you want Every app comes with a complete set of UI components, charts and icons. You don't install or configure anything: describe what you want, and the AI picks the right pieces. This page shows what's available and how to ask for it. ## 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](https://ui.shadcn.com) 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. | Group | Components | | - | - | | Layout | Card, Separator, Sheet, Dialog, Drawer, Tabs, Accordion, Collapsible, Scroll Area, Aspect Ratio, Resizable, Sidebar, Item, Empty | | Forms | Button, Button Group, Input, Input Group, Textarea, Select, Native Select, Checkbox, Radio Group, Switch, Slider, Toggle, Toggle Group, Input OTP, Calendar, Form, Field, Label | | Data display | Table, Badge, Avatar, Progress, Chart, Carousel, Hover Card, Kbd, Skeleton, Spinner | | Feedback and overlays | Alert, Alert Dialog, Sonner (toasts), Popover, Tooltip, Dropdown Menu, Context Menu | | Navigation | Breadcrumb, Navigation Menu, Menubar, Pagination, Command | | Extras | Rich Text Editor (a Tiptap editor with a formatting toolbar), Sortable List (drag to reorder) | 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](https://recharts.org) 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. > [!TIP] > > Charts over large datasets load faster with a date range filter. Ask for one, defaulting to a sensible range like the last 30 days. ## Icons and notifications Icons come from [Lucide](https://lucide.dev/icons). 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: | Editor | What it does | | - | - | | **Rich Text Editor** | A single-person editor with headings, lists, quotes, bold and italic. | | **Collaborative Editor** | Several people edit the same document at once and see each other's text, cursors and avatars live. | | **Commented Collaborative Editor** | A Google Docs-style editor. People select text to start a comment thread, and can ask one of your AI coworkers to reply in the thread. | > 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. > [!TIP] > > Attach a screenshot of a tool you like, or a quick sketch, and ask the AI to match its layout. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.