Every demo in Vexell is built from these blocks. Use them standalone or compose your own — same tokens, same conventions. Plus 12 AI-native primitives no other template ships.
AI primitives
The defensive UI buyers ship in their AI app
Twelve components that solve the surfaces every AI product needs and most templates skip — chain-of-thought traces, citation cards with confidence, jailbreak guardrails, rate-limit cards, ghost-text completions. Wired into every demo, not bolted on.
StreamingResponse
The AI answer card. Annotated paragraphs show source + confidence. Render full or stream with rAF + reduced-motion fallback.
Quorum · clause analysis2.1s · 3 sources
The proposed limitation of liability fails the playbook test for SaaS deals over $50K ARR. Counterparty asks for 1× fees / 12 months; the standard for this matter pattern caps at 2× fees / 24 months.
sourcedPlaybook · LoL standards94%
Material-breach carve-outs are present and consistent with the playbook. Indemnification is narrower than the standard — recommend expanding to include unauthorized data export and IP claims.
sourcedClosed deals (last 3)78%
2 of 2 paragraphs
ChatComposer
Three layouts. Model selector, context chips, reasoning toggle, token preview, suggestion chips, ⏎ submit / ⇧⏎ newline.
ReasoningTrace
Collapsible chain-of-thought. Step list with kind tags + duration. Matches the o1 / extended-thinking pattern.
Ghost text (Cursor-style with Tab badge) or banner (Notion-AI-style with Accept / Dismiss).
Subject suggestion
Tab to accept · Esc to dismiss
"Quick follow-up on the pilot — 42% reply rate, want to walk through?"
Picked because the prior thread closed on a soft "let's schedule"; subject keeps the metric you led with.
Pull from your CRM and enrich with intent signals.
02
Send sequence
Personalized first-touch in your tone of voice.
03
Handle reply
Stride drafts the next message inline.
04
Book meeting
Calendly link inserted, CRM auto-updated.
1Identify
2Sequence
3Reply
4Book
Tabs
Underline (default) and pills variants.
Eight vertical demos, two stacks, one design system. Lighthouse 100 across the board.
Tooltip
Pure CSS, no JSMore info
Pagination
Page 4 of 12
Breadcrumb
SearchBox
⌘K
DropdownMenu
StatStrip
Connected-cells KPI row with brand inset shadow — used by Axiom benchmarks + Halo metrics.
1.2M
tokens / second
Median throughput across 240 production cohorts.
94.7%
accuracy on HumanEval
+3.2 pts vs the runner-up. Reproduce yours in < 10 min.
23ms
to first token
p50 across CDN edges. p99 stays under 80ms.
ProgressRing
35%68%92%
FileDropzone
Drop files here
or click to choose files
Combobox
ColorPicker
TimelineActivity
Maya shipped v2.5 to production
DataTable, ChangelogEntry and BlogPostCard now live in the components library.
Lin pushed 3 commits to feat/two-column-layout
Sam joined the workspace
Invited as Editor by Maya.
Daily quota at 78%
Halo handled 1,247 conversations today across 6 workspaces.
BeforeAfterSlider
Interactive reveal with range input. Range covers the frame so it's keyboard-accessible by default. Use for refactor before/after, raw vs polished video frames.
Drag the slider to compare a stock presenter against a branded clone.
DEFAULT_AVATAR_03
MAYA · BRIGHTLINE
StockBranded
VideoTestimonial
Testimonial card with poster + play overlay. Behaves like a button — parent decides whether to open a modal, navigate, or swap inline.
“Vexell cut our launch by three weeks. The AI Coding demo dropped straight into our marketing site — we just swapped brand and copy.”
Maya Chen
CTO, Brightline AI
CommandBar
Page header pattern for dashboards. Breadcrumb + title on the left, optional middle slot (search), action buttons on the right. Drops into AppShell's topbar slot.
90-day uptime grid (any N-day window). Cell color drives by status level; native browser tooltip on hover.
API
api.vexell.com
99.94%
90 days agoLast 90 daysToday
Organisms
Drop-in views
Whole conversion-critical surfaces composed from atoms and molecules. Hook them up to your auth or backend with one prop — they own their loading and success states.
Tell us a bit about what you need. We reply in a business day.
NewsletterSignup — card
The weekly Vexell digest
One email each Friday. Best AI launches, design patterns and the fresh stuff that just shipped.
NewsletterSignup — inline
Stay in the loop
Used in footers and inline strips where the heading is already implied by context.
PricingTable
Simple, transparent pricing
Pick a plan that fits where you are. Upgrade or downgrade any time.
Starter
For solo devs trying things out.
$0/mo
Up to 100 requests / day
Community Discord support
All AI models
Most popular
Pro
For teams shipping AI in production.
$29/mo
Unlimited requests
Priority email support
Privacy mode (on-device)
Team workspaces
Enterprise
For orgs with compliance requirements.
$0/mo
SSO + SAML
SOC 2 Type II + HIPAA
Self-hosted option
Dedicated CSM
FAQ
Frequently asked questions
Can I cancel any time?
Yes. Cancel from the workspace settings, no email or call required. You keep access until the end of the billing period.
Do you train on my data?
Never. Your prompts and outputs are encrypted at rest and in flight, and are never used to train shared models.
Which models are available?
Claude Opus 4.x, Sonnet 4.x, Haiku 4.5 by default. Bring your own key for OpenAI, Mistral and Llama through the integrations panel.
Is there a self-hosted option?
Yes — Enterprise plans include a Helm chart for K8s with VPC peering and customer-managed keys.
How long is onboarding?
Most teams are live within 4 minutes — paste your API key, install the SDK, and you’re shipping.
TestimonialWall
Loved by teams shipping AI in production
A few of the 2,400+ companies running on Vexell.
“Vexell cut our launch by three weeks. The AI Coding demo dropped straight into our marketing site, and the design system absorbed our brand tokens in one afternoon.”
MC
Maya Chen
CTO · Brightline AI
“Best $79 we’ve spent this quarter. Lighthouse 100 out of the box.”
LP
Lin Park
Founder · Helio
“Privacy mode was the dealbreaker for our enterprise customers. Halo handles 70% of tickets without breaking SOC 2.”
SD
Sam Diaz
Head of Support · Foundry
“Stride booked us 47 meetings the first week. Real outbound, no “hi {firstName}” spam.”
AL
Ana López
VP Sales · Northstar
“The dual-stack is genius. HTML for the landing, Next for the dashboard, same tokens.”
JK
Jordan Kim
Lead Engineer · Pulse
“Axiom replaced two of our seats. Refactor mode is uncanny — it actually understands our codebase.”
RW
Rae Williams
Engineering Manager · Forge
CTABanner
Ready to ship?
Get the bundle. Launch this week.
Both the HTML and Next.js editions, eight verticals, every demo and primitive. One purchase, lifetime updates.
FixedRSC serialization on Tag — moved onClick to a client island.
DataTable
Plan
Status
Brightline AI
Enterprise
$18,400
active
Northstar Sales
Enterprise
$12,300
active
Helio
Pro
$2,900
active
Foundry Support
Pro
$2,900
trial
Pulse Engineering
Pro
$2,900
churned
Forge
Starter
$0
active
TwoColumnLayout
Get started
Installation
Install the Vexell template bundle and start shipping AI-vertical landing pages in days, not months.
npx degit vexell/template my-app
Includes 87 components across atoms, molecules, organisms, AI-native primitives, dashboard patterns, a charts library, an AI app starter spine, onboarding patterns, a public status page kit, a live theme customizer and GDPR consent — same Tailwind tokens, two stack flavors (HTML+Vite and Next.js 15), Lighthouse 100 out of the box.
Footer
Overlays
Modal, Drawer, Toast — built on native primitives so focus trap, ESC and aria semantics come for free.
Composed example — testimonial card
MC
Maya Chen
CTO, Brightline
Verified
“Vexell cut our launch by three weeks. The AI Coding demo dropped straight into our marketing site.”
ComparisonTable
Feature matrix vs competitors. Cells accept boolean (check / cross), null (dash), or text for partial answers. Highlight one column.
Feature comparison across products
Feature
VexellAI primitives
Sandboxgeneric SaaS
Tailwind UIkit, not template
AI-native primitives
Streaming response card
Yes
No
No
Citation card with confidence
Yes
No
No
Jailbreak / guardrail UI
Yes
No
No
Production quality
Lighthouse 100 baseline
Yes
95+
Yes
Two stack flavors
Yes
No
Yes
PricingCalculator
Interactive sliders + steppers + toggles. Pure compute callback returns price + breakdown — re-runs on every change.
12 seats
25,000 req
Off
+$99/mo on Team and Pro plans.
MetricGrid
KPI dashboard panel — card per metric with value, delta, sparkline, optional detail line. Different from StatStrip's flat connected-cells layout.
Requests
4,231
today
+12%
4 of 5 SLAs in green
Success rate
99.2
%
0%
p99 latency 1.4s
Monthly spend
$487
/ $1,200
40% used
17 days into the cycle
Queue depth
8
jobs
-23%
Cleared faster than usual
AppShell
Dashboard layout primitive — collapsible sidebar + sticky topbar + main slot. Compose with CommandBar in the topbar and any of the Wave 1-4 components in the main slot.
by maya@brightline.aiIP 203.0.113.18 · 3rd attempt
Revoked API key
2026-05-04 09:30 UTC
by systemon sk-...X41P (CI server) · expired
RolePermissionMatrix
Role × permission toggle grid. Click cells to grant or revoke; locked cells (e.g. owner) render a padlock and refuse changes.
Role and permission matrix
Permission
Owner1 user
Admin2 users
Editor5 users
Viewer12 users
Workspace
View workspace
Invite members
Manage billing
WelcomeChecklist
Day-1 getting-started checklist. Three states (done / current / pending), inline progress bar, optional dismiss. Server-rendered — compute steps from the buyer's backend.
Get started
Five steps and you ship.
2 of 5 complete
40%
Verify your email
Done
Name your workspace
Done
3
Connect your stack
~3 min
GitHub, Slack, Linear — pick the ones your team lives in.
Invite a teammate
~30s
Reviews land twice as fast.
Ship a first agent
~2 min
Pick a starter template; live in 90 seconds.
SetupWizard
Multi-step setup form. Component owns step navigation + progress strip; parent owns form state and passes canAdvance per step.
Workspace
Pick a name; you can change it later.
FeatureTour
Overlay walkthrough. Spotlight ring on the target element + tooltip with prev/next/skip. Esc + arrow keys supported. Click Start tour to try.
Card 1
Dashboard overview
Where the agent runs land.
Card 2
Connect a tool
One-click integrations.
Card 3
Ship your first run
Pick a template, hit go.
NotificationCenter
Bell + dropdown panel for the topbar. Read/unread state, mark-all-read, kind icons, click-outside + Esc to close. Drop into AppShell or any header.
IncidentTimeline
Public status page incident feed. Latest open by default; older incidents collapse into native details. Per-post role tag (investigating / identified / update / resolved).
Elevated latency on AI engines
May 1, 2026 · 09:14 UTC
Affected: AI engines · GPT-4o
Resolved · 38 min
resolved
GPT-4o vendor recovered. p99 back below 1.4s. Added a circuit breaker for next time.
May 1, 09:52 UTC
identified
Vendor reports degraded performance on GPT-4o in us-east. Routing affected requests to Claude Sonnet fallback.
May 1, 09:31 UTC
investigating
p99 latency on /v1/runs spiked from 1.2s → 4.8s in the last 5 minutes.
May 1, 09:14 UTC
Slow dashboard loads
Apr 22, 2026 · 11:47 UTC
Affected: Dashboard
Resolved · 21 min
resolved
Cleared. Stuck connection to Postgres replicas; cycled the pool.
Apr 22, 12:08 UTC
ThemeCustomizer
Live theme token editor. Drag the hue slider, every component in the preview retunes. Exports a paste-ready @theme block.
New
Workspace overview
Today
KPI cards and a sparkline using the brand ramp. Hue shift propagates to every shade.
Requests
4,231
+12%
Success
99.2%
stable
Spend
$487
Sample · grounded answer2.1s · 3 sources
Your brand color flows through every component — buttons, badges, links, focus rings, sparklines, dot indicators. Tailwind v4 oklch tokens make this work without rebuilding the bundle.
%22%2F%3E%3C%2Fsvg%3E)
%22%2F%3E%3C%2Fsvg%3E)