1.1.13 • Published 5 months ago

@xooom/ui v1.1.13

Weekly downloads
-
License
UNLICENSED
Repository
-
Last release
5 months ago

A modern design system

Installation

yarn add @xooom/ui

Introduction

All our UI components use our built-in light theme by default. You can easily toggle our built-in dark theme or apply your own custom themes.

Documentation   •   Theme   •   Components

Example

import { theme, lightTheme, darkTheme } from '@xooom/ui'
import { Button, Text } from '@xooom/ui'

const customTheme = theme({ colors: { background: 'red' } })

function App() {
  const [selectedTheme, setSelectedTheme] = React.useState('light')
  const selectTheme = (name) => () => setSelectedTheme(name)
  return (
    <div className={getTheme(selectedTheme)}>
      <Button onClick={selectTheme('light')}>Light theme</Button>
      <Button onClick={selectTheme('dark')}>Dark theme</Button>
      <Button onClick={selectTheme('custom')}>Custom theme</Button>
    </div>
  )
}

function getTheme(selectedTheme) {
  if (selectedTheme === 'dark') return darkTheme
  if (selectedTheme === 'custom') return customTheme
  return lightTheme
}

Colors

Components

All our core components can be used without any customization. However, you are able to either extend core components or create your own custom components entirely.

Core components

import { Button } from '@xooom/ui'

function App() {
  return <Button>Button</Button>
}

Extended components

import { styled, Button } from '@xooom/ui'

const ExtendedButton = styled(Button, {
  backgroundColor: 'purple',
  color: 'white',
})

function App() {
  return <ExtendedButton>Extended Button</ExtendedButton>
}

Custom components

import { styled } from '@xooom/ui'

const CustomButton = styled('button', {
  appearance: 'none',
  border: 'none',

  variants: {
    color: {
      primary: {
        backgroundColor: 'purple',
        color: 'white',
      },
      secondary: {
        backgroundColor: 'pink',
        color: 'white',
      },
    },
  },

  defaultVariants: {
    color: 'primary',
  },
})

function App() {
  return (
    <div>
      <CustomButton>Custom Primary Button</CustomButton>
      <CustomButton color="primary">Custom Primary Button</CustomButton>
      <CustomButton color="secondary">Custom Secondary Button</CustomButton>
    </div>
  )
}

Attribution

@radix-ui/colors@radix-ui/react-accordion@radix-ui/react-alert-dialog@radix-ui/react-aspect-ratio@radix-ui/react-avatar@radix-ui/react-checkbox@radix-ui/react-collapsible@radix-ui/react-context-menu@radix-ui/react-dialog@radix-ui/react-dropdown-menu@radix-ui/react-hover-card@radix-ui/react-icons@radix-ui/react-id@radix-ui/react-label@radix-ui/react-navigation-menu@radix-ui/react-popover@radix-ui/react-progress@radix-ui/react-radio-group@radix-ui/react-scroll-area@radix-ui/react-select@radix-ui/react-separator@radix-ui/react-slider@radix-ui/react-switch@radix-ui/react-tabs@radix-ui/react-toast@radix-ui/react-toggle-group@radix-ui/react-tooltip@radix-ui/react-visually-hidden@stitches/reactautosizecmdksonner
@infinitebrahmanuniverse/nolb-_xo@everything-registry/sub-chunk-1032@zalastax/nolb-_xo
1.1.13

5 months ago

1.1.12

5 months ago

1.1.11

6 months ago

1.1.10

11 months ago

1.1.9

1 year ago

1.1.8

1 year ago

1.1.7

1 year ago

1.1.6

1 year ago

1.1.5

1 year ago

1.1.4

1 year ago

1.1.3

1 year ago

1.1.2

1 year ago

1.0.109

1 year ago

1.0.110

1 year ago

1.0.111

1 year ago

1.0.108

1 year ago

1.0.84

2 years ago

1.0.88

2 years ago

1.0.87

2 years ago

1.0.86

2 years ago

1.0.85

2 years ago

1.0.89

2 years ago

1.0.91

2 years ago

1.0.90

2 years ago

1.0.94

2 years ago

1.0.92

2 years ago

1.0.99

2 years ago

1.0.98

2 years ago

1.0.97

2 years ago

1.0.96

2 years ago

1.0.101

2 years ago

1.0.100

2 years ago

1.0.107

2 years ago

1.0.106

2 years ago

1.0.103

2 years ago

1.0.102

2 years ago

1.0.105

2 years ago

1.0.104

2 years ago

1.0.80

2 years ago

1.0.83

2 years ago

1.0.82

2 years ago

1.0.81

2 years ago

1.0.66

2 years ago

1.0.65

2 years ago

1.0.64

2 years ago

1.0.69

2 years ago

1.0.68

2 years ago

1.0.67

2 years ago

1.0.73

2 years ago

1.0.70

2 years ago

1.0.77

2 years ago

1.0.76

2 years ago

1.0.75

2 years ago

1.0.74

2 years ago

1.0.79

2 years ago

1.0.78

2 years ago

1.0.62

2 years ago

1.0.60

2 years ago

1.0.48

2 years ago

1.0.47

2 years ago

1.0.49

2 years ago

1.0.51

2 years ago

1.0.50

2 years ago

1.0.55

2 years ago

1.0.54

2 years ago

1.0.53

2 years ago

1.0.52

2 years ago

1.0.59

2 years ago

1.0.58

2 years ago

1.0.57

2 years ago

1.0.56

2 years ago

0.3.79

3 years ago

0.3.97

3 years ago

0.3.96

3 years ago

0.3.95

3 years ago

0.3.94

3 years ago

0.3.93

3 years ago

0.3.92

3 years ago

0.3.91

3 years ago

0.3.90

3 years ago

0.3.99

3 years ago

0.3.98

3 years ago

0.3.85

3 years ago

0.3.84

3 years ago

0.3.83

3 years ago

0.3.82

3 years ago

0.3.81

3 years ago

0.3.80

3 years ago

0.3.89

3 years ago

0.3.88

3 years ago

0.3.87

3 years ago

0.3.101

3 years ago

0.3.100

3 years ago

0.3.102

3 years ago

0.3.105

3 years ago

0.3.104

3 years ago

0.3.107

3 years ago

1.0.39

2 years ago

1.0.38

2 years ago

1.0.40

2 years ago

1.0.44

2 years ago

1.0.43

2 years ago

1.0.42

2 years ago

1.0.41

2 years ago

1.0.46

2 years ago

1.0.2

3 years ago

1.0.18

3 years ago

1.0.1

3 years ago

1.0.17

3 years ago

1.0.16

3 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.3

3 years ago

1.0.22

3 years ago

1.0.21

3 years ago

1.0.20

3 years ago

1.0.25

3 years ago

1.0.24

3 years ago

1.0.23

3 years ago

1.0.29

3 years ago

1.0.28

3 years ago

1.0.27

3 years ago

0.3.132

3 years ago

0.3.134

3 years ago

0.3.133

3 years ago

0.3.136

3 years ago

0.3.135

3 years ago

1.0.33

3 years ago

1.0.32

3 years ago

1.0.31

3 years ago

1.0.30

3 years ago

1.0.37

2 years ago

1.0.36

2 years ago

1.0.34

3 years ago

0.3.121

3 years ago

0.3.120

3 years ago

0.3.122

3 years ago

0.3.125

3 years ago

0.3.127

3 years ago

0.3.126

3 years ago

0.3.129

3 years ago

0.3.128

3 years ago

0.3.119

3 years ago

0.3.110

3 years ago

0.3.112

3 years ago

0.3.111

3 years ago

0.3.115

3 years ago

0.3.118

3 years ago

0.3.117

3 years ago

1.0.11

3 years ago

1.0.10

3 years ago

1.0.15

3 years ago

1.0.14

3 years ago

1.0.13

3 years ago

0.3.75

3 years ago

0.3.73

3 years ago

0.3.72

3 years ago

0.3.71

3 years ago

0.3.78

3 years ago

0.3.77

3 years ago

0.3.76

3 years ago

0.3.64

3 years ago

0.3.69

3 years ago

0.3.68

3 years ago

0.3.67

3 years ago

0.3.66

3 years ago

0.3.65

3 years ago

0.3.53

3 years ago

0.3.51

3 years ago

0.3.42-alpha.0

4 years ago

0.3.59

3 years ago

0.3.58

3 years ago

0.3.57

3 years ago

0.3.56

3 years ago

0.3.54

3 years ago

0.3.41

4 years ago

0.3.40

4 years ago

0.3.49

3 years ago

0.3.48

4 years ago

0.3.47

4 years ago

0.3.46

4 years ago

0.3.44

4 years ago

0.3.43

4 years ago

0.3.39

4 years ago

0.3.38

4 years ago

0.3.37

4 years ago

0.3.36

4 years ago

0.3.35

4 years ago

0.3.34

4 years ago

0.3.46-patch.2

4 years ago

0.3.46-patch.3

4 years ago

0.3.31

4 years ago

0.3.30

4 years ago

0.3.32

4 years ago

0.3.26

4 years ago

0.3.25

4 years ago

0.3.24

4 years ago

0.3.23

4 years ago

0.3.22

4 years ago

0.3.6-0

4 years ago

0.3.14-0

4 years ago

0.3.12-0

4 years ago

0.3.20

4 years ago

0.3.18-0

4 years ago

0.3.16-0

4 years ago

0.3.21

4 years ago

0.3.4-0

4 years ago

0.3.19

4 years ago

0.3.6

4 years ago

0.3.5

4 years ago

0.3.8

4 years ago

0.3.7

4 years ago

0.3.4

4 years ago

0.3.9

4 years ago

0.3.11

4 years ago

0.3.10

4 years ago

0.3.7-0

4 years ago

0.3.13-0

4 years ago

0.3.17-0

4 years ago

0.3.15-0

4 years ago

0.3.19-0

4 years ago

0.3.5-0

4 years ago

0.3.3

4 years ago

0.3.0

4 years ago

0.1.7

4 years ago

0.3.2

4 years ago

0.3.1

4 years ago

0.1.6

4 years ago

0.2.1

4 years ago

0.2.0

4 years ago

0.1.2

4 years ago

0.1.1

4 years ago

0.1.4

4 years ago

0.1.3

4 years ago

0.1.5

4 years ago

0.1.0

4 years ago

0.0.1-alpha.61

4 years ago

0.0.1-alpha.60

4 years ago

0.0.1-alpha.62

4 years ago

0.0.1-alpha.58

4 years ago

0.0.1-alpha.59

4 years ago

0.0.1-alpha.56

4 years ago

0.0.1-alpha.57

4 years ago

0.0.1-alpha.55

4 years ago

0.0.1-alpha.52

4 years ago

0.0.1-alpha.54

4 years ago

0.0.1-alpha.53

4 years ago

0.0.1-alpha.50

4 years ago

0.0.1-alpha.51

4 years ago

0.0.1-alpha.49

4 years ago

0.0.1-alpha.48

4 years ago

0.0.1-alpha.47

4 years ago

0.0.1-alpha.45

4 years ago

0.0.1-alpha.46

4 years ago

0.0.1-alpha.44

4 years ago

0.0.1-alpha.41

4 years ago

0.0.1-alpha.40

4 years ago

0.0.1-alpha.43

4 years ago

0.0.1-alpha.42

4 years ago

0.0.1-alpha.38

4 years ago

0.0.1-alpha.39

4 years ago

0.0.1-alpha.34

4 years ago

0.0.1-alpha.33

4 years ago

0.0.1-alpha.36

4 years ago

0.0.1-alpha.35

4 years ago

0.0.1-alpha.37

4 years ago

0.0.1-alpha.32

4 years ago

0.0.1-alpha.30

4 years ago

0.0.1-alpha.31

4 years ago

0.0.1-alpha.29

4 years ago

0.0.1-alpha.28

4 years ago

0.0.1-alpha.27

4 years ago

0.0.1-alpha.25

4 years ago

0.0.1-alpha.26

4 years ago

0.0.1-alpha.24

4 years ago

0.0.1-alpha.23

4 years ago

0.0.1-alpha.22

4 years ago

0.0.1-alpha.21

4 years ago

0.0.1-alpha.20

4 years ago

0.0.1-alpha.19

4 years ago

0.0.1-alpha.18

4 years ago

0.0.1-alpha.17

4 years ago

0.0.1-alpha.16

4 years ago

0.0.1-alpha.15

4 years ago

0.0.1-alpha.14

4 years ago

0.0.1-alpha.13

4 years ago

0.0.1-alpha.12

4 years ago

0.0.1-alpha.11

4 years ago

0.0.1-alpha.10

4 years ago

0.0.1-alpha.9

4 years ago

0.0.1-alpha.8

4 years ago

0.0.1-alpha.7

4 years ago

0.0.1-alpha.6

4 years ago