Axs UI
UI component primitives built with Axs
npm i axs-ui
// Example
import {
Heading,
Flex,
Button
} from 'axs-ui'
const Header = () => (
<Flex>
<Heading>Hello</Heading>
<Button>Go</Button>
</Flex>
)
Components
Heading
Heading element with level
prop for setting element type.
<Heading level={1}>Renders an h1 element</Heading>
Flex
Box component with display: flex
.
Uses array prop types for responsive styles.
<Flex
alignItems='center'
flexDirection={[
'column',
'row'
]}
justifyContent='space-between'
/>
Flex props
-
flexWrap
(string or array) - setsflex-wrap
-
flexDirection
(string or array) - setsflex-direction
-
alignItems
(string or array) - setsalign-items
-
justifyContent
(string or array) - setsjustify-content
-
flexAuto
(boolean or array) - setsflex: 1 1 auto
-
flexNone
(boolean or array) - setsflex: none
Button
<Button>Go</Button>
Label
<Label>Label</Label>
Input
<Input
name='input'
value='Hello'
onChange={onChange}
/>
Select
<Select
name='select'
value='Hello'
onChange={onChange}>
<option>Hello</option>
<option>Hi</option>
</Select>
Textarea
<Textarea
name='textarea'
value='Hello'
onChange={onChange}
/>
Radio
<label>
<Radio
name='radio'
checked={checked}
onClick={onClick}
/>
Radio
</label>
Checkbox
<label>
<Checkbox
name='checkbox'
checked={checked}
onClick={onClick}
/>
Checkbox
</label>
Slider
<Slider
name='slider'
value={32}
onChange={onChange}
/>
Progress
<Progress value={1/4}>
25%
</Progress>
InlineBlock
<InlineBlock width={1/4}>
InlineBlock
</InlineBlock>
Span
<Span blue>
Span
</Span>
- [ ] Link
- [ ] Pre
- [ ] Code
- [ ] Blockquote
- [ ] List
MIT License