UI Components Overview

Import UI components from @kit/ui/<component-name> to build your SaaS interface. The library includes 80+ components: forms with React Hook Form integration, buttons with loading states, dialogs, data tables, navigation menus, and marketing components. All components are styled with Tailwind CSS 4, support dark mode, and work with React Server Components.

The @kit/ui package is MakerKit's component library built on shadcn/ui and Base UI, providing accessible, customizable React components that follow consistent patterns across the application.

• Use @kit/ui components when: you need consistent styling across your app, want accessible components out of the box, or need pre-built patterns like form validation or data tables.
• Build custom components when: you need highly specialized UI that doesn't fit existing patterns, or when wrapping third-party libraries that have their own styling.

Adding New Components

Need to add a Shadcn component that isn't included? See the Shadcn CLI guide to install additional components.

Import Pattern

All components follow a consistent import pattern:

import { ComponentName } from '@kit/ui/component-name';

Component Categories

Forms & Inputs

Form controls for user input: form validation, text inputs, selects, checkboxes, switches, and file uploads.

Buttons & Actions

Interactive elements: buttons, button groups, and action triggers.

Layout & Structure

Page structure components: cards, page layouts, sidebars, tabs, and collapsible sections.

Navigation

Navigation elements: menus, breadcrumbs, pagination, and mobile navigation.

Dialogs & Overlays

Modal interfaces: dialogs, drawers, popovers, dropdowns, and sheets.

Data Display

Data presentation: tables, data tables, badges, avatars, and empty states.

Feedback & Loading

User feedback: alerts, toasts, spinners, progress bars, and loading states.

Utilities

Helper components: conditional rendering, translations, lazy loading, and theme toggles.

Marketing

Landing page components: heroes, CTAs, feature grids, and newsletter signup.

Quick Reference

Common Pitfalls

• Wrong import path: Use @kit/ui/button not @kit/ui/components/button. The package re-exports components at the top level.
• Missing 'use client' directive: Many components require client-side interactivity. Add 'use client' at the top of files using hooks or event handlers.
• Forgetting FormControl's render prop: Form fields use render prop pattern, not children: <FormControl render={<Input />} />.
• Dialog state management: Use controlled open prop when you need to close dialogs programmatically after actions complete.
• Styling conflicts with className: Use the cn() utility from @kit/ui/utils to merge classes properly with component defaults.
• Server Component restrictions: Some components (forms, dialogs, interactive elements) only work in Client Components. Check if you need 'use client'.

Next: Forms & Inputs →