:atom_symbol: React primitive UI components built with styled-system.

Overview

Rebass

React primitive UI components built with Styled System. https://rebassjs.org

Build Status Coverage Downloads Version MIT License

npm i rebass

Getting Started

import React from 'react'
import { Box, Heading, Button } from 'rebass'

export default props =>
  <Box>
    <Heading>Hello</Heading>
    <Button>Rebass</Button>
  </Box>

Features

  • Start your design system without boiling the ocean
  • Build consistent UI with design constraints and user-defined scales
  • Best-in-class developer ergonomics with Styled System props
  • First-class support for theming & fully compatible with Theme UI
  • Quick, mobile-first responsive styles with array-based syntax
  • Flexbox layout with the Box and Flex components
  • Flexibility built in for high design & development velocity
  • Minimal footprint at about 4KB

"One of the best React component libs out there"

Max Stoiber

"Rebass is the Bootstrap of React."

Jori Lallo

"A whopper component library built on styled-components. Responsive, systematic, scalable...the business!"

Colm Tuite

Principles

Rebass is intended to be:

  • Minimal
  • Useful
  • Unopinionated
  • Flexible
  • Consistent
  • Extensible
  • Themeable

Do one thing, and do it well

Unix philosophy

See Patterns for Style Composition in React for more on some of the thought behind Rebass.

Documentation

CodeSandbox

Try it out: https://codesandbox.io/s/github/rebassjs/rebass/tree/master/examples/sandbox

Related

Upgrading from v3

See the Migration Guide.

Previous Versions


Contributing | MIT License

Issues
  • Issues with

    Issues with "as" vs "is" props in V3

    I noticed that the docs recommend using as to change the underlying tag emitted. However, if I use as instead of is, then all of the styled-system helpers are removed, and the values are passed directly to the DOM.

    i.e. this works

    const Code = props => 
      <Text
        is='code'
        fontFamily='mono'
      />
    

    However, if we swap is with as, fontFamily now gets passed as font-family as an attribute on the tag directly. I get

      <code font-family="mono" class="random-gen-class-name"></code>
    
    opened by ntaylor89 23
  • V4

    V4

    • Reorganized into a monorepo
    • Default package now uses Emotion (import the rebass/styled-components module if you're using Styled Components)
    • New sx prop for theme-based styles
    • Use the css prop for un-themed, raw CSS values
    • No additional Babel configuration required for the sx or css props
    • Better support for themeable component variants
    • Fully compatible with Theme UI
    • Rebass Grid has been renamed (back to) Reflexbox
    opened by jxnblk 23
  • When/why Rebass instead of Theme UI

    When/why Rebass instead of Theme UI

    I understand Rebass and Theme UI complement each other, but I'm a bit unsure of when or why one would use Rebass when there's Theme UI?

    Does Rebass just provide a bunch on prebuilt primitives for convenience, that I would inevitably end up building (probably more poorly) using Theme UI?

    opened by cour64 19
  • "Cannot read property 'rules' of undefined" after upgrading to styled components v4

    Seems System.js will generate a styled component without a 'componentStyle' attribute in some cases. Having a tough time putting my finger on what could be the solution.

    styled-components.browser.esm.js:1736 Uncaught TypeError: Cannot read property 'rules' of undefined
        at createStyledComponent (styled-components.browser.esm.js:1736)
        at templateFunction (styled-components.browser.esm.js:1971)
        at eval (index.js:32)
        at System.create (System.js:117)
        at eval (Box.js:17)
        at Object../node_modules/grid-styled/dist/Box.js (commons.js:2940)
        at __webpack_require__ (commons.js:725)
        at fn (commons.js:102)
        at eval (index.js:7)
        at Object../node_modules/grid-styled/dist/index.js (commons.js:2964)
    
    opened by gi-alec 15
  • Next v3

    Next v3

    Rebass v3 is a complete rewrite with the intent of making this UI component library useful to an even wider audience. Instead of trying to provide an off-the-shelf solution to styling UI (there are several other libraries out there for that), it tries to provide a solid base for extending these components into a highly customized UI component library. Rebass is intended to be useful in any React application and is so small it shouldn't make a huge impact on your overall bundle size.

    • Much smaller (~1KB)
    • 8 components: Box, Flex, Text, Heading, Button, Link, Image, and Card
    • Built with styled-components v4
    • Intended to be extended
    • Only one dependency: styled-system
    • No default theme or colors
    • No Provider component required
    • Variant theme support for Button and Card
    • Demo: https://rebass.now.sh
    npm i [email protected]
    

    Changes

    • Removes 61 components
    • Removes system-components (@rebass/components), grid-styled (@rebass/grid), and polished dependencies
    • Removes the is prop in favor of styled-components' as prop
    • All components extend the base Box component
    • v3 should still be compatible with previous versions of styled-components and emotion

    Where'd all the components go?

    They're still here in spirit :ghost: They might come back to haunt you in separate, more modular packages.

    The overall reduction in size of this codebase and splitting Rebass up into more modular packages will give users much more control over the size of their application bundles and allow a lot more flexibility in terms of building out custom libraries.

    Why has system-components (@rebass/components) been removed?

    It adds a lot of overhead and complexity to the codebase, and most end-users don't benefit from it being used in Rebass.

    Why are style props showing in the HTML

    This is a long standing issue with styled-components and is due to the way the styled higher-order component is implemented. I was hopeful that styled-components v4 would have addressed this issue to avoid some of the less-than-ideal solutions used in the previous version of Rebass, but that will have to wait. And, due to the introduction of the as prop in styled-components, attempting to work around this issue while keeping up with the changing landscape of CSS-in-JS libraries doesn't seem worth it for a simple library like Rebass. That said, there might be a Babel plugin introduced in the future to help with this issue.

    Related:

    • https://github.com/styled-components/styled-components/issues/1981#issuecomment-419287003

    What's happening with @rebass/grid (formerly grid-styled)?

    The @rebass/grid package will be updated to match the APIs of the Box and Flex component here (which is virtually the same) and will be available as an even smaller alternative to this library.

    Why has the Provider and theme been removed?

    In order to remain as unopinionated as possible, themes are now optional, giving you complete control over what your application looks like. Separate theme packages might be introduced to provide some smart defaults.

    Version 2

    v2 will still be available in a branch to continue development while v3 is in beta. Any pull requests for v2 should point to that branch.

    opened by jxnblk 15
  • Typescript definitions

    Typescript definitions

    Has anyone got up to date definitions? The one in @types seems to be out of date — I can try to find time to take a pass at it if not.

    opened by jongold 15
  •  Set border radius for buttons in theme.js?

    Set border radius for buttons in theme.js?

    Sorry for making so many issues, I just couldn't find this in docs.

    How do I set border radius for buttons?

    I know how to set border for a variant.

    buttons: {
        primary: {
          background: 'black',
          color: 'white',
          borderRadius: 40
        },
        secondary: {
          color: 'white',
          background: 'blue'
        }
      }
    

    But I use the same border raidus everywhere. Is there any way to make all buttons have the same border?

    I tried this:

      radii: {
        buttons: 48
      }
    

    And this:

    buttons: {
        borderRadius: 20,
        primary: {
          background: 'black',
          color: 'white'
        },
        secondary: {
          color: 'white',
          background: 'blue'
        }
      },
    

    both don't work

    opened by talentlessguy 14
  • Update dependencies (React 15 → 16.2)

    Update dependencies (React 15 → 16.2)

    Update to React 16, the new Grid Styled, etc, and docs to Webpack 3.6. All tests still pass and docs load correctly.

    opened by lachlanjc 14
  • React Native

    React Native

    The same approach I suggested for react-intl https://github.com/yahoo/react-intl/issues/600

    opened by steida 13
  • Theme overrides component props

    Theme overrides component props

    Maybe this is the intended behavior but when I set props on individual components they are overridden by the ThemeProvider. For instance, I have a color set on all Heading elements in my theme.js but for one in particular, I'd like to override the default setting by passing in the color prop. What's the recommended way to do this?

    opened by steverecio 12
  • Checkbox in label is technically invalid

    Checkbox in label is technically invalid

    label elements should only contain phrasing content, which does not include div elements. The checkbox example is technically invalid for this reason since the Checkbox component is wrapped in a Box which defaults to a div. Would it be possible to provide a prop to change the type of tag that is used for this container element? For example, being able to set it to be a span

    Screen Shot 2021-11-29 at 9 32 46 am

    This guideline is defined in the following spec

    Thanks for the awesome library :)

    opened by samgreen-spp 0
  • Package emotion-theming was renamed to @emotion/react. Use it

    Package emotion-theming was renamed to @emotion/react. Use it

    Regarding package name changes https://github.com/emotion-js/emotion/blob/main/docs/emotion-11.mdx#package-renaming

    opened by paazmaya 1
  • Style issues when clicked

    Style issues when clicked

    There will be a light blue background when I click on it, Under the svg picture, why? image image

    opened by RowenXZ 0
  • Bump url-parse from 1.4.7 to 1.5.3

    Bump url-parse from 1.4.7 to 1.5.3

    Bumps url-parse from 1.4.7 to 1.5.3.

    Commits
    • ad44493 [dist] 1.5.3
    • c798461 [fix] Fix host parsing for file URLs (#210)
    • 201034b [dist] 1.5.2
    • 2d9ac2c [fix] Sanitize only special URLs (#209)
    • fb128af [fix] Use 'null' as origin for non special URLs
    • fed6d9e [fix] Add a leading slash only if the URL is special
    • 94872e7 [fix] Do not incorrectly set the slashes property to true
    • 81ab967 [fix] Ignore slashes after the protocol for special URLs
    • ee22050 [ci] Use GitHub Actions
    • d2979b5 [fix] Special case the file: protocol (#204)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • checkbox issue

    checkbox issue

    long text or A paragraph text content not real wrapping with checkbox

    opened by kalichaudhary 0
  • Bump tmpl from 1.0.4 to 1.0.5

    Bump tmpl from 1.0.4 to 1.0.5

    Bumps tmpl from 1.0.4 to 1.0.5.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  •  build issue flex and Box is not find in node_module/rebass/style-com…

    build issue flex and Box is not find in node_module/rebass/style-com…

    …nents flex and Box. please marge PR as soon as possible this its solve my problem. thanks

    opened by Hamza-Rafique 0
  • error dring bundle that i face Flex and Box is not exported  by node_…

    error dring bundle that i face Flex and Box is not exported by node_…

    …module/rebass/styled-components/index.js is solved please marge this for solving my problem thanks

    opened by Hamza-Rafique 0
  • Predefined styles for components conflict with custom styling

    Predefined styles for components conflict with custom styling

    I have noticed that, when I try to create components using Flex for example, I get the following on the browser:

    image

    which in turn introduces some css:

    image

    which conflict with my components if I am using custom style values:

    image

    To fix this thus far, I've had to use the !important rule to ensure my style gets applied. But is there a way to tell this packages components not to provide these values when not needed? I tried using a style prop as style={{ margin: 'unset' }} but that removes my margin-top

    opened by gfcf14 0
Releases(v4.0.0)
  • v4.0.0(Aug 27, 2019)

  • v3.0.0(Dec 1, 2018)

    Rebass v3 is a complete rewrite with the intent of making this UI component library useful to an even wider audience. Instead of trying to provide an off-the-shelf solution to styling UI, it tries to provide a solid base for extending these components into a highly customized UI component library. Rebass is intended to be useful in any React application and is so small it shouldn't make a huge impact on your overall bundle size.

    • Reduced package size (~1.17 kB)
    • Reduced number of components to 8
    • Updated for Styled Components v4 and Emotion v10
    • Reduced dependencies
    • Removed default theme and colors
    • Removed Provider component
    • Added variant theme support for Button and Card components
    • Removed is prop in favor of Styled Components' and Emotion's as prop
    • Uses Box component as base for all other components
    • Removed css prop in favor of Styled Components' and Emotion's implementations

    Migrating from v2 to v3

    Version 3 is a complete rewrite and major breaking change. It removes many of the components from the previous version to focus on a lighter, more generally useful set of 8 primitive components. If you've relied heavily on some of the Rebass v2 components that have been removed, you should consider forking or copying and pasting components into your application where needed. Alternatively there are other UI component libraries out there that can provide some of the same functionality from v2, such as Reakit.

    It is also intended for Styled Components v4 or Emotion v10 and some features will not work as expected with previous versions.

    Read more about the rationale here: rebassjs/rebass#474

    Use the following guide to upgrade to Rebass v3.

    1. Install the latest versions of Styled Components or Emotion

    npm i [email protected]
    

    Or, if you're using emotion:

    npm i @emotion/[email protected] @emotion/[email protected]
    

    2. Replace v2 components

    The following components have been removed and should be replaced with custom implementations:

    • Base
    • CSS
    • Root
    • Provider
    • DarkMode
    • ButtonOutline
    • ButtonCircle
    • ButtonTransparent
    • NavLink
    • BlockLink
    • Close
    • Subhead
    • Caps
    • Small
    • Lead
    • Truncate
    • Truncate
    • Blockquote
    • Divider
    • Pre
    • Code
    • Samp
    • Measure
    • Label
    • Input
    • Select
    • Textarea
    • Radio
    • Checkbox
    • Slider
    • Switch
    • BackgroundImage
    • Avatar
    • Embed
    • Container
    • Group
    • Row
    • Column
    • Border
    • Panel
    • Progress
    • Banner
    • Message
    • Toolbar
    • Tabs
    • Tab
    • Badge
    • Circle
    • Dot
    • Arrow
    • Donut
    • Position
    • Relative
    • Absolute
    • Fixed
    • Sticky
    • Modal
    • Drawer
    • Carousel
    • Tooltip
    • Hide

    3. Replace imports for the following

    If you've used any of the internal theme modules from Rebass, you will need to replace these with custom implementations:

    • theme
    • colors
    • createColors
    • invertTheme

    4. Use a custom ThemeProvider

    Since Rebass v3 no longer includes a default theme, replace the Rebass Provider component with a ThemeProvider to apply a custom theme.

    5. Replace the is prop with as

    // v2
    <Box is='header' />
    
    // v3
    <Box as='header' />
    
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0(Jun 24, 2018)

    Added

    Changed

    Breaking

    • Renamed components
      • TabItem -> Tab
      • DotButton -> Dot
      • PanelHeader -> Panel.Header
      • PanelFooter -> Panel.Footer
    • Default theme (changed to match styled-system)
      • The colors object no longer uses Palx
      • Array color values have been removed
      • radius has been replaced with radii
      • font has been replaced with fonts
      • monospace has been removed
      • Theme fields are no longer exposed as exports
    • Props
      • width is only available on Flex and Box
      • fontSize is only available on typographic components
      • direction is now flexDirection
      • Flex align is now alignItems
      • Flex justify is now justifyContent
      • Flex wrap is now flexWrap
      • Arrow up is now direction='up'
      • active props have been removed in favor of custom styles
      • Border now uses styled-system border props
      • Banner image is now backgroundImage
      • Absolute, Fixed, Relative, and Sticky now require values for top, right, bottom, and left props
      • Drawer position prop has been renamed to side
      • Drawer size prop has been replaced with width and height props

    Removed

    • Custom HOC hoc
    • createLibrary function
    • util
    • createComponent
    • Palx dependency
    • ScrollCarousel component
    • CarouselSlide component
    • Star comonent
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-0(Feb 19, 2018)

    Refactored code base, using the latest styled-system and grid-styled

    Breaking Changes

    • Some components have been renamed:
      • TabItem -> Tab
      • DotButton -> Dot
      • PanelHeader -> Panel.Header
      • PanelFooter -> Panel.Footer
    • Some components have been removed:
      • ScrollCarousel
      • CarouselSlide
      • Star
    • Some utilities have been removed:
      • util
      • hoc
      • createComponent
      • createLibrary
    • The default theme has changed to match styled-system
      • The colors object no longer uses Palx
      • Array color values have been removed
      • radius has been replaced with radii
      • font has been replaced with fonts
      • monospace has been removed
      • Theme fields are no longer exposed as exports
    • Some props have changed
      • width is only available on Flex and Box
      • fontSize is only available on typographic components
      • direction is now flexDirection
      • Flex align is now alignItems
      • Flex justify is now justifyContent
      • Flex wrap is now flexWrap
      • Arrow up is now direction='up'
      • active props have been removed in favor of custom styles
      • Border now uses styled-system border props
      • Banner image is now backgroundImage
      • Absolute, Fixed, Relative, and Sticky now require values for top, right, bottom, and left props
    Source code(tar.gz)
    Source code(zip)
Owner
Rebass
React UI components
Rebass
Opinionated React UI library, built with styled-components and TypeScript.

Opinionated React UI library, built with styled-components and TypeScript.

Lapidist 0 Jan 10, 2022
An opinionated UI Workbench featuring tools like react, styled components, typescript, webpack, jest and storybook all bundled into an easy to use interface

An opinionated UI Workbench featuring tools like react, styled components, typescript, webpack, jest and storybook all bundled into an easy to use interface

Alex Wright 17 Dec 18, 2021
Storybook environment for React components production boosted with TypeScript & styled by Material-UI with styledComponents as final makeup 😁

Material-UI Storybook Components for React React.js components made with TypeScript with on Material-UI look-like using Storybook. The problem @Materi

Larry Noriega 1 Jan 14, 2022
A comprehensive React UI components library based on the Arco Design system.

A comprehensive React UI components library based on the Arco Design system.

null 2.6k Jan 17, 2022
Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System

Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System powered by Reakit System.

Timeless 154 Jan 8, 2022
Pre-styled card form to subscribe emails to a newsletter and other lists (for Mailchimp + TinyLetter)

React Subscribe Card Requirements Requires React and... Mailchimp account or TinyLetter account Example import React from "react"; import SubscribeCar

null 9 Sep 12, 2021
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

Material-UI 74.6k Jan 21, 2022
⚛️A beautiful and modern React design system.

Shards React is a free, beautiful and modern React UI kit based on Shards. Documentation & Demo • Official Page Getting Started Getting started with S

DesignRevision 707 Jan 10, 2022
A modern, comprehensive, flexible design system and React UI library

A modern, comprehensive, flexible design system and UI library. Quickly build beautiful React apps.

null 5.1k Jan 16, 2022
Bootstrap components built with React

React-Bootstrap Bootstrap 4 components built with React. Docs See the documentation with live editable examples and API documentation. To find the doc

react-bootstrap 20.3k Jan 14, 2022
VechaiUI – React components with built-in dark mode using Tailwind CSS

Collection of accessible React UI components with the built-in dark theme using Tailwind CSS. Pre-designed headless ui and radix-ui.

null 738 Jan 17, 2022
dataminr-react-components - Collection of reusable React Components and utility functions.

react-components A collection of reusable React components with their own Flux lifecycle. What's inside react-components? Table Component From a simpl

Dataminr 263 Dec 17, 2021
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI Web Fluent UI web represents a collection of utilities, React components, and web components for building web applications. This repo is hom

Microsoft 12.7k Jan 14, 2022
🧩 Medly components provides numerous themable react components, each with multiple varitaions of sizes, colors, position etc.

?? Medly components provides numerous themable react components, each with multiple varitaions of sizes, colors, position etc.

Medly 63 Jan 10, 2022
Nextjs-components - A collection of React components

nextjs-components A collection of React components, transcribed from https://vercel.com/design. 1 Motivation TBD Todo's Unit test coverage Unit tests

null 22 Jan 15, 2022
Rheostat is a www, mobile, and accessible slider component built with React

Rheostat A mobile, tablet, desktop, and accessible slider for the web. Install npm install rheostat Initialize As of v3.0.0, the rheostat project reli

Airbnb 1.6k Jan 18, 2022
An accessible accordion built using React.

An accessible accordion built using React.

Peter Aiello 8 Nov 24, 2021
Component Library for Korol Social Network Built With React

Component Library for Korol Social Network View Demo · Report Bug · View Package ??️ Built With React TypeScript StoryBook Styled Components ?? Gettin

Volodya-Korol 1 Nov 5, 2021
Simple React Bootstrap 4 components

reactstrap Stateless React Components for Bootstrap 4. Getting Started Follow the create-react-app instructions to get started and then follow the rea

reactstrap 10.2k Jan 13, 2022