Adding Components

Step-by-step workflows for extending the design system

MethodologyAdding ComponentsModifyingAdding TokensEjectingTroubleshooting

Modifying an Existing Component

  1. 1

    Read current implementation

    Use AI tools or IDE to understand the current component structure and props

  2. 2

    Update component code

    Make your changes while preserving existing functionality

  3. 3

    Update TypeScript interfaces

    Add or modify type definitions as needed

  4. 4

    Test in studio

    Run the studio app to visually test your changes across all themes

  5. 5

    Rebuild package

    pnpm --filter @thesage/ui build