RebassDemo
GitHubnpm

Rebass is a React UI component library that uses inline styles to avoid CSS dependencies and prevent leaky global styles from affecting an application. Rebass components inherit styles where appropriate and can be customized using React Context. Rebass components are built as stateless functional components and modeled as presentational components. With unit tests for each component, Rebass is great for prototyping and ready for production.

View the demo or read the component documentation below to get started.

Note: this page is statically rendered and does not have client-side JavaScript. To see interactive examples, View the demo.

npm i rebass

Arrow for use in dropdowns and other UI elements

Example
<Button
  backgroundColor="primary"
  color="white"
  inverted
  rounded
>
  Arrow
  <Arrow direction="down" />
</Button>
PropTypeDescription
direction ('down')oneOf(['up', 'down'])Direction of arrow

A circular image for displaying user avatars

Example
<Avatar
  circle
  size={48}
  src="http://lorempixel.com/64/64/cats"
/>
PropTypeDescription
size (48)numberWidth and height of image in pixels

Component for displaying small status indicators

Example

Rebass

0.2.0

Pill

Pill

Circular

4
<Flex align="center">
  <Heading level={4}>
    Rebass
  </Heading>
  <Space x={1} />
  <Badge
    rounded
    theme="info"
  >
    0.2.0
  </Badge>
  <Space x={2} />
  <Heading level={4}>
    Pill
  </Heading>
  <Space x={1} />
  <Badge
    pill
    rounded
    theme="info"
  >
    Pill
  </Badge>
  <Space x={2} />
  <Heading level={4}>
    Circular
  </Heading>
  <Space x={1} />
  <Badge
    circle
    rounded
    theme="error"
  >
    4
  </Badge>
</Flex>
PropTypeDescription
theme ('default')oneOf(['primary', 'secondary', 'default', 'info', 'success', 'warning', 'error'])Sets color based on theme
rounded (true)oneOfType([bool, oneOf(['top', 'right', 'bottom', 'left'])])Controls border radius
pillboolSets pill style border radii
circleboolSets width and border radius for circular badges

Generic box with visual styling

Example

Block

Generic box for containing things

<Block
  borderLeft
  color="blue"
  px={2}
>
  <Media img="http://placehold.it/128/08e/fff">
    <Heading
      level={2}
      size={0}
    >
      Block
    </Heading>
    <Text>
      Generic box for containing things
    </Text>
  </Media>
</Block>
PropTypeDescription
colorstringText color - can either be a key from the config colors object or any color value
backgroundColorstringBackground color - can either be a key from the config colors object or any color value
borderColorstringBorder color - can either be a key from the config colors object or any color value
borderboolAdds a border
borderTopboolAdds a border to the top side
borderRightboolAdds a border to the right side
borderBottomboolAdds a border to the bottom side
borderLeftboolAdds a border to the left side
moneOf([0, 1, 2, 3, 4])Applies margin with the margin utility based on the spacing scale
mtoneOf([0, 1, 2, 3, 4])Applies margin top based on the spacing scale
mroneOf([0, 1, 2, 3, 4])Applies margin right based on the spacing scale
mboneOf([0, 1, 2, 3, 4])Applies margin bottom based on the spacing scale
mloneOf([0, 1, 2, 3, 4])Applies margin left based on the spacing scale
mxoneOf([0, 1, 2, 3, 4])Applies margin left and right based on the spacing scale
myoneOf([0, 1, 2, 3, 4])Applies margin top and bottom based on the spacing scale
poneOf([0, 1, 2, 3, 4])Applies padding with the padding utility based on the spacing scale
ptoneOf([0, 1, 2, 3, 4])Applies padding top based on the spacing scale
proneOf([0, 1, 2, 3, 4])Applies padding right based on the spacing scale
pboneOf([0, 1, 2, 3, 4])Applies padding bottom based on the spacing scale
ploneOf([0, 1, 2, 3, 4])Applies padding left based on the spacing scale
pxoneOf([0, 1, 2, 3, 4])Applies padding left and right based on the spacing scale
pyoneOf([0, 1, 2, 3, 4])Applies padding top and bottom based on the spacing scale
roundedoneOfType([bool, oneOf(['top', 'right', 'bottom', 'left'])])Controls border radius

Stylized blockquote element with citation link

Example

In the sixteenth century, a series of common sizes developed among European typographers, and the series survived with little change and few additions for 400 years. […] Use the old familiar scale, or use new scales of your own devising, but limit yourself, at first, to a modest set of distinct and related intervals.

Robert Bringhurst
<Blockquote
  href="http://webtypography.net/3.1.1"
  source="Robert Bringhurst"
>
  In the sixteenth century, a series of common sizes developed among European typographers, and the series survived with little change and few additions for 400 years. […] Use the old familiar scale, or use new scales of your own devising, but limit yourself, at first, to a modest set of distinct and related intervals.
</Blockquote>
PropTypeDescription
sourcestringName of source
hrefstringURL link to source

A general purpose button element with customizable colors

Example
<div>
  <Button
    backgroundColor="primary"
    color="white"
    inverted
    rounded
  >
    Button
  </Button>
</div>
PropTypeDescription
hrefstringPass an href prop to make the Button an <a> tag instead of a <button>
color ('white')stringButton color - can either be a key from the config colors object or any color value
backgroundColor ('primary')stringBackground color - can either be a key from the config colors object or any color value
rounded (true)oneOfType([bool, oneOf(['top', 'right', 'bottom', 'left'])])Controls the border radius for creating button groups
pillboolCreates a pill style button
bigboolCreates a larger button
themeoneOf(['primary', 'secondary', 'default', 'info', 'success', 'warning', 'error'])Sets color from config

A circular button suited for use with icons

Example

Example Icon component from react-geomicons

<Flex
  align="center"
  justify="space-between"
  wrap
>
  <ButtonCircle title="Like">
    <Icon
      fill="currentColor"
      height="1em"
      name="heart"
      width="1em"
    />
  </ButtonCircle>
  <ButtonCircle title="Comment">
    <Icon
      fill="currentColor"
      height="1em"
      name="chat"
      width="1em"
    />
  </ButtonCircle>
  <ButtonCircle title="Repost">
    <Icon
      fill="currentColor"
      height="1em"
      name="repost"
      width="1em"
    />
  </ButtonCircle>
  <ButtonCircle title="Bookmark">
    <Icon
      fill="currentColor"
      height="1em"
      name="bookmark"
      width="1em"
    />
  </ButtonCircle>
  <ButtonCircle title="Tag">
    <Icon
      fill="currentColor"
      height="1em"
      name="tag"
      width="1em"
    />
  </ButtonCircle>
  <Text small>
    Example Icon component from react-geomicons
  </Text>
</Flex>
PropTypeDescription
hrefstringPass an href prop to make the ButtonCircle an <a> tag instead of a <button>
colorstringText color - can either be a key from the config colors object or any color value
backgroundColorstringBackground color - can either be a key from the config colors object or any color value
sizenumberSets width and height of button

A general purpose outline style button element with customizable colors

Example
<div>
  <ButtonOutline
    color="primary"
    rounded="left"
  >
    Button
  </ButtonOutline>
  <ButtonOutline
    color="primary"
    style={{marginLeft: -1}}
  >
    Group
  </ButtonOutline>
  <Button
    backgroundColor="primary"
    color="white"
    inverted
    rounded="right"
    style={{marginLeft: -1}}
  >
    Button
  </Button>
</div>
PropTypeDescription
hrefstringPass an href prop to make the ButtonOutline an <a> tag instead of a <button>
color ('primary')stringText color
rounded (true)oneOfType([bool, oneOf(['top', 'right', 'bottom', 'left'])])Controls the border radius for creating button groups
pillboolCreates a pill style button
bigboolCreates a larger button

Styled box with border

Example

Card

Cats like cards too

<Card
  rounded
  width={256}
>
  <CardImage src="http://placehold.it/320/08e/fff" />
  <Heading
    level={2}
    size={3}
  >
    Card
  </Heading>
  <Text>
    Cats like cards too
  </Text>
</Card>
PropTypeDescription
widthoneOfType([number, string])Width of card

Image for use within the Card component

Example
<div style={{maxWidth: 192}}>
  <CardImage src="http://placehold.it/320/08e/fff" />
</div>
PropTypeDescription
src*stringImage source

Checkbox input with label

Example
<div>
  <Checkbox
    label="Checkbox"
    name="checkbox_1"
  />
  <Checkbox
    checked
    label="Checkbox"
    name="checkbox_1"
    readOnly
    theme="success"
  />
</div>
PropTypeDescription
label*stringLabel for form element
name*stringName attribute for form element

A button with an × for close and dismiss actions

Example
<Close />

Div with max-width and margin auto for centering content

Example
Container
<Container>
  Container
</Container>

Styled hr element

Example


<div>
  <Divider />
  <Divider
    ml={0}
    width={128}
  />
</div>
PropTypeDescription
widthnumberSets a fixed width for stylistic options

A single-value donut chart with percentage

Example
56%
9/16
63%
13%
<Flex
  align="center"
  justify="space-between"
  wrap
>
  <Donut
    color="primary"
    size={256}
    strokeWidth={32}
    value={0.5625}
  />
  <Donut
    color="primary"
    size={128}
    strokeWidth={8}
    value={0.5625}
  >
    9/16
  </Donut>
  <Donut
    color="primary"
    size={128}
    strokeWidth={8}
    value={0.625}
  />
  <Donut
    color="primary"
    size={128}
    strokeWidth={8}
    value={0.125}
  />
</Flex>
PropTypeDescription
value (0)numberValue from 0 to 1
size (128)numberSets width and height
strokeWidth (8)numberSets width of stroke
color ('primary')stringText color - can either be a key from the config colors object or any color value

Dot indicator buttons for use in carousels

Example
<div>
  <DotIndicator
    active={0}
    length={3}
    onClick={function noRefCheck() {}}
  />
</div>
PropTypeDescription
lengthnumberNumber of dot buttons to show
activenumberIndex of the currently active dot
onClick (function () {})funcClick event callback - returns index of clicked button

An off-canvas drawer component

Example
See demo
<a href="demo">
  See demo
</a>
PropTypeDescription
size (320)numberWidth or height of drawer, depending on placement
open (false)boolShows and hides the drawer
position ('left')oneOf(['top', 'right', 'bottom', 'left'])Position relative to the viewport
onDismiss (function () {})funcClick event callback for the background overlay

Responsive media embed wrapper

Example
<Embed ratio={0.5625}>
  <iframe
    allowFullScreen
    src="https://www.youtube.com/embed/KO_3Qgib6RQ"
  />
</Embed>
PropTypeDescription
ratio (9 / 16)numberAspect ratio for the embed. Divide height over width to calculate. E.g. ratio={9/16}

Layout container for fixed positioning children

Example
See demo
<a href="demo">
  See demo
</a>
PropTypeDescription
topboolSets top: 0
rightboolSets right: 0
bottomboolSets bottom: 0
leftboolSets left: 0
zIndexnumberSets z-index

Heading element with no margin and size based on fontSizes scale

Example

Heading

<Heading level={2}>
  Heading
</Heading>
PropTypeDescription
bigboolDoubles the visual size - useful for marketing pages
level (2)oneOf([1, 2, 3, 4, 5, 6])Heading level, e.g. level={1} for <h1>
sizeoneOf([0, 1, 2, 3, 4, 5, 6])Visual size of heading
altboolApplies alternate styling - useful for slugs and subheadings

Inline grouped form for search or other simple forms

Example
<InlineForm
  buttonLabel="Go"
  label="InlineForm"
  name="inline_form"
  onChange={function noRefCheck() {}}
  onClick={function noRefCheck() {}}
/>
PropTypeDescription
label*stringInput label
name*stringInput name
valueoneOfType([number, string])Input value
placeholderstringInput placeholder
onChange (() => {})funconChange handler for input
buttonLabel ('Go')stringText for button
onClick (() => {})funconClick handler for button

Input element with label with support for aria-invalid, disabled, and readOnly HTML attributes

Example
<Input
  label="Input"
  name="input_example"
  placeholder="Placeholder"
  rounded
  type="text"
/>
PropTypeDescription
label*stringLabel for form element
name*stringName attribute for form element
type ('text')stringForm element type
messagestringAdds a helper or error message below the input
hideLabelboolHides the form element label
rounded (true)oneOfType([bool, oneOf(['top', 'right', 'bottom', 'left'])])Controls the border radius for creating grouped elements

Label element for form controls

Example
<Label>
  Label for form elements
</Label>
PropTypeDescription
hideboolAccessibly hide label for use in high density UI. This can still cause accessibility issues. Use this with caution.

Unstyled display block link

Example

LinkBlock

<LinkBlock
  href="#LinkBlock"
  is="a"
>
  <Media
    align="center"
    img="http://placehold.it/96/08e/fff"
  >
    <Heading level={3}>
      LinkBlock
    </Heading>
  </Media>
</LinkBlock>
PropTypeDescription
is ('a')oneOfType([string, object, func])Root component - useful for use with react-router's Link component

Media object with vertical alignment using flexbox

Example

Media Object

With alignment options

<Media
  align="center"
  img="http://placehold.it/128/08e/fff"
>
  <Heading level={3}>
    Media Object
  </Heading>
  <Text>
    With alignment options
  </Text>
</Media>
PropTypeDescription
imgstringImage source
rightboolDisplays image to the right
alignoneOf(['top', 'center', 'bottom'])Vertical alignment

Component for displaying flash and error messages

Example
Hello Message!
<Message
  inverted
  rounded
  theme="success"
>
  Hello Message!
  <Space
    auto
    x={1}
  />
  <Close />
</Message>
PropTypeDescription
theme ('default')oneOf(['primary', 'secondary', 'default', 'info', 'success', 'warning', 'error'])Sets color from config

Fixed positioned overlay for use with modal dialogs

Example
See demo
<a href="demo">
  See demo
</a>
PropTypeDescription
open (false)boolShows and hides overlay
dark (true)boolSets dark transparent overlay style
boxboolSets padding and background white for the content container
fullWidthboolSets content container full width
onDismiss (function () {})funcClick event callback for the Overlay background

Panel for containing small pieces of information

Example
Panel

Panels are great for visually separating UI, content, or data from the rest of the page.

The footer is a good place for less important information
<Panel theme="info">
  <PanelHeader
    inverted
    theme="default"
  >
    Panel
  </PanelHeader>
  <Text>
    Panels are great for visually separating UI, content, or data from the rest of the page.
  </Text>
  <PanelFooter theme="default">
    The footer is a good place for less important information
  </PanelFooter>
</Panel>
PropTypeDescription
theme ('default')oneOf(['primary', 'secondary', 'default', 'info', 'success', 'warning', 'error'])Sets color from config

Footer for Panel component with vertical centering using flexbox

Example
PropTypeDescription
theme ('default')oneOf(['primary', 'secondary', 'default', 'info', 'success', 'warning', 'error'])Sets color based on theme

Header for Panel component with vertical centering using flexbox

Example
PropTypeDescription
theme ('default')oneOf(['primary', 'secondary', 'default', 'info', 'success', 'warning', 'error'])Sets color from config

Pre element for displaying code examples

Example
const pre = { preformatted: 'text' }
<Pre>
  const pre = { preformatted: 'text' }
</Pre>

Progress element

Example
0.25
<Progress
  color="primary"
  value={0.25}
/>
PropTypeDescription
valuenumberValue for progress bar
color ('primary')stringBar color - can either be a key from the config colors object or any color value

Styled custom radio input with label

Example
<div>
  <Radio
    checked
    circle
    label="Radio"
    name="radio_1"
    readOnly
  />
  <Radio
    circle
    label="Radio"
    name="radio_1"
  />
</div>
PropTypeDescription
label*stringLabel for form element
name*stringName attribute for form element

Star rating component with clickable buttons

Example
<Rating
  color="orange"
  value={3.5}
/>
PropTypeDescription
value (0)numberNumber of star rating from 1 to 5
onClickfuncClick handler - returns index of star clicked

Section element with vertical padding

Example
Section
<Section>
  Section
</Section>

Header for section elements

Example

With linked header

Section
<Section>
  <SectionHeader
    description="With linked header"
    heading="Section Header"
  />
  Section
</Section>
PropTypeDescription
headingstringSection heading
hrefstringLink to section, used in HeadingLink
descriptionstringDescription of section

Select form control with label

Example
<Select
  label="Select"
  name="select_example"
  options={[{children: 'Two', value: 2}, {children: 'Four', value: 4}, {children: 'Eight', value: 8}, {children: 'Sixteen', value: 16}, {children: 'Thirty-Two', value: 32}, {children: 'Sixty-Four', value: 64}]}
  rounded
/>
PropTypeDescription
label*stringLabel for form element
name*stringName attribute for form element
options* ([])arrayOptions for select
messagestringAdds a helper or error message below the select
hideLabelboolHides the form element label

Sequence map pattern for use in multi-step forms

Example
<SequenceMap
  active={1}
  steps={[{children: 'Sign In', href: '#!'}, {children: 'Shipping Address', href: '#!'}, {children: 'Payment Method', href: '#!'}, {children: 'Place Order', href: '#!'}]}
/>
PropTypeDescription
steps ([])arrayArray of links for each step in the sequence
activenumberIndex of current step

Subcomponent for use in SequenceMap

Example
See SequenceMap
<a href="#SequenceMap">
  See SequenceMap
</a>
PropTypeDescription
widthstringWidth of step
firstboolRemoves line from first step
activeboolSets primary color on active step

Stylized range input with label

Example
<div>
  <Slider
    defaultValue={37.5}
    label="Slider"
    name="slider_1"
  />
  <Slider
    color="blue"
    fill
    label="Slider with color and fill"
    name="slider_2"
    readOnly
    value={62.5}
  />
</div>
PropTypeDescription
label*stringLabel for form element
name*stringName attribute for form element
fillboolAdds a fill color to the track - requires client-side JavaScript
hideLabelboolHides the form element label

Inline-block element for adding space between elements

Example
<div>
  <Button
    backgroundColor="primary"
    color="white"
    inverted
    rounded
  >
    Button
  </Button>
  <Space x={1} />
  <Button
    backgroundColor="primary"
    color="white"
    inverted
    rounded
  >
    With
  </Button>
  <Space x={4} />
  <Button
    backgroundColor="primary"
    color="white"
    inverted
    rounded
  >
    Space
  </Button>
</div>
PropTypeDescription
x (1)oneOf([1, 2, 3, 4])Width of space based on the spacing scale
autoboolSets flex: 1 1 auto

Styled number display for statistics

Example
512GB
Memory
32
PetaFLOPS
512Mbps
Upload
1,024Mbps
Download
<Flex
  justify="space-between"
  wrap
>
  <Stat
    label="Memory"
    unit="GB"
    value="512"
  />
  <Stat
    label="PetaFLOPS"
    value="32"
  />
  <Stat
    label="Upload"
    unit="Mbps"
    value="512"
  />
  <Stat
    label="Download"
    unit="Mbps"
    value="1,024"
  />
</Flex>
PropTypeDescription
valueoneOfType([number, string])Value for stat shown in large font size
unitstringOptional unit for displaying next to value
labelstringLabel for stat
topLabelboolDisplays label above value

Binary toggle switch component

Example
<Switch />
PropTypeDescription
checkedboolSets the Switch to an active style

Table element with simplified props

Example
NameMeatVegetableCarb
HamburgerBeefOnionBun
PizzaPorkTomatoCrust
CorndogPorkCornCornbread
Hot DogPorkPeppersBun
<Table
  data={[['Hamburger', 'Beef', 'Onion', 'Bun'], ['Pizza', 'Pork', 'Tomato', 'Crust'], ['Corndog', 'Pork', 'Corn', 'Cornbread'], ['Hot Dog', 'Pork', 'Peppers', 'Bun']]}
  headings={['Name', 'Meat', 'Vegetable', 'Carb']}
/>
PropTypeDescription
headings ([])arrayHeadings for <th>
data ([])arrayOfArray of table row data for <td>

Component for displaying text in UI

Example
PropTypeDescription
smallboolSets a smaller font size
boldboolSets bold font weight

Textarea form element with label

Example
PropTypeDescription
label*stringLabel for form element
name*stringName attribute for form element
messagestringAdds a helper or error message below the textarea
hideLabelboolHides the form element label

Toolbar component that vertically centers children with display flex

Example
<Toolbar>
  <NavItem is="a">
    Toolbar
  </NavItem>
  <NavItem is="a">
    NavItem
  </NavItem>
  <Space
    auto
    x={1}
  />
  <NavItem is="a">
    NavItem
  </NavItem>
</Toolbar>

Styled tooltip that shows on hover

Example
Hello!

Tooltip

<Tooltip
  inverted
  rounded
  title="Hello!"
>
  <Heading level={3}>
    Tooltip
  </Heading>
</Tooltip>
PropTypeDescription
titlestringText to display in tooltip

The Base component is internally used by all other Rebass components and provides an API to apply padding, margin, color, background-color, border-radius and other styles to any component. All props for the Base component are available to other Rebass components to help with contextual styling. It is not intended for use directly, but it can be used to create other custom components.

Example
Base
<Base
  backgroundColor="black"
  baseRef={function noRefCheck() {}}
  color="blue"
  mb={3}
  p={2}
  rounded
>
  Base
</Base>
PropTypeDescription
tagNameoneOfType([string, func, element])HTML element string or React component to render
classNamestringUsed to pull styles from the rebass context object
baseStyleobjectBase component styles
styleobjectStyles from component instance - overrides base and context styles
baseRef (x => x)funcFunction to obtain refs for the underlying Base component
moneOf([0, 1, 2, 3, 4])Applies margin with the margin utility based on the spacing scale
mtoneOf([0, 1, 2, 3, 4])Applies margin top based on the spacing scale
mroneOf([0, 1, 2, 3, 4])Applies margin right based on the spacing scale
mboneOf([0, 1, 2, 3, 4])Applies margin bottom based on the spacing scale
mloneOf([0, 1, 2, 3, 4])Applies margin left based on the spacing scale
mxoneOf([0, 1, 2, 3, 4])Applies margin left and right based on the spacing scale
myoneOf([0, 1, 2, 3, 4])Applies margin top and bottom based on the spacing scale
poneOf([0, 1, 2, 3, 4])Applies padding with the padding utility based on the spacing scale
ptoneOf([0, 1, 2, 3, 4])Applies padding top based on the spacing scale
proneOf([0, 1, 2, 3, 4])Applies padding right based on the spacing scale
pboneOf([0, 1, 2, 3, 4])Applies padding bottom based on the spacing scale
ploneOf([0, 1, 2, 3, 4])Applies padding left based on the spacing scale
pxoneOf([0, 1, 2, 3, 4])Applies padding left and right based on the spacing scale
pyoneOf([0, 1, 2, 3, 4])Applies padding top and bottom based on the spacing scale
colorstringText color - can either be a key from the config colors object or any color value
backgroundColorstringBackground color - can either be a key from the config colors object or any color value
themeoneOf(['primary', 'secondary', 'default', 'info', 'success', 'warning', 'error'])Sets color from config
invertedboolInverts colors from theme
roundedoneOfType([bool, oneOf(['top', 'right', 'bottom', 'left'])])Controls border radius
circleboolSets border radius 99999
pillboolSets border radius 99999

Get Started

npm i rebass
GitHub

Documentation generated with static-react, react-docgen, and react-component-permutations.