Checkout abElements →

ab-nextjs-core

IMPORTANT: This is a work in progress and subject to major changes until version 1.0.

🌱 A lightweight collection of server & client React components as core abElements (i.e. ab-app-layout, ab-screen-layout, ...) created by Abraham Ukachi, and optimized for Next.js applications 😎.

Tooling

This package targets Next.js 16.3.4 / React 19 (eslint 9 flat config + vitest). Layout shells are Done (LYD-faithful slot API). Consumers must configure Tailwind so its content covers this package (CSS Modules use @apply).

Layout stylesheets are plain CSS modules (no Tailwind @apply) so Next/Turbopack consumers never hit CssSyntaxError expanding package CSS. Theme colors use CSS variables (--color-background, --color-dark-background, falling back to --surface).

Peer: clsx, next@16.3.4, react@^19, react-dom@^19.

Optional: wrap client AbAsideLayout with AbPageProvider / useAbPage for aside open state.

Layout landmarks (0.1.4)

Slot / layout	HTML tag	data-ab-part
AbMainLayout	<main>	main
AbAsideLayout	<aside>	aside
Header wrapper	<header>	header
Footer wrapper	<footer>	footer
Main slots (0.1.6)	<header> / <footer>	main-header / main-bar, scroller main-content
Aside slots (0.1.6)	<header> / <footer>	aside-header / aside-bar, scroller aside-content
Sidebar / bottom bar (via components)	<nav> (AbSidebar / AbNavbar)	sidebar (sidebar)

The client aside opens with the .slideFromRight class from ab-nextjs-animations (import ab-nextjs-animations/slide-from-right/styles.css).

Docs shell panes (0.1.6)

'use client'
import AbAppLayout from 'ab-nextjs-core/ab-app-layout'
import AbMainLayout from 'ab-nextjs-core/ab-main-layout'
import AbAsideLayout from 'ab-nextjs-core/ab-aside-layout'
import { AbPageProvider, useAbAsideToggle } from 'ab-nextjs-core/ab-page-provider'

<AbPageProvider>
  <AbAppLayout
    orientation="vertical"
    variant="panes"            // 🧭 4 breakpoints
    railCollapsed={rail}       // 🧷 icons-only sidebar (tablet+)
    header={<AppBar />}
    sideBar={<nav data-ab-part="sidebar" aria-label="Documentation">…</nav>}
    content={<><AbMainLayout … /><AbAsideLayout … /></>}
    navBar={<nav data-ab-part="bottomBar" aria-label="Primary">…</nav>}
  />
</AbPageProvider>

// 📑 one button for the TOC sheet (<1180px) and the »/« pane toggle (≥1180px)
const { props, expanded } = useAbAsideToggle() // aria-expanded + aria-controls + onClick
<button {...props}>{expanded ? 'Hide page outline' : 'Show page outline'}</button>

Width	Sidebar	Main	Aside	Bottom bar
< 768	hidden	full	full-screen sheet (isAsideOpenOnMobile)	shown (safe-area padding)
768–1179	280px, or the 72px rail	rest	overlay on the right, hidden by default	hidden
1180–1919	joined, hairline divider		in the flow, isAsideOpen	hidden
≥ 1920	gapped panes (--ab-pane-gap, sides + bottom) with radii (--ab-pane-radius) and --ab-pane-shadow			hidden

• 📏 The page never scrolls. Panes are a 100dvh box and <html>/<body> are locked while mounted. Main, aside and sidebar scroll on their own (min-height:0, overscroll-behavior: contain, scrollbar-gutter: stable, safe-area padding). Hand useAbPage().mainScrollElement to useAbScrollSpy({ root }) (hooks 0.1.7). The client and the server layouts both set it (the server ones through a hidden client AbScrollRegistrar); wrap the app in AbPageProvider.

• 📱 Viewport meta for the app: add viewport-fit=cover so env(safe-area-inset-*) is non-zero on notched phones (the panes pad the bars with it), and interactive-widget=resizes-content so the on-screen keyboard shrinks the 100dvh box instead of sliding the locked page. In Next.js:

  export const viewport = { width: 'device-width', initialScale: 1, viewportFit: 'cover', interactiveWidget: 'resizes-content' }

• 🫥 Empty header / footer slots render nothing and measure 0px. Use mainHeader / mainBar and asideHeader / asideBar; header / footer / chrome are deprecated aliases.

• The rail animates its width over 200ms and snaps under reduced motion. Without JS the sidebar stays expanded (@media (scripting: none)).

• The aside uses the slideFromRight keyframe from ab-nextjs-animations (load its slide-from-right/styles.css) at 240ms. Under reduced motion there's no slide and the open/close timers are 0. Escape closes the sheet.

• Tokens come from ab-nextjs-theme ≥ 0.3.4 (--ab-pane-gap, --ab-pane-radius, --ab-divider-hairline), with fallbacks.

Getting Started

Installation

npm

npm i ab-nextjs-core 

pnpm

pnpm install ab-nextjs-core 

---

Core Server Components

A list of all the supported core server components and their current status:

No.	Name	File	Status
1	AbAppLayout	server/ab-app-layout/index.tsx	Done
2	AbScreenLayout	server/ab-screen-layout/index.tsx	Done
3	AbMainLayout	server/ab-main-layout/index.tsx	Done
4	AbAsideLayout	server/ab-aside-layout/index.tsx	Done

Core Client Components

A list of all the supported core client components and their current status:

No.	Name	File	Status
1	AbAppLayout	ab-app-layout/index.tsx	Done
2	AbScreenLayout	ab-screen-layout/index.tsx	Done
3	AbMainLayout	ab-main-layout/index.tsx	Done
4	AbAsideLayout	ab-aside-layout/index.tsx	Done

NOTE:

Imports

// catalog
import { supportedCore } from 'ab-nextjs-core'

// server layouts
import AbAppLayout from 'ab-nextjs-core/server/ab-app-layout'
import AbScreenLayout from 'ab-nextjs-core/server/ab-screen-layout'
import AbMainLayout from 'ab-nextjs-core/server/ab-main-layout'
import AbAsideLayout from 'ab-nextjs-core/server/ab-aside-layout'

// client layouts
import AbAppLayout from 'ab-nextjs-core/ab-app-layout'
import AbScreenLayout from 'ab-nextjs-core/ab-screen-layout'
import AbMainLayout from 'ab-nextjs-core/ab-main-layout'
import AbAsideLayout from 'ab-nextjs-core/ab-aside-layout'
import { AbPageProvider, useAbPage } from 'ab-nextjs-core/ab-page-provider'

NOTE: AbAppLayout does not bake in sidebar/navbar/i18n — pass sideBar / navBar slots from the consumer. Content rule: content ?? children.

Learn More abElements

To learn more about abElements, take a look at the following resources:

• abElements Documentation - learn about abElements features and API.
• abElements Animations - learn about animations in abElements.
• abElements Core - learn about core in abElements.
• abElements Theme - learn about theme in abElements.
• abElements Icons - learn about icons in abElements.
• abElements Components - learn about components in abElements.
• abElements Fonts - learn about fonts in abElements.
• abElements Hooks - learn about hooks in abElements.

You can check out the abElements GitHub repository for more details.

License

This ab-nextjs-core project is MIT Licensed ;)