React Setup

Create a React App

Open your terminal and run the following command to create a new React app:

npx create-react-app my-app

Navigate to Your Project Directory

After creating your project, navigate to your project directory:

cd my-app

Required Dependencies for some sections

react-router-dom ↗

Configure Alias

Create jsconfig.json in your root directory.
Add this to your jsconfig.json for importing from src/components/ folder with components/ alias.

jsconfig.js

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

Add CSS Variables

Copy these CSS variables into your src/index.css. If you have existing variables, just add the remaining ones. Feel free to modify any color as needed.

these are the default colors.

This code defines the global color variables and imports the ‘Poppins’ font for consistent styling across your application.

index.css

/* importing poppins font */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
 
/* removing extra margin and padding */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
/* css variables used in components */
:root {
  --text: 267, 30%, 20%;
  --background: 263, 40%, 96%;
  --primary: 266, 40%, 38%;
  --secondary: 267, 46%, 51%;
  --accent: 267, 51%, 44%;
  --muted: 267 20% 35%;
  --border: 267, 25%, 50%;
  --danger: 0, 84.2%, 60.2%;
  --success: 134, 51%, 36%;
  --white: 255, 100%, 100%;
  --black: 255, 0%, 0%;
 
  --radius: 100px;
  --radius-full: 9999px;
 
  --duration-fast: 250ms;
  --duration-slow: 700ms;
 
  /* default font */
  --ff-poppins: "Poppins", Tahoma, Geneva, Verdana, sans-serif;
  font-family: var(--ff-poppins);
}
 
/* css variables for dark mode */
.dark {
  --text: 267, 27%, 94%;
  --background: 266, 37%, 4%;
  --primary: 266, 40%, 72%;
  --secondary: 267, 46%, 34%;
  --accent: 267, 51%, 56%;
  --muted: 267 7% 35%;
  --border: 267, 15%, 30%;
  --danger: 0, 62.8%, 30.6%;
  --success: 130, 46%, 30%;
}
 
:root {
  background-color: hsl(var(--background));
  color: hsl(var(--text));
}
 
.dark {
  background-color: hsl(var(--background));
  color: hsl(var(--text));
}
 
/* foucs outline */
button:focus,
a:focus,
input:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 1px 3px hsl(var(--secondary), 0.5);
}
 
.disabled {
  pointer-events: none;
  opacity: 0.6; /* Makes it look faded */
}

Create the Sectioner Components Folder

Create the sectioner folder under src/components in your project.

Alternatively:

Open your project root directory and run the following command to create sectioner folder:

mkdir -p src/components/sectioner

All your Sectioner components will reside here.
You can change the folder structure if you prefer.

Folder structure

package-lock.json
package.json

Next Steps

Now, you can start adding your Sectioner UI components into the sectioner folder. Follow the individual component documentation for further integration instructions.

Vite + React Navbar