UNDP design system for react !npm
Getting Started
UNDP design system for react is the implementation of
UNDP design system in React. Before starting, it is recommended to learn React first, and correctly install and configure Node.js v18 or above.
We also assumes that you have intermediate knowledge about HTML, CSS, and JavaScript/TypeScript, and React.
Note: The library uses react v19.2
Detailed documentation can be found
here
NPM Package can be found
here
$3
Using npm
``
npm i @undp/design-system-react
`
Using yarn
`
yarn add @undp/design-system-react
`
$3
It is recommended to import what you need and the use it. For example, import the Checkbox
like this:
`
import { Checkbox } from '@undp/design-system-react'
`
It is also recommended to import the css because some setting expect the CSS to be imported to look good. You can import the css file like this:
`
import '@undp/design-system-react/style.css';
``
$3
UNDP visualization library provides a built-in ts definition, you don't need to install any type definitions.
$3
This component library is built using:
- ShadCN UI — A beautifully designed component collection built with accessibility and composability in mind.
- Tailwind CSS — A utility-first CSS framework for rapidly building custom user interfaces.
- rc-slider — For slider component.
- react-select — For multi-select component.
- React (of course!) (Peer dependency)