1.7.8 • Published 9 months ago

@0xsequence/design-system v1.7.8

Weekly downloads
-
License
Apache-2.0
Repository
-
Last release
9 months ago

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

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

Resources

1.7.8

9 months ago

1.7.7

9 months ago

1.7.6

10 months ago

1.7.5

12 months ago

1.7.4

12 months ago

1.7.3

12 months ago

1.7.2

1 year ago

1.7.1

1 year ago

1.7.0

1 year ago

1.6.3

1 year ago

1.6.2

1 year ago

1.6.1

1 year ago

1.6.0

1 year ago

1.5.1

1 year ago

1.5.0

1 year ago

1.4.8

1 year ago

1.4.6

1 year ago

1.4.5

1 year ago

1.4.4

1 year ago

1.4.3

1 year ago

1.4.2

1 year ago

1.4.7

1 year ago

1.4.1

1 year ago

1.4.0

1 year ago

1.3.0

1 year ago

1.2.5

1 year ago

1.2.4

1 year ago

1.2.3

2 years ago

1.2.2

2 years ago

1.2.1

2 years ago

1.2.0

2 years ago

1.1.3

2 years ago

1.1.1

2 years ago

1.1.0

2 years ago

1.1.2

2 years ago

1.0.19

2 years ago

1.0.21

2 years ago

1.0.20

2 years ago

1.0.18

2 years ago

1.0.17

2 years ago

1.0.16

2 years ago

1.0.9

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.11

2 years ago

1.0.10

2 years ago

1.0.15

2 years ago

1.0.14

2 years ago

1.0.13

2 years ago

1.0.12

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

0.1.135

2 years ago

0.1.138

2 years ago

0.1.137

2 years ago

0.1.134

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

0.1.129

2 years ago

0.1.128

2 years ago

0.1.125

2 years ago

0.1.127

2 years ago

0.1.126

2 years ago

0.1.132

2 years ago

0.1.131

2 years ago

0.1.133

2 years ago

0.1.130

2 years ago

0.1.118

2 years ago

0.1.117

2 years ago

0.1.119

2 years ago

0.1.114

2 years ago

0.1.113

2 years ago

0.1.116

2 years ago

0.1.115

2 years ago

0.1.110

2 years ago

0.1.112

2 years ago

0.1.111

2 years ago

0.1.124

2 years ago

0.1.121

2 years ago

0.1.120

2 years ago

0.1.123

2 years ago

0.1.122

2 years ago

0.1.109

2 years ago

0.1.108

2 years ago

0.1.96

2 years ago

0.1.97

2 years ago

0.1.98

2 years ago

0.1.99

2 years ago

0.1.90

2 years ago

0.1.91

2 years ago

0.1.92

2 years ago

0.1.93

2 years ago

0.1.94

2 years ago

0.1.95

2 years ago

0.1.85

2 years ago

0.1.86

2 years ago

0.1.87

2 years ago

0.1.88

2 years ago

0.1.89

2 years ago

0.1.80

2 years ago

0.1.81

2 years ago

0.1.82

2 years ago

0.1.83

2 years ago

0.1.84

2 years ago

0.1.76

3 years ago

0.1.77

2 years ago

0.1.78

2 years ago

0.1.79

2 years ago

0.1.107

2 years ago

0.1.106

2 years ago

0.1.103

2 years ago

0.1.102

2 years ago

0.1.105

2 years ago

0.1.104

2 years ago

0.1.101

2 years ago

0.1.100

2 years ago

0.1.75

3 years ago

0.1.74

3 years ago

0.1.73

3 years ago

0.1.72

3 years ago

0.1.71

3 years ago

0.1.70

3 years ago

0.1.69

3 years ago

0.1.68

3 years ago

0.1.67

3 years ago

0.1.66

3 years ago

0.1.65

3 years ago

0.1.64

3 years ago

0.1.63

3 years ago

0.1.62

3 years ago

0.1.61

3 years ago

0.1.60

3 years ago

0.1.59

3 years ago

0.1.58

3 years ago

0.1.57

3 years ago

0.1.56

3 years ago

0.1.55

3 years ago

0.1.54

3 years ago

0.1.53

3 years ago

0.1.52

3 years ago

0.1.51

3 years ago

0.1.50

3 years ago

0.1.49

3 years ago

0.1.48

3 years ago

0.1.47

3 years ago

0.1.46

3 years ago

0.1.45

3 years ago

0.1.44

3 years ago

0.1.43

3 years ago

0.1.42

3 years ago

0.1.41

3 years ago

0.1.40

3 years ago

0.1.39

3 years ago

0.1.38

3 years ago

0.1.37

3 years ago

0.1.36

3 years ago

0.1.35

3 years ago

0.1.34

3 years ago

0.1.33

3 years ago

0.1.32

3 years ago

0.1.31

3 years ago

0.1.30

3 years ago

0.1.29

3 years ago

0.1.28

3 years ago

0.1.25

3 years ago

0.1.24

3 years ago

0.1.23

3 years ago

0.1.22

3 years ago

0.1.21

3 years ago

0.1.20

3 years ago

0.1.19

3 years ago

0.1.18

3 years ago

0.1.17

3 years ago

0.1.16

3 years ago

0.1.15

3 years ago

0.1.14

3 years ago

0.1.13

3 years ago

0.1.12

3 years ago

0.1.11

3 years ago

0.1.10

3 years ago

0.1.9

3 years ago

0.1.8

3 years ago

0.1.7

3 years ago

0.1.6

3 years ago

0.1.5

3 years ago

0.1.4

3 years ago

0.1.3

3 years ago

0.1.2

3 years ago

0.1.0

3 years ago