[](https://github.com/sasakiassociates/design-system/actions/workflows/chromatic.yml) 
[](https://github.com/sasakiassociates/design-system/actions/workflows/firebase-deploy-built-sb.yml)
## Installation
```sh
pnpm add @strategies/ui
```
## Usage
There are two types of components in the system: interface components and portals.
The interface components specify the child elements to act as portals that you can declaratively
pass your content into. Regardless of declaration order, these named portals will place their children
inside of the elements specified by the interface component.
### Example
```jsx
import { Modal, Title, Body, Buttons, Button } from '@strategies/ui'
;This is the body of my modal
How do I make changes or implement new components?
### Implementing a new component
1. Create a new folder in `src/components` with the name of your component.
2. Create a new `.tsx` file, a testing `.stories.tsx` file, a new `.scss` file, and a README file in the folder with the name of your component.
3. Implement your component in the file.
4. Export your component from the file to the `indes.ts` in `src`.
5. Test your component in Storybook.
### Making changes to an existing component
1. Find the component in `src/components`.
2. Make changes to the component.
3. Test your changes in Storybook.
4. Commit your changes.
### components
The interface components that are available are:
- [AccordionStandard](src/components/AccordionStandard)
- [AccordionBasic](src/components/AccordionStandard)
- [BaseIcon](src/components/BaseIcon)
- [Button](src/components/Button)
- [Checkbox](src/components/Checkbox)
- [CheckboxPill](src/components/CheckboxPill)
- [Chips](src/components/Chips)
- [ColorField](src/components/ColorField)
- [ColorPicker](src/components/ColorPicker)
- [ColorItem](src/components/ColorItem)
- [FilterButton](src/components/FilterButton)
- [FilterButtonList](src/components/FilterButtonList)
- [FilterPill](src/components/FilterPill)
- [HorizontalMixer](src/components/HorizontalMixer)
- [IconButton](src/components/IconButton)
- [InputoutputPill](src/components/InputoutputPill)
- [List](src/components/List)
- [ListItem](src/components/ListItem)
- [MenuBar](src/components/MenuBar)
- [Modal](src/components/Modal)
- [MultiSliderComposite](src/components/MultiSliderComposite)
- [MultiSliderLarge](src/components/MultiSliderLarge)
- [MultiSliderOutput](src/components/MultiSliderOutput)
- [MultiSliderSmall](src/components/MultiSliderSmall)
- [NotificationIndicator](src/components/NotificationIndicator)
- [NumberField](src/components/NumberField)
- [Overlay](src/components/Overlay)
- [Panel](src/components/Panel)
- [Pill](src/components/Pill)
- [ProgressBar](src/components/ProgressBar)
- [RadioSlider](src/components/RadioSlider)
- [RadioSelect](src/components/RadioSelect)
- [ReorderableListBox](src/components/ReorderableListBox)
- [Select](src/components/Select)
- [Slider](src/components/Slider)
- [SortableListBox](src/components/SortableListBox)
- [Switch](src/components/Switch)
- [Tabs](src/components/Tabs)
- [Tooltip](src/components/Tooltip)
- [TextField](src/components/TextField)
## 
Build & Publish
- This command will roll up all the components into `dist` folder.
```sh
pnpm run build
```
- You can go to the root of the repository and follow the [instructions: how to publish all packages to npm](../../README.md#how-to-publish-all-packages-to-npm-) to publish the package.