Nouns Builder Components

Nouns Builder Components is a collection of reusable, lightly-styled React components designed for DAOs built with Nouns Builder. Builder DAO funded the initial development of the library—with credit to ripe0x (design and development) and badublanc (development).

Note

This library is for technical users. Check out the easy-to-use builder to embed the components without coding!

Click here to preview all the components!

Installation

You can install the library and its peer dependencies with your favorite package manager.

# npm
npm i nouns-builder-components @rainbow-me/rainbowkit@latest wagmi viem

# yarn
yarn add nouns-builder-components @rainbow-me/rainbowkit@latest wagmi viem

Setup

Once installed, import the BuilderDAO provider and component stylesheet. Wrap your application with BuilderDAO, RainbowKitProvider, and WagmiConfig. Instructions for setting up wagmi and RainbowKit are available in the RainbowKit installation documentation.

A working setup can be found on CodeSanbox.

// ...
import 'nouns-builder-components/index.css';
import { BuilderDAO } from 'nouns-builder-components';

// ...

export default function App() {
  return (
    <WagmiConfig client={wagmiClient}>
      <RainbowKitProvider chains={chains}>
        {/* Purple Dao */}
        <BuilderDAO
          collection="0xa45662638E9f3bbb7A6FeCb4B17853B7ba0F3a60"
          chain="MAINNET"
        >
          <YourApp />
        </BuilderDAO>
      </RainbowKitProvider>
    </WagmiConfig>
  );
}

Usage

Now, import and use the desired components in your application.

import { AuctionHero, CollectionList, useDao } from 'nouns-builder-components';

export default function App() {
  const dao = useDao();

  if (!dao) return <></>;
  return (
    <div className="App">
      <AuctionHero dao={dao} />
      <CollectionList dao={dao} />
    </div>
  );
}

See a working demo on CodeSandbox.

Components

Each component needs the dao prop, which you can get by with the useDao hook. Each component also accepts an opts prop: an object configuring the theme and other options.

Components include:

• AuctionHero
• CollectionList
• MemberList
• ProposalList
• Treasury
• PropHouseRounds
• PropHouseProps

⭐️ AuctionHero

Options

| key | value | | -------- | ---------------------------------- | | theme? | base or dark - default: base |

Example Usage

import { AuctionHero, useDao } from 'nouns-builder-components';

export default function App() {
  const dao = useDao();

  if (!dao) return <></>;
  return <AuctionHero dao={dao} opts={{ theme: 'base' }} />;
}

⭐️ CollectionList

Options

| key | value | | ---------------- | ---------------------------------- | | theme? | base or dark - default: base | | rows? | number - default: 3 | | itemsPerRow? | number - default: 5 | | sortDirection? | ASC or DESC - default: ASC | | hideLabels? | boolean - default: true |

Example Usage

import { CollectionList, useDao } from 'nouns-builder-components';

export default function App() {
  const dao = useDao();

  if (!dao) return <></>;
  return <CollectionList dao={dao} opts={{ theme: 'dark', rows: 2 }} />;
}

⭐️ MemberList

Options

| key | value | | -------------- | ---------------------------------- | | theme? | base or dark - default: base | | rows? | number - default: 3 | | itemsPerRow? | number - default: 6 |

Example Usage

import { MemberList, useDao } from 'nouns-builder-components';

export default function App() {
  const dao = useDao();

  if (!dao) return <></>;
  return <MemberList dao={dao} opts={{ rows: 5, itemsPerRow: 5 }} />;
}

⭐️ ProposalList

Options

| key | value | | ---------------- | ---------------------------------- | | theme? | base or dark - default: base | | sortDirection? | ASC or DESC - default: DESC | | max? | number - default: 10 |

Example Usage

import { ProposalList, useDao } from 'nouns-builder-components';

export default function App() {
  const dao = useDao();

  if (!dao) return <></>;
  return <ProposalList dao={dao} opts={{ sortDirection: 'ASC', max: 5 }} />;
}

⭐️ Treasury

Options

| key | value | | -------- | ---------------------------------- | | theme? | base or dark - default: base |

Example Usage

import { Treasury, useDao } from 'nouns-builder-components';

export default function App() {
  const dao = useDao();

  if (!dao) return <></>;
  return <Treasury dao={dao} />;
}

⭐️ PropHouseRounds

Options

| key | value | | ---------------- | ---------------------------------- | | houseId | number | | theme? | base or dark - default: base | | rows? | number - default: 3 | | itemsPerRow? | number - default: 2 | | sortDirection? | ASC or DESC - default: DESC |

Example Usage

import { PropHouseRounds, useDao } from 'nouns-builder-components';

export default function App() {
  const dao = useDao();

  if (!dao) return <></>;
  return <PropHouseRounds dao={dao} opts={{ houseId: 17 }} />;
}

⭐️ PropHouseProps

Options

| key | value | | --------- | ---------------------------------- | | houseId | number | | round | string | | theme? | base or dark - default: base | | max? | number - default: 12 | | format? | grid or list - default: list |

Example Usage

import { PropHouseProps, useDao } from 'nouns-builder-components';

export default function App() {
  const dao = useDao();

  if (!dao) return <></>;
  return (
    <PropHouseProps
      dao={dao}
      opts={{ houseId: 17, round: 'Retroactive Funding' }}
    />
  );
}