React Rebass Introduction

React Rebass is a front-end framework that was designed keeping react in mind. React Rebass is built with a Styled System. It is the best choice to create prototypes and UI without needing to invest time in building a custom design system up-front. React Rebass provides us with flexible components.

Installation: 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, Rebass component does not include a theme 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';

Creating react application:

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.

Example 1: In this example, we are creating a basic example of Rebass.

import React from "react";
import { Image } from 'rebass';

function App() {
    return (
        <div>
            <Image
                src="
https://media.geeksforgeeks.org/wp-content/uploads/20220310185855/ReactApp1-300x185.png"
                sx={{
                    width: ['100%', '50%'],
                    borderRadius: 8,
                }}
            />
        </div>
    )
}

export default App;

Output:

Example 2: In this example, we are creating a basic input input field using Rebass.

import React from "react";
import { Label, Input } from '@rebass/forms'
import { Box } from 'rebass'

function App() {
    return (
        <div style={{padding: "200px"}}>
            <Box>
                <Label htmlFor='email'>Email</Label>
                <Input
                    id='email'
                    name='email'
                    type='email'
                    placeholder='[email protected]'
                />
            </Box>
        </div>
    )
}

export default App;

Output: