Component Library
Component Library is highly opinionated. It mocks up the elements of the DAOhaus user interface and is scoped for anyone wanting to build an app that resembles this platform. The library is designed to enable building apps and features fast. Currently, customization is limited to those building a React (opens in a new tab) app with DAOhaus styles.
Inspired by Brad Frost's Atomic Design (opens in a new tab) system of components we wanted to design something declarative, accessible, and simple. These elements are intended to be composed to build application user interfaces.
We leverage React, styled-components (opens in a new tab) and the Radix open-source color system (opens in a new tab). Although these are customizable, if you have specific style needs, framework requirements or an existing design system this may not be for you.
This library includes a Storybook (opens in a new tab) and is intended for use by the DAOhaus community. Since we "dogfood" our own package development we're continually adding to this library as new components are surfaced.
Levels
Our components are organized as Atoms, Molecules, Organisms and Layouts. This pattern give you the ability to install the entire package or the flexibility to pick-and-choose what you want. Although we bundle a lot together we provide the primitives when possible. If you do not like the way a molecule is composed you can rebuild it however you want. Each of the components has an associated story (opens in a new tab) for more detailed usage.
Atoms
Atoms are the most primitive aspects of your user interface. Each atom is typically a single UI element such as a <Label> (opens in a new tab). These base-level elements are used to build up a larger components composing molecules and organisms.
<Avatar /><Badge /><Button><Card><Checkbox /><FileInput /><HelperText><Icon><Input /><Label><Link /><Radio /><Select /><Switch /><Tag><TextArea /><Tooltip />Typography
Molecules
Molecules combine atoms and are typically used to build up a larger components. An example is the <Toast /> (opens in a new tab) component which composes various atoms into multiple variations.
<AddressDisplay />Form<DataIndicator /><Dropdown><ProfileAvatar /><Toast />
Organisms
Organisms incorporate both atoms and molecules into more complex entities. <NavigationTabs /> (opens in a new tab) is an example of these larger components.
<AppSwitcher /><MemberCard /><NavigationTabs />
Layouts
Layouts allow you to organize the views in your app. They provide the foundation for you to add other component on. For example, <BiColumnLayout /> (opens in a new tab) seperates a view into left and right columns.
<BiColumnLayout /><FormLayout><OuterLayout><SingleColumLayout />
Recipes
DaoHausConnect