Rebass Native

Rebass Native

Components

Table of Contents
## Flex Extends [Box](#box)
Flex
Box
<Flex
  mx={-3}
  flexWrap='wrap'>
  <Box width={[ 1, 1/2 ]} p={3} color='white' bg='blue'>
    Flex
  </Box>
  <Box width={[ 1, 1/2 ]} p={3} color='white' bg='violet'>
    Box
  </Box>
</Flex>

Props

  • flexWrap
  • flexDirection
  • alignItems
  • justifyContent

Box

Extends Box

Hello
<Box
  px={3}
  py={4}
  textProps={{color: 'white'}}
  bg='blue'>
  Hello
</Box>

Provider

undefined
undefined

Button

Extends Box

Hello
<Button
  children='Hello'
/>

Props

  • borderRadius
  • border
  • borderTop
  • borderRight
  • borderBottom
  • borderLeft
  • justifyContent

ButtonOutline

Extends Button

Hello
<ButtonOutline
  children='Hello'
/>

ButtonCircle

Extends Button

Hello
<ButtonCircle
  children='Hello'
/>

Props

  • borderRadius

ButtonTransparent

Extends Button

Hello
<ButtonTransparent textProps={{color: 'blue'}}>
  Hello
</ButtonTransparent>

Close

Extends ButtonTransparent

×
<Close />

Text

Extends Text

Hello
<Text
  textAlign='center'
  fontWeight='bold'
  children='Hello'
/>

Props

  • fontFamily
  • fontSize
  • fontWeight
  • textAlign

Heading

Extends Text

Hello
<Heading
  children='Hello'
/>

Props

  • fontSize
  • fontWeight
  • fontFamily
  • textAlign

Subhead

Extends Heading

Hello
<Subhead
  children='Hello'
/>

Props

  • fontSize

Caps

Extends Text

undefined
undefined

Props

  • fontSize
  • letterSpacing

Small

Extends Text

Hello
<Small
  children='Hello'
/>

Props

  • fontSize

Lead

Extends Text

Hello Lead
<Lead>
  Hello Lead
</Lead>

Props

  • fontSize

Truncate

Extends Text

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<Truncate>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</Truncate>

Blockquote

Extends Box

“The simplest scale is a single note, and sticking with a single note draws more attention to other parameters, such as rhythm and inflection.”
<Blockquote>
  “The simplest scale is a single note, and sticking with a single note draws more attention to other parameters, such as rhythm and inflection.”
</Blockquote>

Props

  • borderColor

Pre

const hello = 'Rebass'
<Pre
  children="const hello = 'Rebass'"
/>

Props

  • fontSize
  • fontFamily

Code

Extends Text

<Hello />
<Code
  children='<Hello />'
/>

Props

  • fontSize
  • fontFamily

Measure

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<Measure>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</Measure>

Props

  • maxWidth

Label

Extends Text

Hello Label
<Label>
  Hello Label
</Label>

Props

  • fontSize
  • alignItems

Divider

Extends Box

<Divider
  w={1}
  borderColor='blue'
/>

Props

  • borderColor

Border

Extends Box

Hello
<Border
  py={2}>
  Hello
</Border>

Props

  • borderColor
  • width

Image

Extends Image

<Image
  style={{
    height: '100px',
    width: '100px'
  }}
  source={{uri: 'https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=200'}}
/>

Props

  • width

Avatar

Extends Image

<Avatar
  size={32}
  source={{uri: 'https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=2048&q=20'}}
/>

Props

  • size
  • borderRadius

Container

Extends Box

Hello
<Container>
  Hello
</Container>

Props

  • maxWidth

Row

Extends Flex

Column
Column
<Row>
  <Column>Column</Column>
  <Column>Column</Column>
</Row>

Props

  • flexDirection

Column

Extends Box

Column
Column
Column
<Row>
  <Column>Column</Column>
  <Column>Column</Column>
  <Column>Column</Column>
</Row>

Props

  • flex

Card

Hello
<Card width={256}>
  <Image
    style={{width: '100%', height: '100px'}}
    source={{uri: 'https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=200'}}
  />
  <Subhead p={2}>
    Hello
  </Subhead>
</Card>

Props

  • borderRadius
  • boxShadow

Panel

Extends Box

Hello
Panel
Footer
<Panel color='blue'>
  <Panel.Header
    textProps={{color: 'white'}}
    bg='blue'>
    Hello
  </Panel.Header>
  <Box p={3}>
    <Subhead>
      Panel
    </Subhead>
  </Box>
  <Panel.Footer
    textProps={{color: 'blue'}}
  >
    Footer
  </Panel.Footer>
</Panel>

Props

  • borderRadius
  • border
  • borderTop
  • borderRight
  • borderBottom
  • borderLeft
  • borderColor

Progress

<Progress
  value={1/3}
/>

Props

  • width
  • borderRadius

Extends Flex

Hello
<Banner
  color='white'
  bg='black'>
  <Heading
    f={4}>
    Hello
  </Heading>
</Banner>

Props

  • flexDirection
  • alignItems
  • justifyContent
  • minHeight
  • backgroundSize
  • backgroundPosition
  • backgroundImage

Message

Hello
<Message>
  Hello
</Message>

Props

  • flexDirection
  • alignItems
  • minHeight

Tabs

Extends Flex

Beep
Boop
Bop
<Tabs>
  <Tab borderColor='blue'>
    Beep
  </Tab>
  <Tab>
    Boop
  </Tab>
  <Tab>
    Bop
  </Tab>
</Tabs>

Props

  • flexDirection
  • borderColor

Tab

Hello
<Tab borderColor='blue'>
  Hello
</Tab>

Props

  • borderColor

Badge

Extends Box

Hello
Beep
<Heading>
  Hello
  <Badge>
    Beep
  </Badge>
</Heading>

Props

  • borderRadius

Circle

Extends Badge

A
<Circle>
  A
</Circle>

Props

  • size
  • borderRadius
  • textAlign

Dot

<Flex>
  <Dot bg='black' />
  <Dot />
  <Dot />
</Flex>

Props

  • size
  • borderRadius
  • border
  • borderTop
  • borderRight
  • borderBottom
  • borderLeft
  • borderColor

Arrow

<Arrow direction='down' />

Position

Extends Box

Hello
<Position
  p={3}
  bg='green'
  position='relative'>
  Hello
</Position>

Props

  • zIndex
  • top
  • right
  • bottom
  • left

Absolute

Extends Position

Hello
<Relative minHeight={100}>
  <Absolute bottom={0} right={0}>
    Hello
  </Absolute>
</Relative>

Relative

Extends Position

undefined
undefined

Extends Absolute

{ false && (
  <Absolute
    top={0}
    right={0}
    bottom={0}
    left={0}
  >
    <Modal width={256}>
      <Heading>Hello</Heading>
    </Modal>
  </Absolute>
) }

Props

  • top
  • left
  • borderRadius
  • width
  • maxWidth
  • maxHeight

Drawer

Extends Box

Hello
<div>
  <Drawer
    open={false}
    side='right'
    p={3}
    color='white'
    bg='black'>
    <Heading>Hello</Heading>
  </Drawer>
</div>

Props

  • position
  • width
  • zIndex
  • height

Hide

Hide xsmall
Hide small
Hide medium
Hide large
Hide xlarge
<Hide p={2} bg='blue' xsmall>Hide xsmall</Hide>
<Hide p={2} bg='green' small>Hide small</Hide>
<Hide p={2} bg='yellow' medium>Hide medium</Hide>
<Hide p={2} bg='orange' large>Hide large</Hide>
<Hide p={2} bg='red' xlarge>Hide xlarge</Hide>
Previous:
Truncate
Next:
GitHub