styled-primitives

    1.0.0-2 • Public • Published

    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

    MIT License

    Keywords

    none

    Install

    npm i styled-primitives

    DownloadsWeekly Downloads

    3

    Version

    1.0.0-2

    License

    MIT

    Last publish

    Collaborators

    • jxnblk