/ TPX CSS Framework
v1.0 — CSS ~28KB + JS ~4KB
TPX CSS Framework
Beautiful, token-efficient CSS framework for AI agents and developers.
Ship faster. Save tokens. Look great.
Why TPX?
Token Efficient
Short class names save AI agents 50–80% tokens on styling compared to Tailwind. No custom CSS needed.
Beautiful Defaults
Custom checkboxes, radios, toggles, file uploads, accordions, modals — all styled out of the box.
Under 32KB total
CSS ~28KB + JS ~4KB. CDN-delivered, no build step. Dark mode, responsive, animations included.
Quick Start
<!-- CSS only — no JS needed --> <link rel="stylesheet" href="https://toolpix.dev/css/tpx.css"> <!-- With interactive components (accordion, modal, tabs, toast, dropdown) --> <link rel="stylesheet" href="https://toolpix.dev/css/tpx.css"> <script src="https://toolpix.dev/css/tpx.js" defer></script> <!-- Dark mode --> <html class="tpx-dark">
CSS-only vs JS Required
Most components work with CSS only. Add tpx.js only when you need interactive behavior.
CSS only — no JS needed
✓ Buttons (all variants & sizes)
✓ Forms (input, select, textarea, checkbox, radio, toggle, range)
✓ Cards (header, body, footer, hover)
✓ Alerts & Badges & Chips
✓ Spinner & Skeleton & Progress bar
✓ Table (static)
✓ Navbar & Breadcrumb
✓ Avatars & Lists
✓ Tooltips (CSS hover)
✓ File upload (visual)
✓ Dark mode via class
✓ Grid & Layout utilities
Requires tpx.js (~4KB)
⚡Accordion — open/close animation
⚡Dropdown — toggle + close on outside click
⚡Modal — open via data-tpx-modal, close via ESC
⚡Tabs — data-tpx-tab panel switching
⚡Table sort — click header to sort (asc/desc)
⚡Toast — tpxToast(msg, type, duration)
⚡Copy to clipboard — data-tpx-copy button
⚡Password toggle — data-tpx-toggle show/hide
⚡Popover — click-triggered popover
⚡File upload drag/drop — auto drag/drop wiring
⚡Dark mode persist — tpxToggleDark() + localStorage
⚡Smooth scroll — anchor links with #
JavaScript API
Global functions and data-attribute API exposed by tpx.js.
// Toast notification
tpxToast("Message saved!", "success"); // success | danger | warning | info
tpxToast("Error occurred", "danger", 5000); // custom duration (ms)
// Dark mode toggle
tpxToggleDark(); // toggles + saves to localStorage
// Auto-applies saved theme on page load
// Modal (open/close via data attributes)
// <button data-tpx-modal="my-modal">Open</button>
// <div id="my-modal" class="tpx-modal-overlay" style="display:none">...</div>
// <button class="tpx-modal-close">Close</button>
// Copy to clipboard
// <button data-tpx-copy="element-id">Copy</button>
// <code id="element-id">text to copy</code>
// Password show/hide
// <input id="pwd" type="password">
// <button data-tpx-toggle="pwd">Show</button>
// Accordion — add class="tpx-accordion-multi" for multi-open
// Dropdown — data-tpx-dropdown on trigger
// Tabs — data-tpx-tab="panel-id" on tab, data-tpx-panel="panel-id" on content
// Table sort — add tpx-table-sortable class to <table>
// File upload — drag/drop auto-wired for .tpx-file-upload elementsLive Demo
All examples are rendered in an iframe with tpx.css + tpx.js loaded. Tabs marked JS use interactive features.
Cheatsheet
/* Layout */ tpx-container tpx-flex tpx-flex-col tpx-flex-center tpx-flex-between
/* Grid */ tpx-grid-{2|3|4|5} tpx-gap-{1-8}
/* Typography */ tpx-h{1-6} tpx-text-{xs|sm|lg|xl|2xl} tpx-text-{bold|muted|center}
/* Buttons */ tpx-btn tpx-btn-{primary|secondary|success|danger|warning|info|outline|ghost|link} tpx-btn-{xs|sm|lg|xl|block}
/* Forms */ tpx-input tpx-select tpx-textarea tpx-checkbox tpx-radio tpx-toggle tpx-range
/* Cards */ tpx-card > tpx-card-{header|body|footer} tpx-card-hover tpx-card-flat
/* Components */ tpx-badge tpx-alert tpx-table tpx-modal tpx-spinner tpx-skeleton tpx-tooltip tpx-chip
/* Navigation */ tpx-navbar tpx-nav tpx-tabs-pill tpx-breadcrumb
/* Spacing */ tpx-m-{0-8} tpx-p-{0-8} tpx-mt/mb/ml/mr-{0-8} tpx-gap-{1-8}
/* Borders */ tpx-rounded-{sm|lg|xl|full} tpx-border tpx-shadow-{xs|md|lg|xl}
/* Colors */ tpx-bg-{primary|surface|alt|success|danger} tpx-text-{primary|success|danger|muted}
/* Responsive */ tpx-sm: tpx-md: tpx-lg: tpx-xl: (mobile-first, grids auto-stack)
/* File Upload */ tpx-file-upload > tpx-file-upload-icon + tpx-file-upload-text + input[type=file]
/* Interactive */ tpx-accordion tpx-dropdown tpx-modal-overlay tpx-tabs tpx-toast tpx-popover
/* Dark Mode */ <html class="tpx-dark"> | tpxToggleDark() | localStorage auto-savedSystem Prompt for AI Agents
Add this to your AI agent's system prompt to get TPX-styled HTML output without wasting tokens on class descriptions.
Use TPX CSS framework (https://toolpix.dev/css/tpx.css) for all styling.
All classes prefixed with "tpx-". Do NOT write custom CSS.
Components: tpx-btn-{primary|secondary|success|danger|outline|ghost}, tpx-card,
tpx-input, tpx-select, tpx-checkbox, tpx-radio, tpx-toggle, tpx-table,
tpx-badge, tpx-alert, tpx-modal, tpx-spinner, tpx-accordion, tpx-dropdown
Layout: tpx-container, tpx-grid-{2|3|4}, tpx-flex, tpx-flex-center, tpx-gap-{1-6}
Spacing: tpx-m/p-{0-6}, tpx-mt/mb-{0-6}
Dark mode: <html class="tpx-dark">
For interactive components (modal, accordion, dropdown, tabs, toast):
also add: <script src="https://toolpix.dev/css/tpx.js" defer></script>
Full reference: https://toolpix.dev/css/tpx.help.jsOr fetch the full reference programmatically: GET /css/tpx.help.js
Build UI via API
Use the /api/v1/build-ui endpoint to generate complete HTML pages using TPX. Requires an API key.
POST /api/v1/build-ui
x-api-key: your-key
{
"description": "A login form with email, password, and remember me checkbox",
"theme": "dark"
}
// Returns: { html: "<!DOCTYPE html>..." }