Prime Design Architecture

A lightweight, scalable and fully-typed design system built with React, TypeScript and Vite.

Prime Design Architecture now includes:

• Core UI primitives (Button, Input, Modal, etc.)
• Form System (FormField, Select, Switch, Textarea)
• Layout + Navigation System (AppShell, Sidebar, Topbar, PageHeader, Breadcrumb, NavigationMenu)
• Lightweight Table for presentation use cases
• Advanced DataTable for enterprise-grade data grids

Installation

npm install prime-design-architecture

Quick Start

Import the global styles once at the entry point of your application:

import 'prime-design-architecture/style.css';

Wrap your app with PrimeProvider and start using components:

import { PrimeProvider, Button, Card, Input, useTheme } from 'prime-design-architecture';

function AppContent() {
  const { theme, toggleTheme } = useTheme();

  return (
    <Card padding="lg">
      <h1>Prime Design Architecture</h1>
      <Input label="Your Name" placeholder="Type here..." />
      <div style={{ display: 'flex', gap: '8px', marginTop: '16px' }}>
        <Button variant="primary" onClick={toggleTheme}>
          {theme.name === 'light' ? '🌙 Dark' : '☀️ Light'}
        </Button>
        <Button variant="secondary">Cancel</Button>
      </div>
    </Card>
  );
}

export function App() {
  return (
    <PrimeProvider theme="system">
      <AppContent />
    </PrimeProvider>
  );
}

Form System Example

Build production-ready SaaS forms with consistent spacing, messaging and states:

import {
  FormField,
  Input,
  Select,
  Switch,
  Textarea,
  Button,
} from 'prime-design-architecture';

export function WorkspaceSettingsForm() {
  return (
    <form style={{ display: 'grid', gap: '16px', maxWidth: 640 }}>
      <FormField
        label="Workspace Name"
        helperText="Shown to your team in the top navigation."
        required
      >
        <Input placeholder="Acme Operations" />
      </FormField>

      <FormField label="Industry" required>
        <Select placeholder="Select an industry" defaultValue="SaaS">
          <option value="SaaS">SaaS</option>
          <option value="Fintech">Fintech</option>
          <option value="Healthcare">Healthcare</option>
        </Select>
      </FormField>

      <FormField label="Enable Usage Analytics" helperText="Collects aggregated product events.">
        <Switch defaultChecked />
      </FormField>

      <FormField label="Internal Notes" helperText="Visible only to your workspace admins.">
        <Textarea
          placeholder="Add onboarding notes, escalation paths, and account context..."
          showCounter
          maxLength={180}
        />
      </FormField>

      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
        <Button type="submit">Save Changes</Button>
      </div>
    </form>
  );
}

Layout + Navigation System

Build complete dashboard/admin structures with standalone primitives or composed app shells.

Standalone primitives

import {
  Sidebar,
  Topbar,
  PageHeader,
  Breadcrumb,
  NavigationMenu,
  ContentArea,
} from 'prime-design-architecture';

export function StandaloneLayoutPieces() {
  return (
    <div style={{ display: 'grid', gap: 16 }}>
      <Topbar
        leftContent={<strong>Acme Admin</strong>}
        rightContent={<button type="button">New</button>}
      />

      <PageHeader
        title="Users"
        subtitle="Manage members and permissions"
        breadcrumbs={[
          { label: 'Home', href: '/' },
          { label: 'Settings', href: '/settings' },
          { label: 'Users', current: true },
        ]}
      />

      <Sidebar navigation={
        <NavigationMenu
          items={[
            { id: 'dashboard', label: 'Dashboard', active: true },
            { id: 'users', label: 'Users' },
          ]}
        />
      } />

      <ContentArea fluid>
        <p>Content area used independently from AppShell.</p>
      </ContentArea>
    </div>
  );
}

Composed AppShell

import {
  AppShell,
  Sidebar,
  Topbar,
  ContentArea,
  PageHeader,
} from 'prime-design-architecture';

export function DashboardLayout() {
  return (
    <AppShell
      sidebar={
        <Sidebar
          groups={[
            {
              id: 'main',
              label: 'Main',
              items: [
                { id: 'dashboard', label: 'Dashboard', active: true },
                { id: 'analytics', label: 'Analytics' },
              ],
            },
          ]}
        />
      }
      topbar={<Topbar sticky />}
    >
      <ContentArea maxWidth="xl">
        <PageHeader title="Dashboard" subtitle="Overview of key business metrics" />
        <div>Page content</div>
      </ContentArea>
    </AppShell>
  );
}

Table vs DataTable

Use each component according to complexity:

• Table: lightweight and presentation-focused (documentation, settings, static data)
• DataTable: advanced and feature-rich (sorting, filtering, row selection, pagination, bulk actions)

import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableCell,
  DataTable,
} from 'prime-design-architecture';

// Lightweight Table
function SimpleTable() {
  return (
    <Table striped hoverable>
      <TableHeader>
        <TableRow>
          <TableCell as="th">Setting</TableCell>
          <TableCell as="th">Value</TableCell>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>Timezone</TableCell>
          <TableCell>UTC-03:00</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

// Advanced DataTable
function UsersDataTable() {
  return (
    <DataTable
      rowKey={(row) => row.id}
      columns={[
        { key: 'name', header: 'Name', accessor: 'name', sortable: true },
        { key: 'email', header: 'Email', accessor: 'email', sortable: true },
      ]}
      data={[
        { id: 1, name: 'Alice', email: '[email protected]' },
        { id: 2, name: 'Bruno', email: '[email protected]' },
      ]}
      selectableRows
      filterValue=""
      onFilterChange={() => undefined}
      onPageChange={() => undefined}
      page={1}
      pageSize={10}
      totalItems={2}
    />
  );
}

Subpath Imports (Tree-shaking)

Available standalone entry points:

import { Button } from 'prime-design-architecture/button';
import { Input }  from 'prime-design-architecture/input';
import { Modal }  from 'prime-design-architecture/modal';
import { Table }  from 'prime-design-architecture/table';

Current subpaths:

• prime-design-architecture/button
• prime-design-architecture/input
• prime-design-architecture/card
• prime-design-architecture/modal
• prime-design-architecture/tooltip
• prime-design-architecture/badge
• prime-design-architecture/alert
• prime-design-architecture/avatar
• prime-design-architecture/tabs
• prime-design-architecture/dropdown
• prime-design-architecture/toast
• prime-design-architecture/layout
• prime-design-architecture/checkbox
• prime-design-architecture/pagination
• prime-design-architecture/filterinput
• prime-design-architecture/table
• prime-design-architecture/theme
• prime-design-architecture/hooks

For full component access (including Form System and DataTable), use the root import:

import {
  AppShell,
  Sidebar,
  Topbar,
  ContentArea,
  PageHeader,
  Breadcrumb,
  NavigationMenu,
  NavItem,
  FormField,
  Select,
  Switch,
  Textarea,
  DataTable,
} from 'prime-design-architecture';

Note: prime-design-architecture/layout currently exports the legacy Layout entry point. New SaaS layout/navigation primitives are exported from the root package import.

Theming

PrimeProvider accepts three theme modes:

| Value | Behavior | |---|---| | "light" | Forces the light theme (default) | | "dark" | Forces the dark theme | | "system" | Follows the OS preference (prefers-color-scheme) |

You can also pass a custom ThemeConfig object for multi-brand support.

Token Customization

Override any design token in your own CSS without modifying the source:

:root {
  --pda-color-primary: #7c3aed;
  --pda-radius-md: 4px;
  --pda-font-size-md: 1rem;
}

Components

| Component | Import path | |---|---| | Alert | prime-design-architecture/alert | | AppShell | prime-design-architecture | | Avatar | prime-design-architecture/avatar | | Badge | prime-design-architecture/badge | | Breadcrumb | prime-design-architecture | | Button | prime-design-architecture/button | | Card | prime-design-architecture/card | | ContentArea | prime-design-architecture | | DataTable | prime-design-architecture | | Dropdown | prime-design-architecture/dropdown | | FilterInput | prime-design-architecture/filterinput | | FormField | prime-design-architecture | | FormLabel | prime-design-architecture | | FormHelperText | prime-design-architecture | | FormErrorMessage | prime-design-architecture | | Input | prime-design-architecture/input | | Layout | prime-design-architecture/layout | | Modal | prime-design-architecture/modal | | NavigationMenu | prime-design-architecture | | NavItem | prime-design-architecture | | Pagination | prime-design-architecture/pagination | | PageHeader | prime-design-architecture | | Select | prime-design-architecture | | Sidebar | prime-design-architecture | | Switch | prime-design-architecture | | Tabs | prime-design-architecture/tabs | | Table | prime-design-architecture/table or prime-design-architecture | | TableHeader | prime-design-architecture/table or prime-design-architecture | | TableBody | prime-design-architecture/table or prime-design-architecture | | TableRow | prime-design-architecture/table or prime-design-architecture | | TableCell | prime-design-architecture/table or prime-design-architecture | | Toast | prime-design-architecture/toast | | Topbar | prime-design-architecture | | Textarea | prime-design-architecture | | Tooltip | prime-design-architecture/tooltip |

Peer Dependencies

| Package | Version | |---|---| | react | ^18.0.0 | | react-dom | ^18.0.0 |

License

Apache-2.0 © Maik Rodrigues