https://github.com/unstoppabledomains/ui-kit

A set of common Unstoppable Domains components 🧩
https://github.com/unstoppabledomains/ui-kit

components design-system react storybook typescript ui uikit web3

Last synced: 2 months ago
JSON representation

A set of common Unstoppable Domains components 🧩

• Host: GitHub
• URL: https://github.com/unstoppabledomains/ui-kit
• Owner: unstoppabledomains
• License: mit
• Created: 2022-08-03T11:35:23.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-08-26T09:18:55.000Z (5 months ago)
• Last Synced: 2024-10-28T14:58:00.635Z (3 months ago)
• Topics: components, design-system, react, storybook, typescript, ui, uikit, web3
• Language: TypeScript
• Homepage: https://unstoppabledomains.github.io/UI-Kit
• Size: 2.27 MB
• Stars: 5
• Watchers: 15
• Forks: 1
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# UI Kit

A set of common Unstoppable Domains components 🧩

[![license](https://badgen.net/github/license/unstoppabledomains/ui-kit)](https://github.com/unstoppabledomains/UI-Kit/blob/main/LICENSE)

[![npm](https://badgen.net/npm/v/@unstoppabledomains/ui-kit)](https://www.npmjs.com/package/@unstoppabledomains/ui-kit)

![node](https://badgen.net/npm/node/@unstoppabledomains/ui-kit)

## Installation

Install the package in your project directory:

```shell

// with npm

npm install --save @unstoppabledomains/ui-kit

// with yarn

yarn add @unstoppabledomains/ui-kit

```

Note that the UI Kit has peer dependencies on the React and the React DOM. If

you are not already using them in your project, you'd need to install them

(either 17th or 18th versions are required):

```shell

// with npm

npm install react react-dom

// with yarn

yarn add react react-dom

```

You might also need to install identical versions of `@types/react` and

`@types/react-dom` in the same way (in case you're using TypeScript).

## Usage

### Importing MUI components

All [Material UI](https://mui.com/material-ui/getting-started/usage/)

components, hooks, types, icons, lab, and colors can be re-exported from the UI

Kit by using these imports, respectively:

```typescript

import {Typography, useMediaQuery} from '@unstoppabledomains/ui-kit';

import type {Theme} from '@unstoppabledomains/ui-kit';

import {Edit} from '@unstoppabledomains/ui-kit/icons';

import {LoadingButton} from '@unstoppabledomains/ui-kit/lab';

import {indigo as indigoColor} from '@unstoppabledomains/ui-kit/colors';

```

The supported MUI imports mapping is as follows:

```json

{

  "@mui/material": "unstoppabledomains/ui-kit",

  "@mui/lab": "@unstoppabledomains/ui-kit/lab",

  "@mui/icons-material": "@unstoppabledomains/ui-kit/icons",

  "@mui/material/colors": "@unstoppabledomains/ui-kit/colors"

}

```

Default MUI imports (e.g.

`import Select from '@unstoppabledomains/ui-kit/Select`) are not supported.

`@unstoppabledomains/ui-kit/styles` path contains light and dark themes used on

the [Unstoppable Domains website](https://unstoppabledomains.com/), as well as

some constants specific to UD, and helper functions for creating styles with the

help of `tss-react` library:

```typescript

import {

  makeStyles,

  useStyles,

  withStyles,

  lightTheme,

  darkTheme,

  MAX_PAGE_CONTENT_WIDTH,

  MAX_ARTICLE_CONTENT_WIDTH,

} from '@unstoppabledomains/ui-kit/styles'; // all supported import names at this path

```

For example, to render a MUI component with the Unstoppable Domains website

theme applied, use the `ThemeProvider` with the UI Kit `lightTheme` or

`darkTheme` applied:

```typescript

import React from 'react';

import {ThemeProvider, Button} from '@unstoppabledomains/ui-kit';

import theme from '@unstoppabledomains/ui-kit/styles'; // lightTheme is exported as default

const App = () => {

  return (