axs-ui v1.0.4

Axs UI

UI component primitives built with Axs

http://jxnblk.com/axs/ui

npm i axs-ui

// Example
import {
  Heading,
  Flex,
  Button
} from 'axs-ui'

const Header = () => (
  <Flex>
    <Heading>Hello</Heading>
    <Button>Go</Button>
  </Flex>
)

Components

• Heading
• Flex
• Button
• Label
• Input
• Select
• Textarea
• Radio
• Checkbox
• Slider
• Progress
• InlineBlock
• Span

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) - sets flex-wrap
• flexDirection (string or array) - sets flex-direction
• alignItems (string or array) - sets align-items
• justifyContent (string or array) - sets justify-content
• flexAuto (boolean or array) - sets flex: 1 1 auto
• flexNone (boolean or array) - sets flex: 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