styled-primitives

React UI component primitives built with styled-components

npm i styled-primitives

import React from 'react'
import { Heading, Text } from 'styled-primitives'

const App = props => (
  <div>
    <Heading>Hello</Heading>
    <Text>Styled Primitives</Text>
  </div>
)

Components

<Text />

<Text>Hello</Text>

<Text bold>Hello</Text>

<Text size={4}>Hello</Text>

<Text align='center'>Hello</Text>

<Heading />

<Heading>Hello</Heading>

<Heading size={8}>Hello</Heading>

<Heading align='center'>Hello</Heading>

<Heading.h1>Hello</Heading.h1>

<Color />

<Color color='tomato'>Hello</Color>

<Color backgroundColor='tomato'>Hello</Color>

<Color rounded backgroundColor='tomato'>Hello</Color>

<Border />

<Border color='tomato' />

<Border top color='tomato' />
<Border right color='tomato' />
<Border bottom color='tomato' />
<Border left color='tomato' />

<Border rounded color='tomato' />

<Border rounded={6} color='tomato' />

<Shadow />

<Shadow
  x={0}
  y={2}
  blur={4}
  spread={1}
  color='rgba(0, 0, 0, .25)'
/>

<Label />

<Label size={1}>Label</Label>

<Input />

<Input
  value={value}
  onChange={onChange}
/>

<Select />

<Select
  value={value}
  onChange={onChange}
>
  <option>Hello</option>
  <option>Goodbye</option>
</Select>

<Textarea />

<Textarea defaultValue='Hello' />

<Slider />

<Slider defaultValue={25} />

• [ ] <Gradient />

• [ ] <Radio />

• [ ] <Checkbox />

• [ ] <Progress />

Related

• styled-components
• grid-styled

MIT License