v0.2.0 · 47 packages · npm + shadcn registry

Pages that never fight the scroll.

Accessible React components, plus layouts that own the scroll and templates that fix what repeats. Your page only fills the slots.

Get started See layouts

pnpm add @glob-ui/all

A real dashboard, running here

This is the dashboard template from the docs, live in its own preview frame.

Toggle the anatomy: blue is fixed by the template, amber comes in as props, green is the one region that scrolls.

Three layers, one rule

A page only fills the slots.

Layout

Owns structure and scroll. Renders no content.

Template

Fixes the brand, the navigation and the frame. Takes props for the rest.

Page

Only content. No heights, no overflow, no scroll decisions.

export default function OrdersPage() {
  return (
    <DashboardTemplate
      title="Orders"
      activeHref="/orders"
      actions={<Button>New order</Button>}
    >
      <OrdersTable />
    </DashboardTemplate>
  )
}

export default function OrdersPage() {  return (    <DashboardTemplate      title="Orders"      activeHref="/orders"      actions={<Button>New order</Button>}    >      <OrdersTable />    </DashboardTemplate>  )}

The page above is the whole page. The template decides the frame, the layout decides the scroll, and the page sets only what changes.

Read the methodology

Built for real screens

Every tile is a live example from the docs.

DataTable

Sorting, search, pagination and row selection. The table owns its scroll.


Ana A.	Design	Admin	2019
Benito B.	Platform	Editor	2020
Canción C.	Growth	Viewer	2021
Dara D.	Support	Admin	2022
Eli E.	Design	Editor	2023
Fátima F.	Platform	Viewer	2024
Gus G.	Growth	Admin	2025
Hana H.	Support	Editor	2019
Ivo I.	Design	Viewer	2020
Jun J.	Platform	Admin	2021