Strata is NinjaTrader’s design system. The Design System Squad maintains it. It ships the design tokens and components that make NinjaTrader products look and behave the same.
What Strata ships
| Package | What it does |
|---|---|
@nt-ninjatrader/web-strata |
React components and design tokens for web apps and the Forge desktop shell |
@nt-ninjatrader/eslint-plugin-strata |
ESLint rules built for Strata |
| Strata MCP | Gives coding agents read-only access to component props, variants, Storybook examples, tokens, and design guidance |
Browse the components in Storybook and the designs in the Strata Figma library.
Build with Strata
- Build UI from Strata components. Do not rebuild a component that Strata already ships.
- Style with Strata tokens by name. Do not hardcode a value that a token covers, such as a hex code or a pixel spacing value.
- Do not restyle a Strata component at the call site to match a design. When a component and its Figma design disagree, report it to the Squad.
- When Strata lacks what you need, ask in
#ask-strata-ntbefore you build it yourself. The Squad decides whether the request becomes a pull request, a roadmap item, or an RFC.
How to use the design system covers installation and every styling path: Tailwind, CSS custom properties, CSS in JS, and resolved values for canvas and C#.
Catch design system misuse with ESLint
Add the recommended config from @nt-ninjatrader/eslint-plugin-strata to a repository that builds UI with Strata. Its rules are written for Strata, so they catch misuse of the design system that reviews and tests often miss.
import strataPlugin from "@nt-ninjatrader/eslint-plugin-strata";
export default [strataPlugin.configs.recommended];The plugin also ships an internal config. Strata uses it on its own components, and consuming repositories do not need it.
Give coding agents the real component API
A coding agent that guesses a prop name or a token value writes code that looks right and renders wrong. Connect the Strata MCP before an agent writes Strata code, so it reads the real API instead.
Catch visual changes with Drift
Drift is NinjaTrader’s visual regression tool. On each pull request it captures screenshots, compares them with the main baseline, and posts a drift / review check with a link to a review site. Strata runs Drift on every component change.
Add Drift to a repository that builds UI with Strata. It shows when a Strata upgrade or a local change moves your UI before the change merges. Drift works with Storybook, or with any running app through Playwright. The Drift repository covers setup.
Change Strata
Any engineer can contribute to Strata. Follow Contributing to Strata. Every Strata pull request references a Jira ticket, and a visual change also passes design review against Figma.