Getting Started

Install and render your first section

Learn how to install @webbycrown/layout-suite, wire it into a Next.js application, and render your first hero section in less than five minutes.

Prerequisites

To follow along you’ll need:

• A Next.js project (App Router or Pages Router).
• Node.js 16+ and npm.
• Basic familiarity with React components.

If you don’t have a project yet, you can create one with:

npx create-next-app@latest my-site

Installation

Install the Package

npmyarn

npm install @webbycrown/layout-suite

Basic usage in a Next.js page

Once installed, you can import and render a section directly inside a Next.js route. The example below shows a minimal hero section using the App Router:

import { HeroSection } from "@webbycrown/layout-suite";

export default function Page() {
  return <HeroSection />;
}

This renders a production-ready hero with sensible defaults. You can pass props to customize headlines, subcopy, primary actions, and background treatments.

Tip: you can compose multiple sections on the same page to build a full layout without writing layout boilerplate.