Starting a DAO is hard. This component library is intended to reduce the barriers to entry by allowing DAO founders to keep using the website solutions they already know, while adding Nounish DAO elements like auctions, treasury info, proposals, etc.

What is it this?

A component library— a set of lightly styled, reusable pieces of UI. These components make it easy both developers and non-technical users to create websites for their Nouns Builder DAO.

How do I use it?

This library was designed for both technical and non-technical users. There are two ways to use these components:

Add the embed code on existing websites
Use the component library in your React app. NPM package and usage info here

Component Embeds

Add the required DAO settings to your site

You’ll need:

An Infura or Alchemy provider key. Both providers offer free plans.
A WalletConnect project ID. You can find or create your Project ID here.
The address of the DAO NFT collection.

DAO settings code

Once you have those, copy the code below and swap out the relevant fields and add to the <head> section of your website.

<link rel="stylesheet" href="<https://unpkg.com/nouns-builder-components@latest/dist/index.css>" />
<script
    type="module"
    src="<https://unpkg.com/nouns-builder-components@latest/dist/index.js>"
		data-builder-config
		data-chain="mainnet"
		data-infura-key="[yourKey]" // only one provider is required
		data-alchemy-key="[yourKey]"
    data-dao-collection="[collectionAddress]"
		data-project-id="[your projectId]"
></script>

Navigate to the Components tab on this website and select the DAO and the component you’d like to embed. Click the Copy embed code button to grab the embed code. Add that code to an embed code element of your website

Here’s an example site for reference

Builder DAO funded the initial development of this library—with credit to ripe0x (design and development) and badublanc (development).

All code has been open-sourced: