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:
Â
