uikit.studio
gallery

Admax

community agent-ready

A dashboard-first admin kit for ad-campaign tooling. Truly flat — no gradients, no shadows: a sunny amber/gold brand, an orange 'spends' accent and candy status colors (green = running/income, red = paused/expense, slate = expired) over a warm off-white canvas with tight radii. Dense dashboard (KPIs + sparklines, spends banner, line/candlestick/donut charts, a sortable spending table), a campaign monitor, a social network grid, pricing and a full components showcase. EN/AR with full RTL, light + dark. Runnable React app.

v1.0.0· MIT· tailwind + tokens· radius 0.75rem· react
Open demo Repo

agent-ready

Build this with your AI agent

Paste this into Claude Code, Cursor or Codex. The agent reads the machine-readable design spec at this URL and reproduces the exact tokens, fonts, radius and components — in your stack.

Build me a website styled exactly like this design: https://uikit.studio/kit/admax — it's agent-ready. Read the spec at https://uikit.studio/kit/admax/llms.txt and match its color tokens (light + dark), fonts, radius and components. Keep full dark mode and a responsive layout.

the spec

llms.txtdesign brief for agentsmanifest.jsontokens · fonts · components

Discoverable site-wide at /llms.txt

live preview

uikit.studio/demos/admax/open

screenshots

Admax landing
landing
Admax dashboard
dashboard
Admax other
other
Admax other
other
Admax other
other

colors

Brand scale, plus the light and dark semantic tokens the kit ships with.

50
100
200
300
400
500
600
700
800
900

light

primary#f59e0b
accent#ff7a45
success#22c55e
danger#f7585b
background#f5f6f8
foreground#1d2231
card#ffffff
muted#eef0f4
border#e9ecf2

dark

background#0f1117
foreground#eef1f7
card#181b23
primary#fbb828
muted#20242e
border#272c38

typography

The quick brown fox

Plus Jakarta Sans

display

The quick brown fox jumps over the lazy dog

Plus Jakarta Sans

sans / body

const ship = () => fast

JetBrains Mono

mono / labels

the prompt

The brief that generated this kit via uikit-standard.

A dashboard-first ads campaign manager — truly flat (no gradients, no shadows), sunny amber/gold brand with an orange 'spends' accent and green/red/slate status colors over a warm off-white canvas. Plus Jakarta Sans + Cairo for Arabic. Ship a dense dashboard (KPI cards with sparklines, an orange/slate spends banner with a diagonal seam, a multi-series line chart, candlestick + donut, a sortable spending data table), a campaign monitor, a social network grid, pricing, and a components showcase. Dashboard is the index page. Full EN/AR + RTL and dark mode.

  1. 1Tokens (tokens.json) → theme.css (amber scale, flat shadows:none, tight radii, type scale, dark block, [dir=rtl] swap) → tailwind-preset.js.
  2. 2i18n: en + ar dictionaries + a provider that flips dir/lang.
  3. 3Design system: cn, Button, Badge, Input, Card, Avatar, Switch, StatCard, Charts, Table, primitives.
  4. 4Sidebar app shell (Main Menu/Others + topbar) → pages: Dashboard (index), Campaign, Social, Pricing, Components.
  5. 5Agent-ready: uikit.json (validated), AGENTS.md, llms.txt, screenshots.

what's inside

components

ButtonBadgeInputCardAvatarSwitchStatCardChartsTablePrimitivesContainer

blocks

SidebarTopbarPageHeaderStatCardSpendingTable

templates

Dashboard/
Campaign/campaign
Social/social
Pricing/pricing
Components/components