🏭 Rebass Extend

Rebass is an unopinionated and extensible set of React primitives.

This library allows you to easily add your own style functions to the Rebass UI primitives.

yarn add rebass rebass-extend

Getting Started

// src/lib/primitives.js
 
import { extend } from "rebass-extend";
import { display, minHeight, textAlign, fontStyle } from "styled-system";
 
export const { Box, Flex, Text, Heading, Button, Link, Image, Card } = extend({
  Box: [display, minHeight, textAlign],
  Text: [fontStyle]
});

The display style function is added to Box, and all the components that extend it, like Card!

// src/components/Badge.js
import { Card } from "src/lib/primitives";
 
const Badge = props => (
  <Card
    color="white"
    bg="blue"
    px={3}
    py={1}
    borderRadius={9999}
    display="inline-block"
    {...props}
  />
);
 
export default Badge;