react-component-library-usage

name	react-component-library-usage
description	Guidelines for using the Commonplace Design System in React components

Overview

This project uses the Commonplace Design System, Cityblock's comprehensive library of consistent, accessible, and well-tested components.

• Located at: commons-packages/commonplace/
• Import from: @cityblock/commonplace
• Documentation: https://commonplace.design
• Before building anything new, check commonplace.ts and associated .stories.tsx files

Usage Examples

// Good - Using Commonplace components with slots
import { Card, VerticalStack, Text, Row, Tag, Button } from '$commons/app/shared/commonplace';

<Card
  title="Patient information"
  actions={<Button text="Edit" />}
  leftContent={<Tag text="Active" />}
  titleRowContent={< = />}
>