@prood/ui

@prood/ui is the Prood design system and the shared UI layer for every Prood application. It holds the tokens, the logo, shadcn/ui primitives (Radix + Tailwind) and the components for catalog, cart, checkout, account and product UI. Photography and film live next door in @prood/media.

Design systemCopy Anchor Link

One system runs every surface: marketing, dashboard, admin, docs, storefront and hosted checkout. The rules live in packages/ui/DESIGN.md, positioning and voice in _docs/BRAND.md, and the living reference is prood.com/design.

It hangs on three physical things from a shop on a Portuguese street:

• Receipt paper: Paper, the warm canvas, and the Receipt component.
• The roof tile: Telha, the one signal color, and TileEdge and TileField, filled tiles from the wordmark's ring that always hang downward.
• The people behind the counter: real hands and faces in natural light, with one shared photo grade.

InstallationCopy Anchor Link

Already a workspace dependency. Import directly:

import { Button } from '@prood/ui/components/button'
import { ProductGrid } from '@prood/ui/components/product-grid'
import { CartDrawer } from '@prood/ui/components/cart-drawer'

Import global styles in your app's root layout:

import '@prood/ui/globals.css'
import '@prood/ui/themes/prood.css'

Import exactly one theme next to globals.css: prood.css for Prood's own apps, neutral.css for merchant surfaces.

Component categoriesCopy Anchor Link

ProductCopy Anchor Link

CartCopy Anchor Link

OrderCopy Anchor Link

Navigation & searchCopy Anchor Link

Product UICopy Anchor Link

Every dashboard and admin page is built from these.

import { PageHeader } from '@prood/ui/components/page-header'
import { Panel } from '@prood/ui/components/panel'
import { StatusBadge } from '@prood/ui/components/status-badge'

<PageHeader title="Orders" description="Everything your customers have bought." />
<Panel title="Recent orders" flush>
  <StatusBadge tone="success">Paid</StatusBadge>
</Panel>

MarketingCopy Anchor Link

ReviewsCopy Anchor Link

CommonCopy Anchor Link

shadcn primitivesCopy Anchor Link

Standard shadcn/ui components in @prood/ui/components/:

button, input, label, card, dialog, dropdown-menu, sheet, table, tabs, badge, skeleton, sonner, sidebar, etc.

Utility functionsCopy Anchor Link

import { formatPrice, localized } from '@prood/ui/lib/commerce'

formatPrice(9999, 'EUR')           // → "€99.99"
localized(product.name, 'en')      // → "T-Shirt"

Adding new componentsCopy Anchor Link

Install shadcn primitives:

pnpm dlx shadcn@latest add dialog -c packages/ui

Commerce components are hand-authored in packages/ui/src/components/.

ThemingCopy Anchor Link

Uses CSS variables with Tailwind v4. Dark mode via next-themes:

import { ThemeProvider } from 'next-themes'

<ThemeProvider attribute="class" defaultTheme="system">
  {children}
</ThemeProvider>

Color tokens are defined in packages/ui/src/styles/themes/prood.css and neutral.css. packages/ui/src/styles/globals.css maps them to Tailwind with @theme inline and holds the display type scale.

Related pagesCopy Anchor Link