@pol-studios/ui

UI components for POL applications

A comprehensive Radix-UI based component library following shadcn/ui patterns. Includes 50+ primitives, complex components, charts, forms, navigation, and data display components.

Installation

pnpm add @pol-studios/ui

Peer Dependencies

pnpm add react react-dom @pol-studios/db/auth @pol-studios/db @pol-studios/ui/filters @pol-studios/hooks @pol-studios/utils

Optional Dependencies

Some components require additional packages:

# For date picker
pnpm add react-day-picker

# For command palette
pnpm add cmdk

# For mobile drawer
pnpm add vaul

# For resizable panels
pnpm add react-resizable-panels

# For carousel
pnpm add embla-carousel-react

# For charts
pnpm add recharts

# For theme support
pnpm add next-themes

Quick Start

import { Button, Card, CardHeader, CardTitle, CardContent } from "@pol-studios/ui";

function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome</CardTitle>
      </CardHeader>
      <CardContent>
        <Button variant="default">Click me</Button>
      </CardContent>
    </Card>
  );
}

Subpath Exports

| Path | Description | |------|-------------| | @pol-studios/ui | Primitives (shadcn components) | | @pol-studios/ui/primitives | Base shadcn/ui components | | @pol-studios/ui/components | Complex application components | | @pol-studios/ui/forms | Form components (MultiForm, FileDropzone) | | @pol-studios/ui/nav | Navigation components | | @pol-studios/ui/navbar | Navbar and menu components | | @pol-studios/ui/data | Data display (DataTable, EntityTable) | | @pol-studios/ui/feedback | Feedback components (Toast, Spinner, Alert) | | @pol-studios/ui/auth | Authentication forms | | @pol-studios/ui/providers | Context providers | | @pol-studios/ui/contexts | React contexts | | @pol-studios/ui/hooks | UI-specific hooks | | @pol-studios/ui/cards | Card components | | @pol-studios/ui/charts | Chart components (Recharts-based) | | @pol-studios/ui/adapters | Router and data adapters | | @pol-studios/ui/types | TypeScript types | | @pol-studios/ui/file | File upload components | | @pol-studios/ui/crud | CRUD operation components | | @pol-studios/ui/components/chat-agent | Chat/AI agent components | | @pol-studios/ui/styles/globals.css | Global CSS styles |

API Reference

Primitives (shadcn/ui)

Base components built on Radix UI.

import {
  // Layout
  Card, CardHeader, CardTitle, CardContent, CardFooter,
  Separator, ScrollArea, Collapsible, Tabs,

  // Forms
  Button, Input, Textarea, Checkbox, Switch, Slider,
  Select, RadioGroup, Label, Form,

  // Overlays
  Dialog, Sheet, Popover, Tooltip, DropdownMenu,
  AlertDialog, ContextMenu, HoverCard,

  // Feedback
  Alert, Badge, Progress, Skeleton, Spinner,
  Toast, Toaster,

  // Navigation
  Breadcrumb, NavigationMenu, Menubar, Pagination,

  // Data Display
  Table, Avatar, Accordion, Carousel,
} from "@pol-studios/ui";

Components

Complex application components.

import {
  // Forms
  Input, Select, Checkbox, SearchInput, DatePicker, DateRangePicker,
  InputWithTagging, OptionalInput,

  // Display
  Modal, Drawer, SideSheet, Tooltip, Dropdown, Menu,
  Heading, Text, Icon, Skeleton, Spinner,

  // Tables
  Table, TableHead, TableRow, TableCell, Pagination,
  DataTable, EntityTableView, EntityTableWithPagination,

  // Utility
  AttachmentUploader, SortableList, EntityDropdown,
  NotificationIcon, SavingIndicator, OfflineBanner,

  // SDK Components
  AddUserDropdown, PatternDropdown,
} from "@pol-studios/ui/components";

Data Display

import { DataTable, EntityTableView } from "@pol-studios/ui/data";

<DataTable
  data={items}
  columns={[
    { key: "name", header: "Name" },
    { key: "status", header: "Status", badge: true },
  ]}
  actions={[
    { label: "Edit", onClick: handleEdit },
  ]}
/>

<EntityTableView
  columns={tableColumns}
  data={entities}
  onRowClick={handleRowClick}
/>

Charts

Recharts-based chart components.

import {
  CircleChartCard,
  ChartGenerator,
  RechartsBarChart,
  RechartsPieChart,
  RechartsLineChart,
  RechartsAreaChart,
  processFieldData,
  formatNumber,
} from "@pol-studios/ui/charts";

<CircleChartCard
  title="Distribution"
  data={chartData}
  config={chartConfig}
/>

<ChartGenerator
  data={rawData}
  type="bar"
  config={generatorConfig}
/>

Navigation

import {
  BottomNav,
  MenuToggle,
  UserProfileName,
  UserProfilePicture,
  PageHeader,
} from "@pol-studios/ui/nav";

<PageHeader
  title="Dashboard"
  breadcrumbs={[{ label: "Home", href: "/" }]}
/>

Forms

import { MultiForm, MultiStepForm, FileDropzone } from "@pol-studios/ui/forms";

<MultiStepForm
  steps={[
    { title: "Basic Info", component: BasicInfoStep },
    { title: "Details", component: DetailsStep },
  ]}
  onComplete={handleSubmit}
/>

<FileDropzone
  accept={{ "image/*": [".png", ".jpg"] }}
  onDrop={handleFiles}
/>

Authentication

import {
  LoginForm,
  SignUpForm,
  ForgotPasswordForm,
  UpdatePasswordForm,
} from "@pol-studios/ui/auth";

<LoginForm
  onSubmit={handleLogin}
  onForgotPassword={handleForgotPassword}
/>

Providers

import {
  PolComponentsProvider,
  NavContextProvider,
  AlertProvider,
} from "@pol-studios/ui/providers";

<PolComponentsProvider config={appConfig}>
  <NavContextProvider>
    <App />
  </NavContextProvider>
</PolComponentsProvider>

Hooks

import {
  useAlert,
  useNavigate,
  usePolNavigate,
  useMultistepForm,
  useKeyboardShortcuts,
  useAutoHeight,
  useControlledState,
} from "@pol-studios/ui/hooks";

const { showAlert, hideAlert } = useAlert();
const navigate = useNavigate();

Adapters

import {
  createTanStackRouterAdapter,
  createSupabaseDataAdapter,
  createPolDbHooksAuthAdapter,
} from "@pol-studios/ui/adapters";

const routerAdapter = createTanStackRouterAdapter(router);
const dataAdapter = createSupabaseDataAdapter(supabase);

Styling

Import global styles in your app:

import "@pol-studios/ui/styles/globals.css";

Uses Tailwind CSS with the following dependencies:

• tailwindcss - Utility-first CSS
• tailwindcss-animate - Animation utilities
• class-variance-authority - Variant management

TypeScript Types

import type {
  // Component props
  ModalProps,
  TooltipProps,
  DataTableProps,
  ChartConfig,

  // Data types
  DataItem,
  BadgeVariant,
  LayoutVariant,

  // Table types
  EntityTableColumn,
  ColumnConfigItem,

  // Chart types
  ChartType,
  ChartDataType,
  TimeSeriesData,

  // Provider types
  PolComponentsConfig,
  NavContextValue,
} from "@pol-studios/ui";

Related Packages

• @pol-studios/hooks - Custom React hooks
• @pol-studios/utils - Utility functions
• @pol-studios/ui/filters - Filter components
• @pol-studios/db - Database utilities
• @pol-studios/db/auth - Authentication

License

UNLICENSED