DS9

My own internal design system. It is somewhat customizable, but has strict opinions in some places to make it easier to work with. I've also tried to make is as accessible as possible.

Installation

Add the package via NPM

npm add @johnprice99/ds9

Create a theme file

Create a theme CSS file with your colors. Other colors and components can have overrides in :root (see documentation for each component for lists).

An example showing what we have in storybook is here.

You need to import the package somewhere globally to get things like global styles. It's a good idea to install it in a common Layout file.

import "@johnprice99/ds9";

Fonts

DS9 makes no decisions for your font family that you want to use. However, it's recommended to use something like fontsource and then add your font as required

For example, adding this to your theme file:

body,
input,
textarea,
select,
button {
  font-family: "Roboto", sans-serif;
}

Aside: DS9 in Astro

Astro doesn't enable CSS imports by default. For DS9 to work in Astro, we need to add this to the astro.config file

vite: {
  ssr: {
      noExternal: ["@johnprice99/ds9"],
  },
},

Make it so... you're ready to start building!

All components are built in React. I have tested extensively in Astro but it should work in any React ecosystem. For react-aria components, React is needed, preact will not work.

import Typography from "@johnprice99/ds9/Typography";

<Typography variant="headingSm">My Heading</Typography>

Storybook - documentation

DS9 Storybook contains documentation and examples for all of the available components, their props and CSS variables to customise how they look (within the confines of the system).

Click here to visit the Storybook instance

Alternatively, you can view it locally by cloning the repo and starting storybook

npm run storybook

This will run on localhost up the documentation so you can see all of the components, options and stories available.

With the local version running, you can also run tests to ensure nothing is broken:

npm run storybook:test