A great app needs a great interface. Buttons that feel right, dialogs that open cleanly, forms that are easy to fill in, tables that are readable — the quality of these details is what separates an app that feels professional from one that feels unfinished.
Caffeine apps are built on shadcn/ui — a widely used, open-source component library that provides polished, accessible UI building blocks out of the box. Every app you build on Caffeine comes with the full shadcn/ui component set already installed. The AI uses these components automatically when generating your interface, so your apps look and feel great from the first build.
What is shadcn/ui?
shadcn/ui is a collection of beautifully designed, accessible interface components built on top of Radix UI primitives and styled with Tailwind CSS. It is one of the most popular UI libraries in modern web development.
Because the components are built on Radix UI, they handle accessibility — keyboard navigation, screen reader support, focus management — correctly by default, without any extra work.
What's included
Every Caffeine app ships with the complete shadcn/ui component library pre-installed. Some examples of what's available for the AI to use when building your interface:
- Buttons, inputs, and forms — the everyday building blocks of any interactive app
- Dialogs and alerts — modal windows, confirmation prompts, and dismissible notifications
- Navigation — tabs, breadcrumbs, navigation menus, sidebars, and dropdown menus
- Data display — tables, cards, badges, avatars, and progress indicators
- Feedback and status — toasts (via Sonner), skeletons for loading states, and alert banners
- Rich inputs — date pickers, sliders, checkboxes, radio groups, switches, and OTP inputs
- Layout — resizable panels, scroll areas, separators, and collapsible sections
- Charts — a Recharts-based chart component for data visualization
- Overlays — sheets (slide-in panels), drawers, popovers, and hover cards
The full component reference is available at ui.shadcn.com/docs/components.
How it works
You do not need to ask for shadcn/ui components by name. When you describe what you want — "a form where users can submit their details", "a table showing all orders", "a sidebar with navigation links" — the AI selects and uses the appropriate components from the library automatically.
If you have a preference for a specific component or interaction style, you can describe it directly:
- "Use a slide-in sheet for the settings panel instead of a full-page view"
- "Show a toast notification when the user saves their changes"
- "Display the data in a tabbed layout with one tab per category"
The AI understands the full component library and will use your description to pick the right one.
Theming and design
The visual style of your app — colors, corner radius, spacing — is controlled through a design token system built on Tailwind CSS. When you ask for a specific look, the AI adjusts the design tokens rather than modifying the components themselves.
This means you can ask for broad style changes and the AI applies them consistently across your whole app:
- "Make the app use a dark theme with deep blue accents"
- "I want a clean, minimal look — white background, subtle grays, no rounded corners"
- "Match the color scheme to my brand: primary color is #E85D2F"
Frequently asked questions
Do I need to know what shadcn/ui is to use it?
No. The AI selects and uses the right components automatically based on what you describe. shadcn/ui is the technology behind the scenes — you just describe what you want your app to look like and how it should behave.
Can I request a specific shadcn/ui component by name?
Yes. If you know the library and want a specific component, you can ask for it by name: "Use a Command component for the search interface" or "Add a Carousel to the image gallery." The AI understands the full shadcn/ui component set.
Are all 46 shadcn/ui components available?
Yes. The complete standard shadcn/ui component library ships with every app. No components need to be installed separately.
Can I add other UI libraries on top of shadcn/ui?
Caffeine apps use the shadcn/ui stack — Radix UI, Tailwind CSS, and the standard component set. Additional external UI libraries cannot be added. Within that stack, the AI has a great deal of flexibility to build almost any interface you can describe.
Can I customize the look of individual components?
Yes. Describe the change you want and the AI applies it. Customization works through the design token system and Tailwind classes — the components themselves are not modified directly.