Every Vybe app comes with a complete UI toolkit pre-installed. You do not need to install anything or configure component libraries — just describe what you want and the AI builds it using the right components automatically.
This page covers what is available and how to get the most out of it.
Shadcn UI components
Vybe includes over 50 pre-installed Shadcn UI components. These are production-grade, accessible components that the AI uses to build your interfaces.
Layout
| Component | Use case |
|---|
| Card | Container for related content — summaries, stats, forms |
| Separator | Visual divider between sections |
| Sheet | Slide-out panel from the edge of the screen |
| Dialog | Modal window for focused interactions |
| Drawer | Bottom sheet for mobile-style interactions |
| Tabs | Switch between related content sections |
| Accordion | Expandable/collapsible content sections |
| Collapsible | Toggle visibility of content blocks |
| Component | Use case |
|---|
| Input | Single-line text entry |
| Textarea | Multi-line text entry |
| Select | Dropdown selection from a list |
| Checkbox | Toggle on/off for boolean options |
| RadioGroup | Select one option from a group |
| Switch | Toggle switch for on/off states |
| DatePicker | Calendar-based date selection |
| ComboBox | Searchable dropdown with autocomplete |
Data display
| Component | Use case |
|---|
| Table | Basic table for structured data |
| DataTable | Full-featured table with sorting, filtering, and pagination |
| Badge | Small label for status, category, or count |
| Avatar | User or entity profile image |
| Progress | Progress bar for completion tracking |
Feedback and overlays
| Component | Use case |
|---|
| Alert | Inline message for important information |
| Toast (Sonner) | Temporary notification popup |
| AlertDialog | Confirmation dialog before destructive actions |
| Popover | Floating content attached to a trigger |
| Tooltip | Hover text for additional context |
| DropdownMenu | Context menu or action menu |
Navigation
| Component | Use case |
|---|
| Breadcrumb | Show page hierarchy and navigation path |
| NavigationMenu | Top-level navigation links |
| Sidebar | Vertical navigation for multi-page apps |
You do not need to memorize component names. Just describe what you want in your prompt — “add a confirmation popup before deleting” — and the AI will choose the right component (AlertDialog in this case).
Charts
Vybe uses Recharts with Shadcn chart wrappers for data visualization. The AI can generate charts from your data with a simple prompt.
Available chart types:
- Bar charts (vertical and horizontal)
- Line charts
- Area charts
- Pie charts and donut charts
Example prompts:
Add a line chart showing monthly revenue trends for the past 12 months.
Create a pie chart showing the distribution of support tickets by status.
Add a bar chart comparing sales by region. Use horizontal bars and sort by value.
The AI automatically configures chart tooltips, legends, and responsive sizing using the Shadcn chart components:
<ChartTooltip content={<ChartTooltipContent />} />
Charts pull data from your database or integrations at render time. For large datasets, consider adding date range filters to limit the query scope and improve performance.
Icons
Thousands of icons are available through the Lucide icon library. The AI selects appropriate icons automatically, but you can request specific ones:
Use a bar chart icon next to the Analytics heading and a settings gear icon in the sidebar.
Icons are imported from lucide-react:
import { Users, Settings, BarChart, Search, Plus, Trash2 } from 'lucide-react'
Toast notifications
Vybe uses Sonner for toast notifications — the small popups that confirm actions or report errors.
import { toast } from 'sonner'
toast.success('Customer saved successfully')
toast.error('Failed to delete record')
toast.info('Syncing data from Salesforce...')
Show a success toast when the form is submitted and an error toast if the API call fails.
Tailwind CSS
All styling in Vybe uses Tailwind CSS utility classes. This gives you precise control over layout, spacing, colors, typography, and responsive behavior.
The AI writes Tailwind classes automatically, but you can guide it with design preferences:
Use a two-column grid layout with a gap of 16px. Make the cards have rounded corners and a subtle shadow.
Add responsive breakpoints — single column on mobile, two columns on tablet, three columns on desktop.
Tailwind includes built-in dark mode support, responsive utilities, and a comprehensive design system.
Internal tools have different priorities than consumer apps. Here are patterns that work well:
Use data tables as the backbone
Most internal tools revolve around lists of data. The DataTable component handles sorting, filtering, pagination, and row selection out of the box.
Show customers in a data table with sortable columns, a search bar, and pagination. Add a dropdown filter for account status.
Add search and filters to every list
Your users will always need to find specific records. Make it easy:
Add a search bar that filters by name or email. Add dropdown filters for status and date range.
Use Cards for summary sections
Cards work well for KPI dashboards, overview panels, and summary statistics at the top of a page.
Add four summary cards at the top: Total Customers, Active Subscriptions, Monthly Revenue, and Churn Rate.
Use Tabs to organize related content
When a page has multiple related views, Tabs keep things clean without requiring separate pages.
Organize the customer detail page with tabs for Overview, Orders, Support Tickets, and Activity Log.
Keep navigation simple
Internal tools should be easy to navigate. Use a sidebar for multi-page apps and top navigation for simpler apps.
Add a sidebar with links to Dashboard, Customers, Orders, and Settings. Highlight the active page.
Be consistent with spacing and typography
The AI follows consistent spacing patterns by default. If you want to adjust the density:
Make the layout more compact — reduce padding and use smaller text for the table.
Give the dashboard more breathing room — increase spacing between cards and sections.
Common UI patterns
Here are prompts for building the most common internal tool interfaces:
Master-detail layout:
Build a two-panel layout. The left panel shows a list of orders. Clicking an order shows its details in the right panel.
Settings page:
Create a settings page with sections for Profile, Notifications, and Integrations. Use a vertical tab layout on the left.
Search and filter page:
Build a search page with a search bar, category filters, date range selector, and a results table below.
Form with validation:
Create a form to add a new customer with fields for name (required), email (required, must be valid), phone, and company. Show validation errors inline.
Empty states:
When there are no results, show a friendly empty state with an icon and a message explaining what to do.
What’s next
