Strum Design System

React components and styles built with Vanilla Extract.
A badge with the version number of the NPM packageA badge displaying the MIT license for this software

With NPM

npm i @strum/react

or Yarn

yarn add @strum/react

Import the base CSS from @strum/react/styles, and then wrap your application in a <StrumProvider />.

import '@strum/react/styles';
import { StrumProvider } from '@strum/react';
const App = () => {
return <StrumProvider>{children}</StrumProvider>;
};

CSS Resets

The base stylesheet that ships with Strum includes an implementation of Modern Normalize, so it is not necessary to import additional CSS resets. We suggest removing any resets you already have installed.

Fonts

Strum requests Inter and JetBrains Mono for its font stack, but to take advantage of these fonts you'll need to load them into your application. The simplest option is to install a Fontsource package for each font, and follow their guide for your chosen app framework.

When creating your @font-face, the Inter font family should be named InterVariable or Inter, and JetBrains should be called JetBrains MonoVariable or JetBrains. Installing from Fontsource will set these names as expected.

Using components
Link to this heading

import { Box, Button } from '@strum/react';