dai-ui's Introduction

Dai-UI Styleguide

Getting Started

Install theme-ui

yarn add theme-ui

Install our default theme

yarn add @makerdao/dai-ui-theme-maker

Or create your own

// theme.js
export default {
  sizes: [0, 4, 8, 16, 32],
  colors: {
    primary: "#1AAB9B",
    secondary: "#F4B731",
  },
  // ...add your design tokens here
};

Import the theme provider from theme-ui and wrap your app, passing the theme object as prop to the provider.

// app.js
import React from "react";
import { ThemeProvider } from "theme-ui";
import theme from "./theme";

export default (props) => (
  <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
);

Use the component primitives provided by theme-ui to build your frontend.

// Form.js
<Card>
  <Box>
    <Label>Ethereum Address</Label>
    <Input defaultValue="Default Text"></Input>
    <Button>Submit</Button>
  </Box>
</Card>

See our recipes page for more examples and inspiration!

How to Contribute a Recipe

Open the Dai UI sandbox and create your recipe using the component library.
Create a new file in the recipes folder of our github repo and copy in the template below.
Copy your recipe from the sandbox editor into the template below. Don't forget to include the query string from the URL.

// MyRecipe.js
const title = "My Recipe";
const description = "Add a detailed description.";
const playroomHash = "#?code="; // Add the entire query string from the URL.

// Be sure to wrap your recipe in backticks like the example.
const component = `
<MyComponent />
`;

export default {
  component,
  title,
  description,
  playroomHash,
};