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

Related tags

React react javascript css theme components color ui grid styled-components layout react-components typography emotion design-system styled-system rebass
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

Comments
  • 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
  • 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
  • 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
  • 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 rebass@next

    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

  • "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
  • 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
  • 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
  • Better classnames for development mode

    Better classnames for development mode

    At the moment the classnames are mangled into base64 hash or something:

    e.g.

    class="sc-jAaTju kAxljF sc-bdVaJa iHZvIS"

    It would be nice to somehow allow rebass to pass the folder_file_componentName:base64 for development mode. The same as how css-loader does it.

    opened by MartinDawson 12
  • How to apply custom css with Rebass 3.0

    How to apply custom css with Rebass 3.0

    As of version 3.0 I can no longer apply custom css using the css prop. It seems it was removed in #536 with some mention of this now being supported by babel-plugin-styled-components although no mention of how to use this and no reference to it in the documentation. The documentation at https://rebassjs.org/ still shows usage of the css prop with no mention of any special steps that need to be taken to get it to work.

    What do I need to do so that I c an use css props with v3.0.0 as I could with v3.0.0-9? Thanks.

    opened by mrfelton 11
  • Run jest only from the root

    Run jest only from the root

    This allows to reduce configuration and modules count per each package.

    All dependencies (except rebass and styled-system) are reused from the root. With yarn workspaces all depenendecies could be hoised without need to remove them from each packages. That's why I removed evenr react packages.

    opened by TrySound 11
  • Image component renders as div.

    Image component renders as div.

    Using:

            "rebass": "^3.0.0-4",
        "styled-components": "^3.4.5",

    When an Image is rendered, it appears as a div (and therefore the src prop is passed as a DOM attribute).

    opened by jckw 11
  • Bump express from 4.17.1 to 4.18.2

    Bump express from 4.17.1 to 4.18.2

    Bumps express from 4.17.1 to 4.18.2.

    Release notes

    Sourced from express's releases.

    4.18.2

    4.18.1

    • Fix hanging on large stack of sync routes

    4.18.0

    ... (truncated)

    Changelog

    Sourced from express's changelog.

    4.18.2 / 2022-10-08

    4.18.1 / 2022-04-29

    • Fix hanging on large stack of sync routes

    4.18.0 / 2022-04-25

    ... (truncated)

    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
  • Bump qs from 6.5.2 to 6.5.3

    Bump qs from 6.5.2 to 6.5.3

    Bumps qs from 6.5.2 to 6.5.3.

    Changelog

    Sourced from qs's changelog.

    6.5.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] utils.merge: avoid a crash with a null target and a truthy non-array source
    • [Fix] correctly parse nested arrays
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Refactor] utils: reduce observable [[Get]]s
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Refactor] parse: only need to reassign the var once
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clean up license text so it’s properly detected as BSD-3-Clause
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] always use String(x) over x.toString()
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • 298bfa5 v6.5.3
    • ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
    • 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
    • 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 12ac1c4 [meta] fix README.md (#399)
    • 0338716 [actions] backport actions from main
    • 5639c20 Clean up license text so it’s properly detected as BSD-3-Clause
    • 51b8a0b add FUNDING.yml
    • 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • f814a7f [Dev Deps] backport from main
    • 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
  • Bump decode-uri-component from 0.2.0 to 0.2.2

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    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
  • Bump socket.io-parser from 3.3.2 to 3.3.3

    Bump socket.io-parser from 3.3.2 to 3.3.3

    Bumps socket.io-parser from 3.3.2 to 3.3.3.

    Changelog

    Sourced from socket.io-parser's changelog.

    3.3.3 (2022-11-09)

    Bug Fixes

    • check the format of the index of each attachment (fb21e42)

    3.4.2 (2022-11-09)

    Bug Fixes

    • check the format of the index of each attachment (04d23ce)

    4.2.1 (2022-06-27)

    Bug Fixes

    • check the format of the index of each attachment (b5d0cb7)

    4.0.5 (2022-06-27)

    Bug Fixes

    • check the format of the index of each attachment (b559f05)

    4.2.0 (2022-04-17)

    Features

    • allow the usage of custom replacer and reviver (#112) (b08bc1a)

    4.1.2 (2022-02-17)

    Bug Fixes

    ... (truncated)

    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
  • Bump terser from 4.4.2 to 4.8.1

    Bump terser from 4.4.2 to 4.8.1

    Bumps terser from 4.4.2 to 4.8.1.

    Changelog

    Sourced from terser's changelog.

    v4.8.1 (backport)

    • Security fix for RegExps that should not be evaluated (regexp DDOS)

    v4.8.0

    • Support for numeric separators (million = 1_000_000) was added.
    • Assigning properties to a class is now assumed to be pure.
    • Fixed bug where yield wasn't considered a valid property key in generators.

    v4.7.0

    • A bug was fixed where an arrow function would have the wrong size
    • arguments object is now considered safe to retrieve properties from (useful for length, or 0) even when pure_getters is not set.
    • Fixed erroneous const declarations without value (which is invalid) in some corner cases when using collapse_vars.

    v4.6.13

    • Fixed issue where ES5 object properties were being turned into ES6 object properties due to more lax unicode rules.
    • Fixed parsing of BigInt with lowercase e in them.

    v4.6.12

    • Fixed subtree comparison code, making it see that [1,[2, 3]] is different from [1, 2, [3]]
    • Printing of unicode identifiers has been improved

    v4.6.11

    • Read unused classes' properties and method keys, to figure out if they use other variables.
    • Prevent inlining into block scopes when there are name collisions
    • Functions are no longer inlined into parameter defaults, because they live in their own special scope.
    • When inlining identity functions, take into account the fact they may be used to drop this in function calls.
    • Nullish coalescing operator (x ?? y), plus basic optimization for it.
    • Template literals in binary expressions such as + have been further optimized

    v4.6.10

    • Do not use reduce_vars when classes are present

    v4.6.9

    • Check if block scopes actually exist in blocks

    v4.6.8

    • Take into account "executed bits" of classes like static properties or computed keys, when checking if a class evaluation might throw or have side effects.

    v4.6.7

    • Some new performance gains through a AST_Node.size() method which measures a node's source code length without printing it to a string first.

    ... (truncated)

    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
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 styled-components@latest

    Or, if you're using emotion:

    npm i @emotion/core@latest @emotion/styled@latest

    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
GitHub https://rebassjs.org
A react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

fork-me-corner fork-me-corner is a react component available on npm to easily link to your project on github and is made using React, TypeScript and s

Victor Dantas 9 Jun 30, 2022
NetflixClone - Netflix clone with react , styled components and firebase with user authentication.........

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 1 Jan 3, 2022
Boilerplate de projeto nextjs, com Styled Components e Typescript

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Fabi Rodrigues 2 Mar 23, 2022
template with nextts, eslint&prettier, husky&lint-staged, tailwindcss&styled-components

Setup npm i Use VSCode, make sure the recommended eslint and prettier plugins are installed. Automatic linting should occur when you save! npx husky i

null 6 Mar 9, 2022
A React utility belt for function components and higher-order components.

A Note from the Author (acdlite, Oct 25 2018): Hi! I created Recompose about three years ago. About a year after that, I joined the React team. Today,

Andrew Clark 14.8k Jan 4, 2023
Nextjs-components: A collection of React components

nextjs-components A collection of React components, transcribed from https://vercel.com/design. 1 Motivation Blog post from 01/09/2022 Todo's Unit tes

null 94 Nov 30, 2022
This is best boilerplate project using Next.js, Typescript, Redux, Styled-component.

GL-Next boilerplate Start your next Next project in seconds A highly scalable, offline-first foundation with the best DX and a focus on performance an

GOLD LION 1 Sep 1, 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 21.4k Jan 5, 2023
React components and hooks for creating VR/AR applications with @react-three/fiber

@react-three/xr React components and hooks for creating VR/AR applications with @react-three/fiber npm install @react-three/xr These demos are real,

Poimandres 1.4k Jan 4, 2023
we are make our components in story book. So if we add some components you can find document and example of useage in storybook.

we are make our components in story book. So if we add some components you can find document and example of useage in storybook.

고스락 6 Aug 12, 2022
Providing accessible components with Web Components & Material You

tiny-material Still on developing, DO NOT use for production environment Run well on Google Chrome, Firefox, Chrome for Android, Microsoft Edge (Chrom

HugePancake 11 Dec 31, 2022
A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router.

A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router. It also includes a theme switcher from light to dark mode.

Franklin Okolie 4 Jun 5, 2022
Simple React Social Network, built with React,Node,Express,MongoDB and Tailwind

Full stack react social network application A mini social network application built with React,Typescript, Redux, Node, Express, MongoDB, and Tailwind

Albenis Kërqeli 31 Dec 19, 2022
Hotel Booking System Built In MERN (MongoDB, ExpressJs, ReactJs, Nodejs) Stack.

Setting Up The Project Please Run The Commands Below to Run the Project git clone https://github.com/yishakdotjs/yishakdotjs-Hotel-Booking-System-Fron

Yishak Abraham 1 Feb 3, 2022
A web-app built with next.js that can automatically install mods into a new Minecraft or MultiMC Launcher Profile using the File System Access API

Mod Installer This is a Next.js App which automatically installs fabric mods on your PC and creates a Minecraft Launcher Profile for you. Idea & Inspi

Emma Böcker 18 Nov 27, 2022
nivo provides a rich set of dataviz components, built on top of the awesome d3 and Reactjs libraries

nivo provides supercharged React components to easily build dataviz apps, it's built on top of d3. Several libraries already exist for React d3 integr

Raphaël Benitte 10.9k Dec 31, 2022
Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

Recoil · Recoil is an experimental set of utilities for state management with React. Please see the website: https://recoiljs.org Installation The Rec

Facebook Experimental 18.2k Jan 8, 2023
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 83.6k Dec 30, 2022
An implementation of GitHub's Primer Design System using React

Primer React A React implementation of GitHub's Primer Design System Documentation Our documentation site lives at primer.style/react. You'll be able

Primer 2.2k Dec 26, 2022