@campminder/ds

The Campminder design system as an npm package — base-ui-era components + design tokens, for apps that prefer npm install over shadcn copy-source. The package is generated from the registry (npm run sync), so it never drifts from what the design system ships.

Published to the public npm registry (no auth). Requires React 19 · Next.js App Router · Tailwind v4.

Install

npm install @campminder/ds @base-ui/react

@base-ui/react is a peer (you control its version); everything else the components need is pulled in automatically.

Wire up styles — one line

/* your globals.css, after Tailwind */
@import "tailwindcss";
@import "@campminder/ds/styles.css";   /* tokens + the @source Tailwind needs */

That single import gives you the Campminder tokens (so bg-primary is brand purple) and the Tailwind scanning of the package's components. No config file.

Use

import { Button, Card, Badge, PhoneInput, CamperForm } from "@campminder/ds"

Works in Server Components — the package carries its own client boundary.

What's included

• Primitives: avatar, badge, breadcrumb, button, card, checkbox, command, dialog, field, input, input-group, label, popover, scroll-area, select, separator, sheet, sidebar, skeleton, switch, table, tabs, textarea, tooltip
• Domain components: phone-input, photo-upload, step-card, step-notices, session-card / session-picker, person-list, person-tabs, camper-form, package-picker, addon-picker
• Hooks / utils: use-locale, use-mobile, session-selection helpers, cn

Not yet included: the admin shell (sidebar/search/top-nav) — deferred to a follow-up. Pull those from the copy-source registry for now.

Versioning

semver, shared with the registry's registry-versions.json. npm update @campminder/ds to take changes; nothing updates under you.

Maintaining (for the design system team)

src/ is generated from the registry by scripts/sync-from-registry.mjs (runs automatically in npm run build). Don't hand-edit src/ — edit the source components in the design system, and the package mirrors them. styles.css is likewise generated from app/globals.css.

npm run build      # sync from registry → generate tokens → bundle (ESM+CJS+dts)