@ensdomains/thorin NPM

ENS Design System ·

A design system for ENS built with React and styled-components.

NOTE: This project is in alpha stage. It is in active development and is subject to change.

Install

To install this package using npm:

npm install @ensdomains/thorin styled-components react-transition-state@1.1.5

To install this package using yarn:

yarn add @ensdomains/thorin styled-components react-transition-state@1.1.5

Checkout the project's playroom to preview the components in a live online environment.

Set Up

In your App component, wrap the root of your app in a ThemeProvider module from styled-components. Import ThorinGlobalStyles and declare it as a child of ThemeProvider to set global styles. Set the theme by passing a theme object to ThemeProvider.

import { ThemeProvider } from 'styled-components'
import { ThorinGlobalStyles, lightTheme } from '@ensdomains/thorin'

const App = () => {
  return (
    <ThemeProvider theme={lightTheme}>
      <ThorinGlobalStyles />
      {children}
    </ThemeProvider>
  )
}

Dark Theme

To use the dark theme, import darkTheme and pass it to the ThemeProvider

import { ThemeProvider } from 'styled-components'
import { ThorinGlobalStyles, lightTheme } from '@ensdomains/thorin'

const App = () => {
  return (
    <ThemeProvider theme={lightTheme}>
      <ThorinGlobalStyles />
      {children}
    </ThemeProvider>
  )
}

Use Components

A list of components with examples are available on the project website.

A simple example to get you started:

import { Input, SearchSVG } from '@ensdomains/thorin'

const SearchInput = () => {
  return (
    <Input
      label="Search"
      placeholder="Name or wallet address"
      prefix={<SearchSVG />}
    />
  )
}

Documentation

You can find the full documentation on the project website.

The documentation is divided into two sections.

Guides : Documentation and tips for working on this project.
Components : Documentation and sample code for each individual component.

Development

gh clone repo @ensdomains/thorin
pnpm install
pnpm dev

Before development, it is recommended that you read the following:

Development Guide - Information and tips to help you when working on this project including:
- Component Groups - How the components are organized.
- Adding Components - A list of files that need to be added or modified for each component.
- Style Guidlines - Rules and tips to follow to keep the project code consistent and maintainable.
- Common Issues - A list of known issues and how to resolve them.
Playroom Guide - Information on how to add state and interactivity to sample code in playroom and mdx code previews.