UI 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 elements together, we provide the primitives when possible. If a molecule doesn't suit your needs, you can reconstruct it as you wish.

Github (opens in a new tab)


NPM (opens in a new tab)

Storybook (opens in a new tab)



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 it's data to other components.

// main.tsx
import { HausThemeProvider } from '@daohaus/ui';
          <Routes />


There are examples of most components in our Storybook (opens in a new tab).

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

How to override the theme

The theme.ts file establishes base styles for components, leveraging the Radix (opens in a new tab) open-source color system. The <HausThemeContext> sets state variables for primary, secondary, tertiary, neutral, and utility colors.

DAOhaus DefaultTheme (opens in a new tab)

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();
  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} />;