@daohaus/ui

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)

Components

• Atoms (opens in a new tab)
• Molecules (opens in a new tab)
• Organisms (opens in a new tab)
• Layouts (opens in a new tab)

• DAOhaus Theme (opens in a new tab)
• Hooks (opens in a new tab)

NPM (opens in a new tab)

Storybook (opens in a new tab)

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 it's 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 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
</Button>;

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