id: getting-started
kind: entry
name: Getting Started
description: How to install the design system and render your first component.

metadata:
  status: {status: stable}
  since: 1.0.0
  tags: [onboarding]

refs:
  - to: button
    rel: relates-to

# `imports` is a component-only field (see entries/component.schema.yaml's
# own $comment) - a manual like this one has nothing to put it on, so the
# install instructions stay prose here instead.
sections:
  - kind: steps
    for: all
    freeform:
      - title: Install
        id: install
        body: Add the package and its peer dependencies.
      - title: Import tokens
        id: import-tokens
        body: Load the base theme before rendering any component.
    items:
      - title: Install the package
        description: Run npm install @org/ds-react.
      - title: Load the base theme
        description: Import the base stylesheet in your app entry point.
      - title: Render your first component
        description: "Render a component, e.g. Button with variant set to 'primary'. A primary button appears, styled with the design system's tokens."

  # Nothing here fits guidelines/definitions/steps - it's neither a rule,
  # a term, nor a procedure, just background context - so it uses the
  # generic `section` kind instead of stretching one of the other three
  # to fit.
  - kind: section
    for: all
    title: Troubleshooting
    freeform:
      - title: Styles don't apply
        body: Confirm the base theme is imported before any component renders - a component's own CSS assumes the theme's custom properties already exist.
