Technical setup

The design systen consists of four packages. design-tokens, react-icons, react-ui-kit and charts.

Design tokens

This package contains colors used across all projects.

Install @urbaninfrastructure/design-tokens from npm:

npm install @urbaninfrastructure/design-tokens

This package contains a collection of icons as React components.

Install @urbaninfrastructure/react-icons from NPM by running yarn add @urbaninfrastructure/react-icons.

The icon components can then be imported from @urbaninfrastructure/react-icons, Remember, only import the icons you need:

import {Check as CheckIcon} from '@urbaninfrastructure/react-icons'
function App() (
  <CheckIcon color="primary" />
)

This package is our component library built using React and styled-components.

Install @urbaninfrastructure/react-ui-kit and styled-components from npm:

npm install @urbaninfrastructure/react-ui-kit styled-components

There is no required setup for react-ui-kit, it exposes ready to use components.

You can use components in your React app:

import { Button } from "@urbaninfrastructure/react-ui-kit";
const App = () => <Button variant="primary">Hello world!</Button>;
export default App;

This library is a collection of react chart components.

Install @urbaninfrastructure/charts from NPM by running yarn add @urbaninfrastructure/charts.

Then import the component you want by use:

import { BarStackHorizontalSimple } from @urbaninfrastructure/charts
const App = () => <BarStackHorizontalSimple data={[...]} />