Urban Sharing Design
Getting startedIconsTechnical setupDesign tokensReact IconsReact UI KitChartsTypography

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

React Icons

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" />

React UI Kit

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={[...]} />