@0xsequence/design-system

Live Storybook

Sequence Design System

Sequence Design System is a reusable component library uses across the Sequence product suite.

Components are written in React with Tailwind, and its stories are written in Component Story Format.

Install

pnpm add @0xsequence/design-system

Peer Dependencies

The design system relies on these peer dependencies to be installed in your application:

• pnpm add react react-dom motion

Use

Import the styles at the root of your app:

import '@0xsequence/design-system/styles.css'

Then wrap your application root with the ThemeProvider:

import { ThemeProvider } from '@0xsequence/design-system'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>
)

Then import components from the design system to build your UI:

import { Text, Button, useTheme } from '@0xsequence/design-system'

const App = () => (
  const { theme, setTheme } = useTheme()

  <div>
    <Text variant="normal">Hello, World!</Text>
    <Button variant="primary" label="Change theme" onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} />
  </div>
)

Run and Develop Locally

Clone the Sequence Design System GitHub Project then start Storybook.

pnpm install && pnpm storybook

Migration from 1.x to 2.x

To make migrating from the vanilla-extract polymorphic box model styling system used in v1.x to the simplified tailwind classes version in 2.x you can use the supplied codemod to do most of the work for you.

Give the relative path to your application, ie.

pnpm codemod ../wallet-webapp/src/**/*.{ts,tsx}

And the codemod will convert atom props to tailwind classnames and handle as props, amonst other things. Give it a try and save yourself some time.

Create a snapshot release

1. Bump version in package.json to 0.0.0-YYYYmmddHHMMSS (echo -n 0.0.0- ; date -u +%Y%m%d%H%M%S)
2. git commit -a -m <version>
3. pnpm publish --tag snapshot

Used by

• Sequence Wallet
• Sequence Console
• Sequence Status
• Sequence Demo Dapp Github Project

Note: this package is not used in Storybook's UI, but the visual design is identical.

Resources

• Storybook Documentation
• GitHub Repository