The Strum logo: two oscillating strings from an instrument next to the word Strum
Skip to content
GitHub

Strum Design System

React components and styles built with Vanilla Extract.

Installation
Link to this heading

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

Setup
Link to this heading

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.

If your font loader can assign a font family as a CSS variable, simply assign the sans font to --fonts-sans and the monospace font to --fonts-mono. For example, if using @next/font:

const jetBrainsMono = JetBrains_Mono({
  subsets: ['latin'],
  variable: '--fonts-mono',
});
const inter = Inter({ subsets: ['latin'], variable: '--fonts-sans' });


// Assign `--fonts-mono` to `jetBrainsMono.style.fontFamily` in your app
// Assign `--fonts-sans` to `inter.style.fontFamily` in your app

Using components
Link to this heading

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

  alignItems="center"

  backgroundColor="neutral6"

  borderRadius="medium"

  padding="6"

  display="flex"

  justifyContent="center"

  flexDirection={{ xs: 'column', md: 'row' }}

>

  <Button color="accent">Strum a chord</Button>

</Box>