# @daohaus/ui

The component library is organized into various component levels: _Atoms_, _Molecules_, _Organisms_, and _Layouts_. This organization allows you to install the entire package or pick the components you need. Even though we bundle many elements together, we also provide the primitives when possible. If a molecule doesn't suit your needs, you can reconstruct it as you wish.

### [View on Github](https://github.com/HausDAO/monorepo/tree/develop/libs/ui)

- **Components**
- [**Atoms**](https://github.com/HausDAO/monorepo/tree/develop/libs/ui/src/components/atoms)
- [**Molecules**](https://github.com/HausDAO/monorepo/tree/develop/libs/ui/src/components/molecules)
- [**Organisms**](https://github.com/HausDAO/monorepo/tree/develop/libs/ui/src/components/organisms)
- [**Layouts**](https://github.com/HausDAO/monorepo/tree/develop/libs/ui/src/components/layouts)
- [**DAOhaus Theme**](https://github.com/HausDAO/monorepo/tree/develop/libs/ui/src/theme)
- [**Hooks**](https://github.com/HausDAO/monorepo/tree/develop/libs/ui/src/hooks)

### [Inspect components in Storybook](https://storybook.daohaus.fun/?path=/story/atoms-avatar--small-avatar)

### [View on NPM](https://www.npmjs.com/package/@daohaus/ui)

## Usage

### Installation

yarn add @daohaus/ui

Initially, import the `HausThemeProvider` from the `@daohaus/ui` package in your app's root component, such as `main.tsx`. This wraps the entire application and avails its data to other components

// main.tsx

import { HausThemeProvider } from '@daohaus/ui';

ReactDOM.render(
  <StrictMode>
    <HausThemeProvider>
      <HashRouter>
        <HausConnectProvider>
          <Routes />
        </HausConnectProvider>
      </HashRouter>
    </HausThemeProvider>
  </StrictMode>,
  document.getElementById('root')
)

### Examples

**There are examples of most component in our [Storybook](https://storybook.daohaus.fun/)**

**How to use Components**

You can import individual components from the `@daohaus/ui` package and utilize them in your app:

import { Button } from '@daohaus/ui'

<Button 
  color="secondary" 
  onClick={somAction} 
  IconLeft={<SomeIcon />}
> 
  Button content
</Button>

**How to override the theme.**

The `theme.ts` file establishes base styles for components, leveraging the Radix [open-source color system](https://www.radix-ui.com/colors). The `<HausThemeContext>` sets state variables for primary, secondary, tertiary, neutral, and utility colors.

[Daefult DAOhaus theme](https://github.com/HausDAO/monorepo/blob/develop/libs/ui/src/theme/theme.ts#L54)

You can override this theme by passing a new theme or parts of the theme to the themeOverrides prop on the HausThemeProvider

**How to use the toast hook**

import { useToast } from '@daohaus/ui';


const { successToast } = useToast();


successToast({
  title: 'Toast title',
  description: 'Some content',
});

**How to use the media query hook**

import { useBreakpoint, widthQuery } from '@daohaus/ui';

const isMobile = useBreakpoint(widthQuery.sm);

<Button full={isMobile} />