Extending

Rebass components are great to use as base components that can be extended for various purposes in your design system.

Container

const Container = props =>
  <Box
    {...props}
    mx='auto'
    css={{
      maxWidth: '1024px'
    }}
  />

Badge

const Badge = props =>
  <Card
    color='white'
    bg='blue'
    {...props}
    px={3}
    py={1}
    borderRadius={9999}
    css={{
      display: 'inline-block'
    }}
  />
Badge
<Card
  color='white'
  bg='blue'
  px={3}
  py={1}
  borderRadius={9999}
  fontSize={0}
  css={{
    display: 'inline-block',
    textTransform: 'uppercase',
    letterSpacing: '.2em'
  }}>
  Badge
</Card>

Avatar

const Avatar = props =>
  <Image
    width={48}
    height={48}
    borderRadius={9999}
    {...props}
  />
const BlockLink = props =>
  <Link
    color='inherit'
    {...props}
    css={{
      display: 'block',
      textDecoration: 'none'
    }}
  />
const NavLink = props =>
  <Link
    px={2}
    py={1}
    color='inherit'
    {...props}
    css={{
      display: 'block',
      fontWeight: 'bold',
    }}
  />

Embed

const Embed = props =>
  <Box
    {...props}
    width={1}
    css={{
      height: 0,
      paddingBottom: (9 / 16) + '%',
      position: 'relative',
      overflow: 'hidden',
      '& > iframe': {
        position: 'absolute',
        width: '100%',
        height: '100%',
        top: 0,
        bottom: 0,
        left: 0,
        border: 0
      }
    }}
  />

Pre

const Pre = props =>
  <Text
    {...props}
    is='pre'
    fontFamily='Menlo, monospace'
    p={2}
    bg='lightgray'
  />

Fixed

const Fixed = props =>
  <Box
    {...props}
    css={{
      position: 'fixed'
    }}
  />

Divider

const Divider = props =>
  <Box
    {...props}
    is='hr'
    bg='gray'
    css={{
      border: 0,
      height: 1
    }}
  />

Caps

const Caps = props =>
  <Text
    fontSize={1}
    {...props}
    css={{
      textTransform: 'uppercase',
      letterSpacing: '0.2em'
    }}
  />

Toolbar

const Toolbar = props =>
  <Flex
    px={2}
    color='white'
    bg='black'
    alignItems='center'
    {...props}
  />