@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 Vanilla Extract, 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
• pnpm add react-dom
• pnpm add framer-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 { Box, Text, Button, useTheme } from '@0xsequence/design-system'

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

  <Box gap="1"> // display="flex" is automatically applied when flex properties are added to a Box component
    <Text variant="normal">Hello, World!</Text>
    <Button variant="primary" label="Change theme" onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} />
  </Box>
)

Run and Develop Locally

Clone the Sequence Design System GitHub Project then start Storybook.

pnpm install && pnpm storybook

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