Atrium

How it's made

1. 01

   One codebase, two modes

   The app reads its Base44 app ID at build time. On the showcase, signed-out visitors browse a fixed sample studio read-only, and anyone who signs in can view their own copy as an admin, a member or a visitor; in a buyer's copy everything lives in the database behind real sign-in.

2. 02

   A private copy for every demo account

   Anyone who signs in on the showcase gets their own workspace, saved as one record only their account can read. The JSON is spread across up to 24 text fields of 19,000 characters, gzipped if bigger, and every save is checked against a revision number so a stale tab can't overwrite newer work.

3. 03

   Access the database enforces

   In a live copy each page, widget, note, task, event, table row and profile is its own record, and typing is merged into one save. Pages set to everyone, members or admins map to row-level security rules, so a page someone can't see never reaches their browser. Sign-in covers email and password with a code to confirm new accounts, Google, invites and roles.

4. 04

   Six page types, fourteen widgets

   Dashboards sit on a four-column grid with five widget sizes and drag to reorder. Notes have folders, pins and Tiptap rich text with checklists, boards drag cards between columns, tables take nine column types, and embeds rewrite YouTube, Vimeo, Loom, Figma, Google and Spotify links into ones a frame can show.

5. 05

   A theme engine

   Every appearance setting becomes CSS variables on the page: 11 accent colours or any hex (lifted for dark mode in OKLCH), 10 wallpaper choices, glass transparency and blur, corners from 4 to 32 px, five type presets fetched from Google Fonts on first use, text size, density and light, dark or auto. The tab title and icon follow the brand.

6. 06

   Set up in three steps

   A first-run wizard asks for a name, a look and a starting point, repainting the page with each choice. Four templates (Studio, Home services, Personal and Blank) build full workspaces with dates relative to today, and a workspace exports and imports as JSON.

7. 07

   Made for phones and keyboards

   Phones get a floating tab bar with four pages and More, and a long press to rearrange a dashboard. Cmd or Ctrl+K opens a fuzzy search over pages and settings, uploads shrink in the browser (512 px avatars, 800 px logos, 2,400 px wallpapers), and rich text is cleaned against an allow-list before it is shown.

In this kit

• src/

  Full source. The complete site as its own project, ready to run.

• base44/

• index.html

• package.json

• package-lock.json

• vite.config.js

• tailwind.config.js

• postcss.config.js

• eslint.config.js

• README.md

  Start here. What's inside and how to run it.

• CHANGES.md

  Changelog. What changed in each version of the kit.

• HOW-IT-WAS-MADE.md

  How it was made. The build step by step, and a recipe to make your own.

• ADAPT.md

  Adaptation prompt. Fits the kit to your client's brand in an AI builder.

• RESKIN.md

  Re-skin guide. Colors, type, copy and media, changed file by file.

• PROVENANCE.md

  Provenance. Where every model, texture and image came from.

• THIRD_PARTY.md

  Open-source credits. Every library and font inside, with its license.

• LICENSE.md

  Commercial license. Unlimited client projects, one person per license, no resale.

See a real zip, opened

Specs

Stack

Vite 8.3 · React 18.3 · React Router 6.30 · Tailwind CSS 3.4 · Framer Motion 11.18 · Tiptap 3.32 · dnd kit 6.3 · @hello-pangea/dnd 17.0 · Recharts 2.15 · Lucide icons 0.475 · Base44 SDK 0.8 (auth / database / file uploads) · JavaScript (JSX) · Google Fonts (Geist / Instrument Serif; Nunito / Bricolage Grotesque / Geist Mono on demand)

File size

0.3 MB

Load time

944 ms (sample workspace on screen; desktop Chrome, cold cache, median of 3)

Browser

No WebGL needed. Needs a Base44 app behind it for sign-in, data and uploads. The demo was tested in headless Chrome at 1440 x 900 and 390 x 844 (every page of the sample and every Settings section, no page errors, no sideways scroll); a live copy's access rules were checked against a real Base44 database. Safari, Firefox, real phones and a signed-in admin inviting and removing people on a live copy haven't been tested yet.

Released

Oct 2026

Version

1.0.1

From download to client site

1. 01

   Buy it, or get it with a plan

   Buy this kit on its own, or get every kit in the collection with a plan.

2. 02

   Download the zip

   It shows up in your library as soon as payment goes through. Up to 10 downloads a day, and each link works for 10 minutes.

3. 03

   Run it

   Unzip it, run npm install, then npm run dev to open the site on your machine. You need Node.js 20 or newer. The README says how to build it for any host.

   $npm install && npm run devCopyCopied
4. 04

   Make it your client's

   Hand ADAPT.md to your AI builder (Claude, ChatGPT or Cursor) with the client's brief, or follow RESKIN.md to change colors, type, copy and media by hand. HOW-IT-WAS-MADE.md shows how to build their product the same way.

Unlimited client projects, one person per license, no resale. Read the license