Styled Starter
UI Components

Styled Starter UI Components

Introduction

Welcome to the component library for your digital product. It is here you can write UI documentation for the components in your codebase.

Use Styled System primitives as building blocks for your own React Components or from an existing library.

Note: All component code samples within the style guide are editable -- thanks React Live.

Styled Starter UI Components

Buttons

Buttons

edit me

<Button>Base Button</Button>

edit me

<Button bg="blue">Blue Button</Button>

edit me

<Button bg="green">Green Button</Button>

edit me

<Button bg="orange">Orange Button</Button>

edit me

<Button bg="red">Red Button</Button>

edit me

<Button bg="yellow">Yellow Button</Button>

edit me

<Button bg="navy">Navy Button</Button>

edit me

<Button bg="pink">Pink Button</Button>

edit me

<Button bg="purple">Purple Button</Button>

edit me

<ButtonOutline color="blue">Outline Blue</ButtonOutline>

edit me

<ButtonOutline color="green">Outline Green</ButtonOutline>

edit me

<ButtonOutline color="orange">Outline Orange</ButtonOutline>

edit me

<ButtonOutline color="red">Outline Red</ButtonOutline>

edit me

<ButtonOutline color="yellow">Outline Yellow</ButtonOutline>

edit me

<ButtonOutline color="navy">Outline Navy</ButtonOutline>

edit me

<ButtonOutline color="pink">Outline Pink</ButtonOutline>

edit me

<ButtonOutline color="purple">Outline Purple</ButtonOutline>

edit me

<Button bg="gray" disabled>Disabled</Button>

edit me

<ButtonSmall>Small Button</ButtonSmall>

edit me

<ButtonLarge>Large Button</ButtonLarge>

Styled Starter UI Components

Cards

Cards

With image

edit me

<Card 
  title="Card Title" 
  imageSrc="https://unsplash.it/g/320/180" 
  imageAlt="A placeholder image from Unsplash">
  <Text>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit sed.
  </Text>
  <Div align="right" pt={4} pr={2} pb={2}>
    <Button>Find out more</Button>
  </Div>
</Card>
A placeholder image from Unsplash

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed.

No image

edit me

<Card title="Card Title">
  <Text>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit sed
    vivamus risus metus vero integer imperdiet aenean dolor. 
  </Text>
  <Div align="right" pt={4} pr={2} pb={2}>
    <Button>Find out more</Button>
  </Div>
</Card>

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed vivamus risus metus vero integer imperdiet aenean dolor.

Colors

edit me

<Card color="blue" title="Card Title">
  <Text>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit sed
    vivamus risus metus vero integer imperdiet aenean dolor. 
  </Text>
  <Div align="right" pt={4} pr={2} pb={2}>
    <Button bg="blue">Find out more</Button>
  </Div>
</Card>

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed vivamus risus metus vero integer imperdiet aenean dolor.

edit me

<Card color="green" title="Card Title">
  <Text>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit sed
    vivamus risus metus vero integer imperdiet aenean dolor. 
  </Text>
  <Div align="right" pt={4} pr={2} pb={2}>
    <Button bg="green">Find out more</Button>
  </Div>
</Card>

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed vivamus risus metus vero integer imperdiet aenean dolor.

edit me

<Card color="orange" title="Card Title">
  <Text>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit sed
    vivamus risus metus vero integer imperdiet aenean dolor. 
  </Text>
  <Div align="right" pt={4} pr={2} pb={2}>
    <Button bg="orange">Find out more</Button>
  </Div>
</Card>

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed vivamus risus metus vero integer imperdiet aenean dolor.

edit me

<Card color="red" title="Card Title">
  <Text>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit sed
    vivamus risus metus vero integer imperdiet aenean dolor. 
  </Text>
  <Div align="right" pt={4} pr={2} pb={2}>
    <Button bg="red">Find out more</Button>
  </Div>
</Card>

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed vivamus risus metus vero integer imperdiet aenean dolor.

edit me

<Card color="yellow" title="Card Title">
  <Text>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit sed
    vivamus risus metus vero integer imperdiet aenean dolor. 
  </Text>
  <Div align="right" pt={4} pr={2} pb={2}>
    <Button bg="yellow">Find out more</Button>
  </Div>
</Card>

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed vivamus risus metus vero integer imperdiet aenean dolor.

edit me

<Card color="navy" title="Card Title">
  <Text>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit sed
    vivamus risus metus vero integer imperdiet aenean dolor. 
  </Text>
  <Div align="right" pt={4} pr={2} pb={2}>
    <Button bg="navy">Find out more</Button>
  </Div>
</Card>

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed vivamus risus metus vero integer imperdiet aenean dolor.

edit me

<Card color="pink" title="Card Title">
  <Text>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit sed
    vivamus risus metus vero integer imperdiet aenean dolor. 
  </Text>
  <Div align="right" pt={4} pr={2} pb={2}>
    <Button bg="pink">Find out more</Button>
  </Div>
</Card>

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed vivamus risus metus vero integer imperdiet aenean dolor.

edit me

<Card color="purple" title="Card Title">
  <Text>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit sed
    vivamus risus metus vero integer imperdiet aenean dolor. 
  </Text>
  <Div align="right" pt={4} pr={2} pb={2}>
    <Button bg="purple">Find out more</Button>
  </Div>
</Card>

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed vivamus risus metus vero integer imperdiet aenean dolor.

Styled Starter UI Components

Forms

Stacked Form

edit me

<Form pt={2} pb={5}>
  <Div pb={3}>
    <Div pb={1}>
      <Label htmlFor="textInput">Text Input Label</Label>
    </Div>
    <Input type="text" name="textInput" id="textInput" />
  </Div>
  <Div pb={3}>
    <Div pb={1}>
      <Label htmlFor="select" mr={2}>Select Label</Label>
    </Div>
    <Select value="" name="select" id="select">
      <option value="">Please select..</option>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </Select>
  </Div>
  <Div pb={3}>
    <Div pb={1}>
      <Label htmlFor="textArea">Text Area Label</Label>
    </Div>
    <TextArea width={1} name="textArea" id="textArea" />
  </Div>
  <Div pb={3}>
    <Div pb={2}>
      <Legend mr={2}>Radio Buttons</Legend>
    </Div>
    <Div width={1}>
      <Label htmlFor="radio1" mr={3}>
        <Input type="radio" name="radio" id="radio1" />
        <Span px={1}>Radio 1</Span>
      </Label>
      <Label htmlFor="radio2" mr={3}>
        <Input type="radio" name="radio" id="radio2" />
        <Span px={1}>Radio 2</Span>
      </Label>
      <Label htmlFor="radio3" mr={3}>
        <Input type="radio" name="radio" id="radio3" />
        <Span px={1}>Radio 3</Span>
      </Label>
    </Div>
  </Div>
  <Div py={3}>
    <Label htmlFor="checkbox" mr={2}>
      <Input type="checkbox" name="check" id="check" /> 
    Checkbox Input Label
    </Label>
  </Div>
  <Div py={3}>
    <InputSubmit bg="base" type="submit" value="Submit" />
  </Div>
</Form>
Radio Buttons

Responsive Inline Form

edit me

<Form pt={2} pb={5}>
  <Flex alignItems="flex-start" flexWrap="wrap" pb={3}>
    <Box width={[1,1/3]} py={1}>
      <Label textAlign={['left','right']} htmlFor="textInput" mr={2}>Text Input</Label>
    </Box>
    <Box width={[1,2/3]}>
      <Input type="text" name="textInput" id="textInput" />
    </Box>
  </Flex>
  <Flex alignItems="flex-start" flexWrap="wrap" pb={3}>
    <Box width={[1,1/3]} py={1} textAlign={['left','right']}>
      <Label htmlFor="select" mr={2}>Select</Label>
    </Box>
    <Box width={[1,2/3]}>
      <Select value="" name="select" id="select">
        <option value="">Please select..</option>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
      </Select>
    </Box>
  </Flex>
  <Flex alignItems="flex-start" flexWrap="wrap" pb={3}>
    <Box width={[1,1/3]} py={1} textAlign={['left','right']}>
      <Label htmlFor="textArea" mr={2}>Text Area</Label>
    </Box>
    <Box width={[1,2/3]}>
      <TextArea width={1} name="textArea" id="textArea" />
    </Box>
  </Flex>
  <Flex alignItems="flex-start" flexWrap="wrap" pb={3}>
    <Box width={[1,1/3]} py={1} textAlign={['left','right']}>
      <Legend mr={2}>Radio Buttons</Legend>
    </Box>
    <Box width={[1,2/3]}>
      <Label htmlFor="radio1" mr={3}>
        <Input type="radio" name="radio" id="radio1" /> 
        Radio 1
        </Label>
      <Label htmlFor="radio2" mr={3}>
        <Input type="radio" name="radio" id="radio2" /> 
        Radio 2
      </Label>
      <Label htmlFor="radio3" mr={3}>
        <Input type="radio" name="radio" id="radio3" /> 
        Radio 3
      </Label>
    </Box>
  </Flex>
  <Flex alignItems="flex-start" flexWrap="wrap" pb={3}>
    <Box ml={[0,'33.33%']} width={[1]}>
      <Label htmlFor="checkbox" mr={2}>
        <Input type="checkbox" name="check" id="check" /> 
        Checkbox Input
    </Label>
    </Box>
  </Flex>
  <Flex alignItems="flex-start" flexWrap="wrap" py={3}>
    <Box ml={[0,'33.33%']} width={[1]}>
      <InputSubmit bg="base" type="submit" value="Submit" />
    </Box>
  </Flex>
</Form>
Radio Buttons

Styled Starter UI Components

Libraries

In addition to your own components, you can use components from other Styled System compatible libraries.

For example, a Panel component from Rebass:

edit me

<Panel color='base'>
    <PanelHeader p={3} color='white' bg='base'>
        Hello
    </PanelHeader>
    <Div px={3} py={4}>
        <Subhead>Panel</Subhead>
    </Div>
    <PanelFooter p={3} color='base'>Footer</PanelFooter>
</Panel>
Hello

Panel