@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

Use

Import the styles at the root of your app

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

Then import components you want into your UI

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

and use them like so

const example = () => (
  <Box display="flex" gap="1">
    <Text variant="normal">Hello, World!</Text>
    <Button variant="primary" label="Click me" onClick={() => 0}/>
  </Box>
)

Run and Develop Locally

Clone the Sequence Design System GitHub Project then start Storybook.

pnpm install && pnpm storybook

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