Skip to content

UI components

The main entry @franksauvag/rpg-commons exports shadcn/ui primitives (new-york) and RPG-prefixed shared components.

Storybook

Interactive catalog with props and a11y checks:

Open Storybook →

Hosted at libs.heritiersdudonjon.com/storybook/.

Setup

ts
import "@franksauvag/rpg-commons/style";
import "@franksauvag/rpg-commons/fonts";

Wrap media-aware components with RPGMediaProvider:

tsx
import { RPGMediaProvider, RPGImageOrInitials, Button, Card } from "@franksauvag/rpg-commons";

<RPGMediaProvider apiBaseUrl={apiBaseUrl}>
  <Card>
    <RPGImageOrInitials label="Barbarian" size="md" />
    <Button>Action</Button>
  </Card>
</RPGMediaProvider>

Families

FamilyExamples
shadcn/uiButton, Card, Dialog, Select, …
RPG sharedRPGImageOrInitials, RPGSelectionCard, RPGEntryIconCell, RPGMediaProvider

Design tokens: Design tokens.

Full prop tables and visual states are in Storybook, not duplicated here.