@ensdomains/thorin
TypeScript icon, indicating that this package has built-in type declarations

0.6.50 • Public • Published

ENS Design System · NPM version License

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.

Contributing

Contribute to this project by sending a pull request to this repository.

Sources

Forked from degen.

Readme

Keywords

none

Package Sidebar

Install

npm i @ensdomains/thorin

Weekly Downloads

97

Version

0.6.50

License

MIT

Unpacked Size

833 kB

Total Files

115

Last publish

Collaborators

  • davidchu
  • taytems
  • makoto_inoue
  • decanus
  • nickjohnson
  • jefflau
  • mdt.
  • leeondamiky