UI components

@veap/ui is the shared React component library for Veap applications and plugins. It wraps Radix UI primitives with Tailwind styling and ships the stylesheet, a theme provider, a mobile hook and a docs-oriented MDX component map.

Install#

Install the package and its peer dependencies your app uses:

npm install @veap/ui react react-dom next lucide-react @iconify/react

Import the stylesheet once, in your root layout or global entry:

import "@veap/ui/globals.css";

Wrap the tree in ThemeProvider if you use theme-aware components:

import { ThemeProvider } from "@veap/ui/providers";

export function Providers({ children }: { children: React.ReactNode }) {
  return <ThemeProvider>{children}</ThemeProvider>;
}

Use components#

import { Button, Card, CardContent, CardHeader, CardTitle, cn } from "@veap/ui";

export function Summary({ title, className }: { title: string; className?: string }) {
  return (
    <Card className={cn("max-w-sm", className)}>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Open</Button>
      </CardContent>
    </Card>
  );
}

Import a single component from its module to keep bundles lean:

import { Button } from "@veap/ui/components/button";

What the package exports#

• Components covering layout, forms, overlays, navigation and feedback (accordion, alert, card, dialog, dropdown-menu, select, table, tabs, and more — see the reference for the full list).
• Icon (from @iconify/react) and toast (from sonner).
• useIsMobile() — a boolean based on a 768px breakpoint.
• Shared helpers: AccessDenied, PageLoader, ScrollFadeEffect.
• cn(...) — Tailwind-aware class merging.
• Logo and mdxComponents for documentation sites.

Server and client boundaries#

These are React components intended for client-facing UI. Several import next/link and icon sets. Keep them out of server-only modules, and pass serializable props from Server Components to client components rather than functions or class instances where required by React's server/client rules.

Styling#

• Style with Tailwind utility classes; use cn() to merge conditional classes without conflicts.
• @veap/ui/globals.css is served from the package's src/, so your build must process the package's CSS/Tailwind source.

See also#

• @veap/ui reference
• Project structure