React Rebass

React Rebass is a front-end framework that was designed keeping react in mind. It is a themeable primitive UI component library for React. React Rebass is built with a Styled System. Any theme object created for Styled System should work with Rebass. Rebass gives us flexible components by which we can easily create components according to users’ choices. It is the best choice to create prototypes and UI without needing to invest time in building a custom design system up-front.

Install: You can install Rebass with the help of npm or yarn by following commands:

npm i rebass
// or
yarn add rebass

Now, you can easily import components from Rebass in your application like –

import { Text } from 'rebass';

By default, the Rebass component does not include themes in them. You can add a theme to your application with a ThemeProvider component and by providing a theme in context.

npm i @rebass/preset emotion-theming

Now, you can use ThemeProvider component as:

import { ThemeProvider } from 'emotion-theming';
import theme from '@rebass/preset';

Let’s understand its works using an example.

Step 1: Create a React app.

npx create-react-app appname

Step 2: change directory to appname.

cd appname

Project Structure: Now, the app structure will look like this:

 

Change the following code in the App.js file:

import React from 'react'
import { Text } from 'rebass';

function App() {
  return (
    <>
      <Text
        fontSize={[3, 4, 5]}
        fontWeight='bold'
        color='primary'>
        Text
      </Text>
    </>
  );
};

export default App;

Step to run the application: Open the terminal and type the following command.

npm start

Output:

 

Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above