The Problem

Front‑end teams that need ready‑made, production‑grade UI layouts spend weeks recreating common dashboards, file managers, and calendar views. Maintaining visual consistency while swapping UI libraries (Radix vs Base UI) adds friction, especially when each template lives in a separate code base.

What This Does

The repository ships three self‑contained Next.js applications:

  • home/ – a showcase site that renders MDX pages (home/src/app/page.mdx) using the shared component library (home/src/components/*).
  • templates/ – 711 files of Radix‑based templates (e.g., templates/files/components/files/content.tsx).
  • templates‑baseui/ – 364 files of the same screens built with shadcn/ui/Base UI (e.g., templates-baseui/calendar/components/calendar/event-sheet.tsx).

Each template follows the standard Next.js file‑system routing (app/ folder) and pulls UI primitives from its local components/ui/*.tsx collection. The next.config.* files in each sub‑project configure the compiler and image handling, while pnpm-lock.yaml guarantees deterministic installs.

How It Is Wired

Execution starts in the Next.js server launched from the package script in the target folder (home/package.json, templates-baseui/bookmarks/package.json, etc.).

  1. Server bootstrap – next.config.mjs (or next.config.ts) is read, then Next loads app/layout.tsx. In home/src/app/layout.tsx the Providers component (home/src/app/providers.tsx) injects the theme toggle (home/src/components/ThemeToggle.tsx) and global CSS (home/src/styles/tailwind.css).
  2. Routing – URL paths map to files under app/. For the calendar template, a request to /calendar resolves to templates-baseui/calendar/app/page.tsx, which composes the UI from components/calendar/*.
  3. Component tree – UI primitives (components/ui/button.tsx, components/ui/dialog.tsx, etc.) are imported directly by page‑level components. The import graph shows 4 circular dependencies, all within the file‑manager modules (templates/files/components/files/content.tsx ↔ file‑list.tsx). These cycles increase the blast radius when refactoring because a change in any member forces recompilation of the others.
  4. State & data – Most templates use a client‑side store (store/calendar-store.ts, store/bookmarks-store.ts) and mock data (mock-data/*.ts). No external APIs or databases are referenced, so the runtime impact is limited to in‑memory state and static assets under public/.
  5. Export points – The only public entry points are the Next.js page files; no library exports exist. Consequently, any modification propagates through the full import graph (≈ 139 edges, 911 modules).

How To Use It

# 1. Clone the repo
git clone https://github.com/moses-y/square-ui.git
cd square-ui

# 2. Install dependencies (pnpm is the lockfile format)
pnpm install

# 3. Run a template (example: the BaseUI calendar)
cd templates-baseui/calendar
pnpm dev   # starts `next dev` as defined in the package.json

Environment: The only required config is the optional .env.example in home/. No secret keys are committed.

To build a production bundle, run pnpm build in the same directory; the output is placed in .next/.

Real‑World Use

A SaaS product can drop the templates-baseui/dashboard-4 folder into its monorepo, replace the mock store with a real API client, and keep the existing UI hierarchy unchanged. The only integration point is the app/layout.tsx where global providers (auth, theme, analytics) are added.

Code Health & Issues

  • High – No test suite – 911 source files, zero test files.
  • High – No CI pipeline – no GitHub Actions or other automation.
  • High – Missing build gate for templates/tasks/components/tasks/charts/burndown-chart.tsx – deployable artifact without validation.
  • Medium – No Dependabot/Renovate config – 26 manifests lack automated updates.
  • Low – Missing repository conventions – no .editorconfig, .gitattributes, or formatter config.

Additional observations: no Dockerfile, no explicit licence beyond the included LICENSE.md, and the import graph contains four circular dependencies and several files with deep nesting (up to 8 levels) and duplicated logic across Radix and Base UI variants.

The Bottom Line

square-ui delivers a rich set of ready‑made Next.js dashboards and UI screens, clearly organized by UI library. It is valuable for rapid prototyping, but the lack of tests, CI, and some structural hygiene (cycles, deep nesting) makes it risky for production without upfront refactoring and test scaffolding. Teams comfortable adding their own quality gates will get the most benefit.