Skip to content
Related Articles

Related Articles

React Rebass Introduction

View Discussion
Improve Article
Save Article
  • Last Updated : 06 May, 2022
View Discussion
Improve Article
Save Article

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.

App.js




import React from "react";
import { Image } from 'rebass';
  
function App() {
    return (
        <div>
            <Image
                src="
                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.

App.js




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='hello@example.com'
                />
            </Box>
        </div>
    )
}
  
export default App;


Output:

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!