react-components

Imported from bcgov/design-system (packages/react-components/AGENTS.md). Install upstream with npx skills add bcgov/design-system --skill react-components. Copyright stays with the author.

B.C. Design System React Components (v0.0.1)

Library context

• This React component library is part of the B.C. Design System
• Use this library when composing UI in a React project for the B.C. government

Using the component library

• Install the React components package with npm i @bcgov/design-system-react-components and import individual components as needed
• Prefer the component library API over creating new components wherever possible
• Use component props and established patterns rather than bypassing them with ad hoc markup
• When a component is missing or insufficient, extend existing design system patterns rather than creating one-off UI
  • In this case, prefer using React Aria primitives wherever possible

Component documentation

• Technical docs for components are in Storybook
• For components based on React Aria primitives, also refer to the React Aria docs for the full API reference

Available components

Styling components

• Component CSS is bundled internally
  • Do not overwrite the className for design system components
• Components are designed to work well in flexbox and grid layouts
  • The design system does not assume or enforce a specific grid or layout convention
• If writing new components, use design tokens from the @bcgov/design-tokens library to ensure coherence with other components
  • Prefer component-level styling and design tokens over bespoke CSS
  • Refer to additional instructions for working with design tokens in node_modules/@bcgov/design-tokens/AGENTS.md