@0xsequence/design-system NPM

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

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

Used by

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

Resources

@radix-ui/react-aspect-ratio @radix-ui/react-checkbox @radix-ui/react-collapsible @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-progress @radix-ui/react-radio-group @radix-ui/react-select @radix-ui/react-switch @radix-ui/react-tabs @radix-ui/react-toast @radix-ui/react-tooltip react-hook-form

@everything-registry/sub-chunk-14 @infinitebrahmanuniverse/nolb-_0 @0xsequence/kit

2 days ago

3 days ago

3 days ago

3 days ago

3 days ago

4 days ago

16 days ago

21 days ago

21 days ago

21 days ago

21 days ago

21 days ago

21 days ago

27 days ago

29 days ago

30 days ago

2 months ago

3 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

5 months ago

6 months ago

6 months ago

6 months ago

7 months ago

8 months ago

8 months ago

10 months ago

10 months ago

11 months ago

10 months ago

10 months ago

8 months ago

9 months ago

10 months ago

10 months ago

11 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago