@streamoid/ui

The Streamoid design system — ~125 React components (Sc*) shared by CXO, Photogenix, Catalogix and Artifax.

Installation

npm install @streamoid/ui
# or
yarn add @streamoid/ui
# or
pnpm add @streamoid/ui

@streamoid/icons and @streamoid/tokens come along as dependencies; react and react-dom (18 or 19) are peers.

Usage

import { ScButton } from "@streamoid/ui";
import "@streamoid/ui/dist/index.css"; // once, at your app root — don't forget this

function App() {
  return <ScButton text="Click me" variant="mono" size="md" onClick={handleClick} />;
}

📖 Per-component docs (start here — especially if you're an AI agent)

Every component ships its own doc answering how / where / when / why to use it, with a full props table (real defaults), copy-paste recipes, the traps specific to it, and a real call site from a host app.

| File | What it's for | |---|---| | node_modules/@streamoid/ui/dist/docs/AGENTS.md | Read this first. One line per component grouped by category, plus an "easily confused" table. Route from here. | | node_modules/@streamoid/ui/dist/docs/<ScName>.md | The full doc for one component, e.g. ScButton.md. | | node_modules/@streamoid/ui/dist/docs/components.json | The same metadata as data — category, tags, related, required props, status — for programmatic lookup. |

Working inside this monorepo instead? The docs are authored next to each component, at packages/ui/src/SC-<Name>/README.md, and the shape they must follow is docs/COMPONENT-README-TEMPLATE.md. npm run build:docs flattens them into dist/docs/ — that step is part of npm run build, so new components need a README or they ship undocumented (the build prints a list of folders missing one).

A broader map of the system — the 5 packages, per-app adoption, cross-app patterns — is in docs/COMPONENT-CATALOG.md.

What you get

• Theme-aware by construction. Every component is styled off the --alias-* semantic tokens in @streamoid/tokens (dark on :root, light override). No component contains a hex value, so light/dark works with no work at the call site.
• CSS Modules, bundled to a single dist/index.css.
• TypeScript types for every component and its props.
• Desktop and mobile variants (*Mobile) for teams, settings, billing, workspace.
• Figma parity — variant / size / state prop names map onto the design library.

License

ISC