Start by installing ui-pack with your package manager of choice


npm i @ui-pack/react


You may import from the default export of each component

import Masonry from '@ui-pack/react/masonry'

or import the component from the index module that contains all other components.

import { Masonry } from '@ui-pack/react'

Using a member import like above can lead to larger bundle sizes as it loads all components, including the ones you may not be using. It is often better to import directly from the smaller modules, using default style imports unless you use a bundler that transforms your code like babel-plugin-transform-imports or choose to rely on tree-shaking (which can be a hit or miss).


<script src="https://unpkg.com/@ui-pack/react@0.0.5/index.js"></script>


With ui-pack you do not need to worry about any additional steps to add styles to your components as basic styles are injected in the page. As a component library that's focused on UI implementation but not heavily opinionated on appearance, the default styles can be overriden easily.