CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-rebass

React primitive UI components built with Styled System for design systems and responsive layouts

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

index.mddocs/

Rebass

Rebass is a React component library that provides primitive UI components built with Styled System. It offers a minimal, flexible, and theme-able foundation for building design systems with responsive layouts and consistent spacing scales.

Package Information

  • Package Name: rebass
  • Package Type: npm
  • Language: JavaScript (with React)
  • Installation: npm install rebass

Core Imports

import { Box, Flex, Text, Heading, Button, Link, Image, Card } from "rebass";

For CommonJS:

const { Box, Flex, Text, Heading, Button, Link, Image, Card } = require("rebass");

Note: Rebass is part of a larger ecosystem. This Knowledge Tile covers the main rebass package. Related packages include @rebass/forms, @rebass/layout, and @rebass/space for additional components.

Basic Usage

import React from "react";
import { Box, Heading, Text, Button, Card } from "rebass";

function App() {
  return (
    <Box p={4} bg="background">
      <Card p={3} bg="white" borderRadius={8}>
        <Heading mb={2}>Welcome to Rebass</Heading>
        <Text mb={3} color="text">
          Build responsive UI with design constraints and user-defined scales.
        </Text>
        <Button bg="primary" color="white">
          Get Started
        </Button>
      </Card>
    </Box>
  );
}

Architecture

Rebass is built around several key concepts:

  • Styled System Integration: All components accept styled-system props for spacing, layout, typography, color, and flexbox
  • Reflexbox Foundation: Built on top of reflexbox, which provides the base Box and Flex components with emotion/styled integration
  • Theme-aware Styling: Components work with Theme UI and styled-system themes for consistent design tokens
  • Responsive Arrays: Use array syntax for responsive breakpoint styling (e.g., p={[2, 3, 4]})
  • Variant System: Components support theme-based variants for consistent styling patterns
  • Minimal Foundation: Small footprint (~4KB) with essential UI primitives only

Capabilities

Layout Components

Foundation components for structuring layouts with flexbox and grid systems.

/**
 * Box - Base layout component with all styled-system props  
 * Re-exported from reflexbox package
 * @param {BoxProps} props - Component props including all styled-system props
 * @returns {React.Element} Rendered component
 */
const Box = React.forwardRef((props, ref) => {});

/**
 * Flex - Box component with display: flex by default
 * Re-exported from reflexbox package
 * @param {BoxProps} props - Component props including all styled-system props
 * @returns {React.Element} Rendered component
 */
const Flex = React.forwardRef((props, ref) => {});

/**
 * Props interface for Box and Flex components
 * Includes all styled-system props for comprehensive styling
 */
interface BoxProps {
  // Spacing props - margin and padding with responsive support
  m?: ResponsiveValue;
  margin?: ResponsiveValue;
  mt?: ResponsiveValue;
  mr?: ResponsiveValue;
  mb?: ResponsiveValue;
  ml?: ResponsiveValue;
  mx?: ResponsiveValue;
  my?: ResponsiveValue;
  p?: ResponsiveValue;
  padding?: ResponsiveValue;
  pt?: ResponsiveValue;
  pr?: ResponsiveValue;
  pb?: ResponsiveValue;
  pl?: ResponsiveValue;
  px?: ResponsiveValue;
  py?: ResponsiveValue;
  
  // Layout props - size and display properties with responsive support
  width?: ResponsiveValue;
  height?: ResponsiveValue;
  minWidth?: ResponsiveValue;
  maxWidth?: ResponsiveValue;
  minHeight?: ResponsiveValue;
  maxHeight?: ResponsiveValue;
  display?: ResponsiveValue;
  verticalAlign?: ResponsiveValue;
  overflow?: ResponsiveValue;
  overflowX?: ResponsiveValue;
  overflowY?: ResponsiveValue;
  
  // Color props - text and background colors with responsive support
  color?: ResponsiveValue;
  backgroundColor?: ResponsiveValue;
  bg?: ResponsiveValue;
  opacity?: ResponsiveValue;
  
  // Typography props - text styling with responsive support
  fontFamily?: ResponsiveValue;
  fontSize?: ResponsiveValue;
  fontWeight?: ResponsiveValue;
  lineHeight?: ResponsiveValue;
  letterSpacing?: ResponsiveValue;
  textAlign?: ResponsiveValue;
  fontStyle?: ResponsiveValue;
  textTransform?: ResponsiveValue;
  
  // Flexbox props - flex container and item properties with responsive support
  alignItems?: ResponsiveValue;
  alignContent?: ResponsiveValue;
  justifyItems?: ResponsiveValue;
  justifyContent?: ResponsiveValue;
  flexWrap?: ResponsiveValue;
  flexDirection?: ResponsiveValue;
  flex?: ResponsiveValue;
  flexGrow?: ResponsiveValue;
  flexShrink?: ResponsiveValue;
  flexBasis?: ResponsiveValue;
  justifySelf?: ResponsiveValue;
  alignSelf?: ResponsiveValue;
  order?: ResponsiveValue;
  
  // Theme-aware styling props
  sx?: object;
  variant?: string;
  tx?: string;
  __css?: object;
  
  // Element props
  as?: string | React.Component;
  children?: React.ReactNode;
}

/**
 * Responsive value type - accepts single value or array for responsive breakpoints
 * @typedef {(string|number|(string|number)[])} ResponsiveValue
 */

Usage Examples:

// Basic layout with spacing
<Box p={4} m={2} bg="gray.100">
  <Text>Content with padding and margin</Text>
</Box>

// Responsive flexbox layout
<Flex
  flexDirection={["column", "row"]}
  alignItems="center"
  justifyContent="space-between"
  p={[2, 3, 4]}
>
  <Box>Left content</Box>
  <Box>Right content</Box>
</Flex>

// Theme-aware styling with sx prop
<Box
  sx={{
    borderRadius: 4,
    boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
    "&:hover": {
      boxShadow: "0 4px 16px rgba(0,0,0,0.15)",
    },
  }}
>
  Styled box with theme integration
</Box>

Typography Components

Text and heading components with built-in typographic styling and theme integration.

/**
 * Text - General text component with typography styling
 * Built on Box component with tx='text' theme variant
 * @param {TextProps} props - Component props
 * @returns {React.Element} Rendered text element
 */
const Text = React.forwardRef((props, ref) => {});

/**
 * Heading - Heading component with heading-specific defaults
 * Built on Box component, defaults to h2 element with heading styles
 * @param {HeadingProps} props - Component props
 * @returns {React.Element} Rendered heading element
 */
const Heading = React.forwardRef((props, ref) => {});

/**
 * Props for Text component
 */
interface TextProps extends BoxProps {
  /** Theme variant path, defaults to 'text' */
  tx?: string;
  /** Theme variant name for styling */
  variant?: string;
}

/**
 * Props for Heading component
 */
interface HeadingProps extends BoxProps {
  /** Theme variant path, defaults to 'text' */
  tx?: string;
  /** Theme variant name, defaults to 'heading' */
  variant?: string;
}

Usage Examples:

// Basic text with styling
<Text fontSize={2} color="text" lineHeight="1.5">
  This is body text with theme-based sizing and color.
</Text>

// Text with theme variants
<Text variant="caps" color="muted">
  Uppercase text using theme variant
</Text>

// Headings with different levels
<Heading as="h1" fontSize={5} mb={3}>
  Main Title
</Heading>

<Heading as="h3" fontSize={3} fontWeight="normal">
  Subtitle
</Heading>

// Custom heading variant
<Heading variant="display" textAlign="center">
  Display Heading
</Heading>

Interactive Components

Button and link components for user interactions with consistent styling.

/**
 * Button - Interactive button component with button-specific styling
 * Built on Box component, defaults to button element with primary variant
 * @param {ButtonProps} props - Component props
 * @returns {React.Element} Rendered button element
 */
const Button = React.forwardRef((props, ref) => {});

/**
 * Link - Link component for navigation
 * Built on Box component, defaults to anchor element
 * @param {LinkProps} props - Component props
 * @returns {React.Element} Rendered link element
 */
const Link = React.forwardRef((props, ref) => {});

/**
 * Props for Button component
 */
interface ButtonProps extends BoxProps {
  /** Theme variant path, defaults to 'buttons' */
  tx?: string;
  /** Theme variant name, defaults to 'primary' */
  variant?: string;
  /** Whether button is disabled */
  disabled?: boolean;
  /** Button type attribute */
  type?: "button" | "submit" | "reset";
  /** Click event handler */
  onClick?: (event) => void;
}

/**
 * Props for Link component
 */
interface LinkProps extends BoxProps {
  /** Theme variant name, defaults to 'link' */
  variant?: string;
  /** Link href attribute */
  href?: string;
  /** Link target attribute */
  target?: string;
  /** Link rel attribute */
  rel?: string;
  /** Click event handler */
  onClick?: (event) => void;
}

Usage Examples:

// Primary button with default styling
<Button>Click Me</Button>

// Button variants and styling
<Button variant="secondary" size="large" mr={2}>
  Secondary
</Button>

<Button bg="red" color="white" px={4} py={2}>
  Custom Styled
</Button>

// Button as different elements
<Button as="a" href="/signup">
  Sign Up Link
</Button>

// Links with styling
<Link href="/about" color="primary">
  About Us
</Link>

<Link variant="nav" fontSize={1}>
  Navigation Link
</Link>

Media Components

Image component with responsive defaults and styling capabilities.

/**
 * Image - Responsive image component with built-in responsive defaults
 * Built on Box component, defaults to img element with maxWidth: '100%'
 * @param {ImageProps} props - Component props
 * @returns {React.Element} Rendered image element
 */
const Image = React.forwardRef((props, ref) => {});

/**
 * Props for Image component
 */
interface ImageProps extends BoxProps {
  /** Image source URL */
  src?: string;
  /** Image alt text for accessibility */
  alt?: string;
  /** Image width (overrides responsive default) */
  width?: string | number;
  /** Image height (overrides responsive default) */
  height?: string | number;
  /** Image loading strategy */
  loading?: "lazy" | "eager";
  /** Cross-origin attribute for CORS */
  crossOrigin?: string;
  /** Load event handler */
  onLoad?: (event) => void;
  /** Error event handler */
  onError?: (event) => void;
}

Usage Examples:

// Responsive image with default styling
<Image src="/hero.jpg" alt="Hero image" />

// Image with custom sizing and styling
<Image
  src="/avatar.jpg"
  alt="User avatar"
  width={48}
  height={48}
  borderRadius="50%"
/>

// Image with responsive sizing
<Image
  src="/banner.jpg"
  alt="Banner"
  width={["100%", "50%", "33%"]}
  maxWidth={800}
/>

Container Components

Card component for grouping content with consistent container styling.

/**
 * Card - Container component with card-specific styling
 * Built on Box component with card theme variant
 * @param {CardProps} props - Component props
 * @returns {React.Element} Rendered card container
 */
const Card = React.forwardRef((props, ref) => {});

/**
 * Props for Card component
 */
interface CardProps extends BoxProps {
  /** Theme variant name, defaults to 'card' */
  variant?: string;
}

Usage Examples:

// Basic card with default styling
<Card p={3}>
  <Heading mb={2}>Card Title</Heading>
  <Text>Card content goes here.</Text>
</Card>

// Styled card with theme variants
<Card variant="compact" bg="white" borderRadius={8}>
  <Text>Compact card variant</Text>
</Card>

// Card with custom styling
<Card
  p={4}
  bg="white"
  sx={{
    borderRadius: 8,
    boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
    border: "1px solid",
    borderColor: "gray.200",
  }}
>
  <Text>Custom styled card</Text>
</Card>

Theme Integration

All Rebass components are designed to work with theme objects and support Theme UI compatibility:

// Example theme structure
const theme = {
  colors: {
    primary: "#0066cc",
    secondary: "#f0f0f0",
    text: "#333",
    background: "#fff",
  },
  space: [0, 4, 8, 16, 32, 64, 128, 256],
  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64],
  fonts: {
    body: "system-ui, sans-serif",
    heading: "Georgia, serif",
  },
  variants: {
    card: {
      p: 3,
      bg: "white",
      borderRadius: 8,
      boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
    },
    buttons: {
      primary: {
        bg: "primary",
        color: "white",
      },
      secondary: {
        bg: "secondary",
        color: "text",
      },
    },
  },
};

Error Handling

Rebass components generally handle errors gracefully:

  • Invalid style props are ignored
  • Theme values that don't exist fall back to the literal value
  • Components render as expected HTML elements even with invalid props
  • React development warnings appear for invalid HTML attributes passed through

docs

index.md

tile.json