@veap/ui

Inspected version: 0.1.2 · Part of the veap-repo monorepo (packages/ui, git submodule veap-ui).

@veap/ui is the shared React component library used by Veap applications and plugins. It wraps Radix UI primitives with Tailwind-based styling and exposes form, layout, overlay, navigation and feedback components, plus a small set of shared helpers and a Tailwind stylesheet.

Entry points#

The manifest exports ., ./shared/*, ./components/*, ./providers, ./logo, ./globals.css and ./package.json.

• . — the root barrel re-exporting all components, hooks, shared helpers, cn, Logo, ThemeProvider and mdxComponents.
• ./components/* — individual component modules, so you can import a single component without pulling the whole barrel.
• ./shared/* — AccessDenied, PageLoader, ScrollFadeEffect.
• ./providers — the ThemeProvider re-export.
• ./logo — the Logo component and its variants (cva) definition.
• ./globals.css — the Tailwind stylesheet shipped as source.

Root exports#

• Icon (re-exported from @iconify/react) and toast (re-exported from sonner).
• Component modules: accordion, alert, alert-dialog, aspect-ratio, avatar, badge, breadcrumb, button, button-group, calendar, card, checkbox, collapsible, command, context-menu, dialog, drawer, dropdown-menu, empty, field, form, hover-card, input, input-group, input-otp, item, kbd, label, menubar, navigation-menu, pagination, popover, progress, radio-group, scroll-area, select, separator, sheet, sidebar, skeleton, slider, sonner, spinner, switch, table, tabs, textarea, toggle, toggle-group and tooltip.
• Hook useIsMobile() — a matchMedia-based boolean using a 768px breakpoint.
• mdxComponents — a map of MDX element overrides and UI components for documentation sites.
• ThemeProvider — the theme context provider (also available from ./providers).
• Shared helpers AccessDenied, PageLoader, ScrollFadeEffect.
• cn(...inputs) — a clsx + tailwind-merge class-name merge helper.
• Logo (with mode: "full" | "short" and size variants) and its variants.

Install and import#

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

Import the stylesheet once in your application entry:

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

Wrap the tree in the theme provider when you use theme-aware components:

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

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

Peer dependencies#

The manifest declares react ^19, react-dom ^19, next ^16, lucide-react, react-hook-form, swr, zod and @iconify/react as peer dependencies (none are marked optional). Install the peers your application actually uses; mdxComponents and several components import next/link and icon sets.

Runtime and styling notes#

• Components are React components and generally client-facing; keep them out of server-only code paths that must not pull React client runtime.
• ./globals.css is served from src/, so your build tooling must be able to process the package's Tailwind/CSS source.
• cn merges conflicting Tailwind utility classes; prefer it over string concatenation when composing className.

Related#

• UI components guide
• Package exports