Skip to main content
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

​
Forms

​
Data display

​
Feedback and overlays

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:
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:
Browse the full icon catalog at lucide.dev/icons.

​
Toast notifications

Vybe uses Sonner for toast notifications — the small popups that confirm actions or report errors.
The AI adds toasts automatically when building forms, delete actions, and API calls. You can also request them explicitly:
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.

​
Design tips for internal tools

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