@xooom/ui v1.1.9
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
- Choosing the right scale steps Radix 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
24 days ago
1 month ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
9 months ago
9 months ago
9 months ago
7 months ago
8 months ago
8 months ago
8 months ago
7 months ago
7 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 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
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years 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
1 year ago
2 years ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years 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
2 years ago
2 years ago
2 years 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
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago