Skip to content

Add component reference docs with visual examples #94

@zrosenbauer

Description

@zrosenbauer

Summary

Add a dedicated section to the docs site for UI components (re-exported from ink and @inkjs/ui, plus future custom components) with auto-generated reference documentation and visual examples of rendered output — similar to Storybook but lighter weight and tailored to terminal UI.

Components to Document

From ink

  • Box, Text, Newline, Spacer, Static, Transform

From @inkjs/ui

  • Select, MultiSelect, ConfirmInput, TextInput, PasswordInput, Spinner

Custom (Kidd)

  • KiddProvider (with useConfig, useMeta, useStore hooks)
  • screen

Tasks

  • Add a "Components" section to the docs site
  • Auto-generate API reference from TypeScript types/JSDoc where possible
  • Create visual examples showing rendered terminal output (screenshots or captured frames)
  • Design a pattern that scales to future custom components
  • Ensure each component page includes: description, props table, usage example, and visual preview

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions