@equinor/stratus-ui

React component library with UI primitives built on Equinor Design System (EDS) tokens. Ships as ESM + CJS with a bundled CSS theme file.

📚 Storybook documentation

Installation

yarn add @equinor/stratus-ui

Peer dependencies

yarn add react react-dom

Usage

Import components and the theme CSS in your app:

import "@equinor/stratus-ui/theme.css";
import { Box } from "@equinor/stratus-ui";

function App() {
  return <Box p={16} gap={8}>Hello Stratus</Box>;
}

Development

yarn install          # Install dependencies
yarn build            # Build library (types + Vite)
yarn test             # Run Vitest tests
yarn lint             # oxlint (fast pass) then ESLint
yarn storybook        # Launch Storybook on port 6006
yarn generate-icons   # Regenerate icon components from @equinor/eds-icons

Project Structure

src/
  index.ts            # Public API — all exports
  components/         # UI components (one folder each)
  icons/              # Generated icon components
  utils/              # Internal utilities (cn, polymorphic, cssProps, etc.)
  theme/              # CSS theme files (EDS tokens mapping)
  styles/             # Global/shared styles

Component folder layout

ComponentName/
  ComponentName.tsx          # Implementation
  ComponentName.css          # Plain CSS with .stratus-* selectors
  ComponentName.stories.tsx  # Storybook story
  __tests__/
    ComponentName.test.tsx   # Vitest tests

Conventions

• TypeScript everywhere
• No default exports (icons are the exception — generated code)
• Plain CSS with .stratus-* prefixed selectors (no CSS Modules, no Tailwind)
• All public exports go through src/index.ts directly (no per-component barrel files)
• Components use forwardRefWithAs for polymorphic as prop support
• CSS variables use --stratus-* namespace
• Spacing shorthand props (p, m, px, mt, etc.) via CSSProps + extractCSSProps()
• Class names composed with cn() utility
• Tests use Vitest + Testing Library + vitest-axe; every component should have an a11y test

License

Private — Equinor internal use only.