docs
Setups
Next JS

Next.js Setup

Create a Next.js App

Open your terminal and run the following command to create a new Next.js app:

npx create-next-app@latest

Navigate to Your Project Directory

After creating your project, navigate to your project directory:

cd your-project-name

Add CSS Variables

Copy and replace the following CSS code into your app/globals.css file to apply global variables to your project:

globals.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%, 28%;
  --secondary: 267, 46%, 66%;
  --accent: 267, 51%, 44%;
  --muted: 267 20% 35%;
  --text-forground: 255 100% 100%;
  --border: 267, 25%, 50%;
  --danger: 0, 84.2%, 60.2%;
  --success: 134, 51%, 36%;
 
  --radius: 100px;
 
  /* 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%;
  --text-forground: 255 100% 100%;
  --border: 267, 15%, 20%;
  --danger: 0, 62.8%, 30.6%;
  --success: 130, 46%, 30%;
}
 
.dark {
  background-color: hsl(var(--background));
  color: hsl(var(--text));
}
 
::selection {
  background-color: hsl(var(--secondary));
  color: hsl(var(--accent));
}
 
/* foucs outline */
button:focus,
a:focus,
input:focus,
textarea:focus {
  outline: 2px solid hsl(var(--accent));
  outline-offset: 3px;
}

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

Create the Sectioner Components Folder

Create the sectioner folder under components in your project.

Alternatively:

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

mkdir -p components/sectioner
  • All your Sectioner components will reside here.
  • You can change the folder structure if you prefer.

Folder Structure

      • globals.css
          • sectioner-component.jsx
          • sectioner-component.module.css
    • pages
    • package.json
    • next.config.js
    • 💡

    Note: It’s recommended to create a separate folder for each section or component within the sectioner directory for better organization and maintainability.

    Next Steps

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

    Getting StartedVite + React