Layout and Navigation

Structural primitives for sections, shells, timelines, side rails, and chrome around CyberCN content.

These components shape the page before the content primitives take over. They are lightweight wrappers, but they encode the recurring shell patterns used across the project.

Section

Install

npx shadcn@latest add @cybercn/cyber-section

Import

import { Section } from "@/components/ui/cybercn/section";
import { Heading } from "@/components/ui/cybercn/heading";
import { Paragraph } from "@/components/ui/cybercn/paragraph";

Usage

<Section withSide className="space-y-6">
  <Heading Tag="h2">Zone Overview</Heading>
  <Paragraph>Every docs section can carry the framed side treatment.</Paragraph>
</Section>

Zone Overview

Every docs section can carry the framed side treatment.

Prop	Type	Default	Notes
`withSide`	`boolean`	`false`	Adds the bilateral frame style.
`className`	`string`	-	Extends layout utilities.
native section props	`React.HTMLAttributes<HTMLElement>`	-	Standard DOM section attributes.

Install

npx shadcn@latest add @cybercn/cyber-header

Import

import { Header } from "@/components/ui/cybercn/header";
import { Heading } from "@/components/ui/cybercn/heading";
import Link from "next/link";

Header is a sticky top-level shell with backdrop blur and border styling.

CYBERCN

Docs

Prop	Type	Default	Notes
`className`	`string`	-	Use for flex layout, height, padding, and responsive alignment.
`children`	`React.ReactNode`	required	Render your brand, nav, toggles, and external links.

Install

npx shadcn@latest add @cybercn/cyber-footer

Import

import { Footer } from "@/components/ui/cybercn/footer";

Footer provides a simple high-contrast closing band that flips foreground and background values across light and dark themes.

Prop	Type	Default	Notes
`className`	`string`	-	Commonly used for padding and centering.
`children`	`React.ReactNode`	required	Usually copyright text, utility links, or status notes.

Aside and Aside.Item

Install

npx shadcn@latest add @cybercn/cyber-aside

Import

import { Aside } from "@/components/ui/cybercn/aside";
import { Skull } from "lucide-react";

Usage

<Aside>
  <Aside.Item href="#danger-zone" icon={Skull}>
    Danger Zone
  </Aside.Item>
</Aside>

`Aside` props

Prop	Type	Default	Notes
`children`	`React.ReactNode`	required	Should usually be `Aside.Item` nodes.

`Aside.Item` props

Prop	Type	Default	Notes
`href`	`string`	required	Rendered on a native anchor element.
`icon`	`LucideIcon`	-	Optional icon shown before the label.
`className`	`string`	-	Applied to the list item wrapper.
`children`	`React.ReactNode`	required	The visible label.

Aside.Item currently uses a plain <a> rather than next/link, which makes it a good fit for in-page anchors, contact rails, and external URLs.

Steps and Step

Install

npx shadcn@latest add @cybercn/cyber-steps

Import

import { Step, Steps } from "@/components/ui/cybercn/steps";

Usage

<Steps>
  <Step>Intake</Step>
  <Step>Validation</Step>
  <Step status="current">Deployment</Step>
  <Step>Archive</Step>
</Steps>

Intake
Validation
Deployment
Archive

`Steps` props

Prop	Type	Default	Notes
`className`	`string`	-	Useful when the timeline needs width or spacing overrides.
native `ul` props	`React.HTMLAttributes<HTMLUListElement>`	-	Supports IDs, roles, and event handlers.

`Step` props

Prop	Type	Default	Notes
`status`	`"default" \| "current"`	`"default"`	Highlights the active step.
`className`	`string`	-	Extend individual markers or labels.
`children`	`React.ReactNode`	required	The step label content.

Layout and Navigation

Zone Overview

On this page