Playground

A team-chat dashboard built end-to-end with @plyxui/*. Fork it on CodeSandbox, edit live, ship.

The fastest way to see plyxui is to play with it. The playground is a self-contained Vite app — one App.tsx, no monorepo — that wires the published packages into a cream + peach + yellow chat dashboard with Montserrat typography. CodeSandbox installs the packages from npm when it boots; forks are yours.

Open it

Open in StackBlitz → ·  Source: github.com/vineethpawar/plyxui-demo

StackBlitz boots a real WebContainer in your browser, runs npm install and vite dev, and serves the result. No login required.

If you'd rather work in CodeSandbox, open the GitHub import — that flow needs a CodeSandbox account (it spins up a Devbox) but gets you the same Vite environment.

Native — same demo, on a phone

The dashboard ports to React Native with no code rewrite. Metro picks the .native.tsx files in every @plyxui/* package automatically.

Open in Expo Snack → ·  Source: github.com/vineethpawar/plyxui-demo-native

Snack boots a web preview in-page and shows a QR code; scan it with Expo Go on an iPhone or Android to see the real native rendering on your phone.

The phone-shape version trades the sidebar for a header + a Tabs primitive switching between Chats and Scheduler — same primitives, different layout because that's what phones want.

What's inside

A team-chat dashboard: sidebar with main menu + Quick Add card, top bar with title + date + search + theme toggle + avatar, then three columns — a messages list, an active chat thread, and a scheduler reminder rail. Mobile collapses the sidebar into a Drawer and drops the scheduler column below 1100 px.

The whole thing is one file: src/App.tsx. Around 400 lines, every import from @plyxui/*.

Packages the web demo touches

Native demo

The React Native version lives in vineethpawar/plyxui-demo-native. It's the same design language re-shaped for a phone — sidebar becomes a header, three columns becomes a Tabs swap between Chats and Scheduler.

App.tsx is the entry — it wraps the tree in <ThemeProvider> and mounts <DashboardScreen /> inside the provider, so every useTheme() call (in Header, StatRow, ChatRow, etc.) sits under the wrapper. The brand palette + spacing/radius/font-family scales are in src/theme.ts as plain TypeScript constants — no React context needed for design tokens, just direct imports.

Brand extension instead of a fork

The cream / peach / yellow palette isn't built into plyxui — and it doesn't have to be. The demo registers a brand extension against plyxui's token table in src/main.tsx:

import { registerColorTokens } from "@plyxui/core";

registerColorTokens({
  cream:        { light: "#FAF3EC", dark: "#161412" },
  peach:        { light: "#F8C9C0", dark: "#5B3A35" },
  yellow:       { light: "#F6E27A", dark: "#806F2C" },
  bubbleMine:   { light: "#F6CBC1", dark: "#5B3A35" },
  bubbleTheirs: { light: "#F2EBE3", dark: "#2A2522" },
  // ...
});

Pair with a TS module augmentation in src/tokens.d.ts and your editor autocompletes colors.peach, colors.yellow, the lot. Same useTheme() hook, same colors.X access pattern — the only thing that changes is the brand.

Typography

Montserrat ships preloaded via the Google Fonts <link> in index.html:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" as="style"
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" />
<link rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" />

A single :root { font-family: "Montserrat", …; } in the page style is enough — every plyxui component inherits font-family so the override takes effect everywhere with no per-component prop drilling.

Run it locally

git clone https://github.com/vineethpawar/plyxui-demo
cd plyxui-demo
npm install
npm run dev
# vite serves on http://localhost:5173

Tweak it

Things worth trying first:

• Change cream to your own warm background in main.tsx and watch every surface follow.
• Swap the message bubble shape — borderTopLeftRadius / borderTopRightRadius in Bubble — to match your house style.
• Wire the chat input to a real transport. The useToast call is a placeholder.
• Replace the scheduler illustrations with proper SVGs from your design system.

If something you'd want isn't in the playground, open an issue — chances are it's a doc gap, not a missing primitive.