@pfizer-cx/cx-ds

CX Design System — Pfizer's design system built on shadcn/ui, Tailwind CSS v4, and Radix UI. It provides 50+ accessible, themeable components designed for AI-assisted development.

Installation

npm install @pfizer-cx/cx-ds

Peer dependencies

Tailwind CSS v4 is required. Install peer dependencies if not already present:

npm install react react-dom tailwindcss@^4

Setup

1. Import the styles

Add the stylesheet to your app entry (e.g. main.tsx or layout.tsx):

import "@pfizer-cx/cx-ds/styles"

Or in CSS:

@import "@pfizer-cx/cx-ds/styles";

2. Use components

import { Button, Card, CardContent, CardHeader, CardTitle, Input, Label } from "@pfizer-cx/cx-ds"

export function LoginForm() {
  return (
    <Card className="w-full max-w-md mx-auto">
      <CardHeader>
        <CardTitle>Sign in</CardTitle>
      </CardHeader>
      <CardContent className="space-y-section">
        <div className="space-y-field">
          <Label>Email</Label>
          <Input type="email" placeholder="[email protected]" />
        </div>
        <div className="space-y-field">
          <Label>Password</Label>
          <Input type="password" />
        </div>
        <Button className="w-full">Sign in</Button>
      </CardContent>
    </Card>
  )
}

3. Brand assets

The Pfizer logo is available as a separate sub-path export:

import { Logo } from "@pfizer-cx/cx-ds/brand"

<Logo variant="color" className="h-8 w-auto" />

Variants: "color" | "black" | "white"

Tailwind CSS v4

This package requires Tailwind CSS v4. The stylesheet (@pfizer-cx/cx-ds/styles) uses @theme and CSS custom properties — these are v4-only features and are not compatible with Tailwind v3.

AI-Assisted Development

cx-ds is designed to be AI-compliant — every component, token, and pattern is documented in machine-readable guidelines that AI tools consume at generation time.

Guidelines structure

node_modules/@pfizer-cx/cx-ds/
├── GUIDELINES.md              ← Core rules (universal, theme-agnostic)
└── themes/
    └── default/
        └── GUIDELINES.md      ← Default theme values (colors, radii, fonts)

GUIDELINES.md (core) contains:

• Complete component inventory and per-component API rules
• Icon system rules and approved Lucide icon list
• Spacing tokens (space-y-field, space-y-group, space-y-section, etc.)
• Typography scale and font weight classes
• What AI must never do (hardcode hex values, invent components, skip semantic tokens)

themes/default/GUIDELINES.md contains:

• Resolved color values for all semantic tokens
• Border radius rules per component type
• Font family (Pfizer Diatype) and available weights
• Dark mode token values

Using with an AI generator

Fetch both files and prepend them to your system prompt:

const [core, theme] = await Promise.all([
  fetch("/node_modules/@pfizer-cx/cx-ds/GUIDELINES.md").then(r => r.text()),
  fetch("/node_modules/@pfizer-cx/cx-ds/themes/default/GUIDELINES.md").then(r => r.text()),
])

const systemPrompt = `${core}\n\n${theme}\n\n${YOUR_INSTRUCTIONS}`

This gives the model full context on available components, valid tokens, and theme-specific styling — producing output that is consistent with the design system without manual correction.

Available components

Accordion, Alert, AlertDialog, AspectRatio, Avatar, Badge, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, Chart, Checkbox, Collapsible, Command, ContextMenu, Dialog, Drawer, DropdownMenu, Empty, Field, Form, HoverCard, HorizontalNav, Input, InputGroup, InputOTP, Item, Kbd, Label, Menubar, NavigationMenu, Pagination, Popover, Progress, RadioGroup, Resizable, ScrollArea, Select, Separator, Sheet, Sidebar, Skeleton, Slider, Sonner (Toaster), Spinner, Switch, Table, Tabs, Textarea, Toggle, ToggleGroup, Tooltip

Changelog

See CHANGELOG.md for the full release history.

License

UNLICENSED — Pfizer internal use only.