@5dpharma/ui

5D design system: shadcn/Radix primitives, composite components, tokens, and shared hooks.

Install

npm install @5dpharma/ui

Configure .npmrc (or CI NPMRC_PATH) for the @fd scope — see repo .npmrc.example.

Usage

import { Button, DataTable, PageHeader, StatusBadge } from '@5dpharma/ui'

Import styles in your product globals.css:

@import '@5dpharma/ui/styles.css';

Ensure Tailwind scans the package (Tailwind v4 @source):

@source "../../node_modules/@5dpharma/ui/src";

For Next.js, add:

transpilePackages: ['@5dpharma/ui']

Adding a new shadcn component

Do not add primitives inside a product app. Contribute here:

cd packages/ui
npx shadcn@latest add select

Export from src/index.ts, add a Storybook story, open a Changeset (minor), publish.

See CONTRIBUTING-UI.md.

StatusBadge customization

<StatusBadge status="Approved" statusConfig={{ Approved: 'lightSuccess' }} />