UI

The DAOhaus UI (opens in a new tab) package provides a theme Context Provider as well as a set of UI components that can be imported and used to build application user interfaces.

Installation

npm i @daohaus/ui

Usage

Start by importing the HausThemeProvider from the @daohaus/ui package at your app's root component, such as main.tsx:

HausThemeProvider Context Provider

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

HausThemeProvider can wrap the entire application and provide other components access to data. It changes your base configuration defaults. Although these theme variables can be changed and will cascade to other elements you may not want to use this with an existing design system.

Importing Components

Individual components are exported as named exports from the @daohaus/ui package. You can use them in your app by importing them into a component:

// Component.tsx
 
import { Button } from '@daohaus/ui'

We have a Storybook (opens in a new tab) with stories for each exported component showcasing the props and variants. All of our components are written with TypeScript so you'll be able to have TypeScript "hints" in your code editor when using them.

Structure

components (opens in a new tab)

For more details please checkout the Component Library page.

• atoms
• layouts
• molecules
• organisms

hooks (opens in a new tab)

Hooks allow us to abstract React functionality. They refactor general-purpose code into reusable functions. Each hook requires data sent in be shaped a certain way. The useMediaQuery hook helps support responsive design.

• useCopyToClipboard.tsx
• useMediaQuery.tsx
• useToast.tsx

theme (opens in a new tab)

Our theme.ts provides the base styles for components. In it we leverage the Radix open-source color system (opens in a new tab). <HausThemeContext> sets these variables for priamry, secondary, tertiary, neutral, and utility colors in state.

• atoms
• component
• global
• molecules
• organisms
• HausThemeContext.tsx
• theme.ts

types (opens in a new tab)

These are common types used throughout the component library.

• dialog.types.ts
• formAndField.ts
• theming.ts
• toast.types.ts

styled.d.ts (opens in a new tab)

This file contains the variables you can change in your theme. These updates are currently done manually. Once the patterns are fully established we will generate these automatically.

Eventually this will support multiple themes that can be passed into the <HausThemeProvider />. For now it only includes the default theme. Once this is imported, your app will inherit the default styles and tokens.