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.
To install this package using npm:
npm install @ensdomains/thorin styled-components [email protected]
To install this package using yarn:
yarn add @ensdomains/thorin styled-components [email protected]
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>
)
}
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>
)
}
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 />}
/>
)
}
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.
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.
Contribute to this project by sending a pull request to this repository.
Forked from degen.