@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

The design system requires to be used within an existing tailwind configured application. Your application should import the design system preset within your main css file. Check out the Tailwind Docs for more information on setting up your application

Import the styles at the root of your app:

index.css

@import 'tailwindcss';
@import '@0xsequence/design-system/preset';

/* Your app styles */

Then wrap your application root with the ThemeProvider:

import './index.css'
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

Manual project updates

1. Upgrade the design system to the latest version

pnpm install 0xsequence/design-system@latest

2. Find and remove any import of the v1 design system stylesheet

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

3. If Tailwind is not installed in your project, install it and the vite plugin

pnpm install tailwindcss @tailwindcss/vite

4. In your main css file (eg index.css or styles.css), import Tailwind and the design system preset

@import 'tailwindcss';
@import '@0xsequence/design-system/preset';

5. Update vite.config.ts to include Tailwind

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    /* ... other plugins like react() */
    tailwindcss(),
  ],
})

Migrating from v2 to v3

V3 attemps to be mostly compatible but there are some breaking changes that will need to be addressed.

• Form components are no longer wrapped in a Field component so properties like labelLocation, label, description are no longer on components like CheckBox, TextInput, etc. You will need to wrap these components in a Field components manually. Field is now broken up between a collection of Field based components like FieldSet, FieldGroup, Field, FieldLabel, FieldDescription, FieldError to give more control how fields are displayed. Check the Field and Form examples in storybook to see how to use these or refer to the shadcn Field docs.

• RadioGroup no longer takes an options object. Instead you must use RadioGroup and RadioGroupItem components:

  <RadioGroup>
    <RadioGroupItem>
    <RadioGroupItem>
    <RadioGroupItem>
  </RadioGroup>

• Button component is now a simple component which allows you to easily create your own Buttons with children content of your choice, the Legacy Button component is renamed Button.Helper which accepts properties like leftIcon, rightIcon, label, etc.

• Button variants have changed, glass is no longer available, now uses secondary as the default. Some variants have been removed like feature, glass, emphasis, and raised.

• Glass layers and blur effects: many of the raised popover layers like Toast, Popover, Tooltip, Select, used glass blurred effect. While this looked pretty good in certain cases, it caused issues with contrast and readability when overlayed ontop of certain user generated content and lighter content would show through too much. It was decided to switch to opaque layers instead.

• Divider component is replaced with shadcn Separator component which supports horizontal and vertical orientation

• TabbedNav has been removed in favor of the Tabs components. If you want a similar behavior as the TabbedNav it is suggested you create a component within your project built from Tabs, TabsList, and TabsTrigger components.

• Select component has been broken up into composite components, the legacy Select bahavior can be accessed via Select.Helper

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
• Tailwind