Requests
4,231
today+12%
Atomic design
Atoms, molecules and organisms ready to drop in.
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
94%
78%
62%
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 analysis
2.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%
ChatComposer
Three layouts. Model selector, context chips, reasoning toggle, token preview, suggestion chips, ⏎ submit / ⇧⏎ newline.
pricing.md
Series B · Q3 ICP
2,480 / 8,000
ReasoningTrace
Collapsible chain-of-thought. Step list with kind tags + duration.
Thought for 4.1s
-
Parsed the redline request
plan423msCounterparty asked for 1× fees / 12 months; matter pattern requires 2× / 24.
-
Pulled the playbook
search1,240msLoaded LoL standards from internal RFC.
-
Drafted the redline
write2,457msThree suggested edits with rationale per clause.
ToolUseTimeline
Vertical timeline with status (pending / running / success / error). Current-step highlight ring.
-
Search
Read inbox
287msmaya@brightline.ai · 3 prior
Found pilot summary thread
-
Tool
Look up Crunchbase
runningCRO hires (last 90d)
-
Write
Draft reply
pending
CitationCard
Three layouts (inline / block / grid). Four kinds (kb / case-law / web / doc). Confidence pill auto-mapped to color.
LoL standards · M&A 2026
Section 4.2
Limitation of liability for SaaS deals over $50K ARR caps at 2× fees / 24 months.
Brightline v. Acme (2024)
9th Cir. · p. 14
Indemnification clause must include IP infringement and unauthorized export.
Crunchbase · CRO hires
crunchbase.com
14 Series B SaaS companies hired a CRO in the last 90 days.
ContextBadge
Six kinds (file / doc / thread / user / tag / mention) with default icons.
pricing.md412 lines
Q3 launch.md
Re: Pilot follow-up3 prior
Maya ChenBrightline AI
warm · Q3 ICP
@partner-review
GuardrailNotice
Six kinds (pii / compliance / jailbreak / content / rate-limit / verified). Notice + inline layouts.
Caught
Prompt injection blocked
Inbound message tried to override the system prompt. Agent stayed in character.
Output policy passed
· response cleared safety + brand-voice filters
TokenMeter
Three layouts (inline / bar / card). softLimit + hardLimit thresholds shift the bar color.
Session tokens
5,200 / 8,000$0.016+33% vs last
6,400 / 8,000 · soft limit reached
RateLimitIndicator
Three layouts (dot / pill / card). warnAt + blockAt thresholds drive tone (ok / warn / block).
API requests
75%188 / 250 · 60s window
resets in 23s
42 / 120 · 18d
rendering
ModelPicker
Two layouts (inline popover / grid catalog). Per-model capability tags, tier label, cost / latency chips.
InlineAISuggestion
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.
PromptHistory
Sidebar or stacked layout. Searchable + starrable. Replay / copy hover actions.
Dashboard patterns
See the live charts in the dashboard demo
Open the settings demo
Open the onboarding demo
Open the status page demo
The AI app starter, not just the marketing site
Four primitives composed into a working dashboard at /dashboard.html — AppShell (collapsible sidebar + topbar), CommandBar (page header), FilterRail (collapsible filter groups), MetricGrid (KPI cards with sparklines).
CommandBar
Page header — breadcrumb + title left, optional middle slot, action buttons right.
MetricGrid
KPI dashboard panel — value, delta, sparkline, optional detail line per cell.
Success rate
99.2
%0%
Spend
$487
/ $1,20040% used
Queue
8
jobs-23%
AppShell + FilterRail
Too tall to embed inline — open the live demo.
Open the dashboard demo
AppShell composes the collapsible sidebar, sticky topbar and main slot. Working surface lives at /dashboard.html with FilterRail + DataTable wired in.
Charts library
LineChart + BarChart + DonutChart + Heatmap. Server-rendered SVG, currentColor for theming, no external deps.
LineChart
BarChart
DonutChart
AI app starter spine
IntegrationGrid + ApiKeyManager + RolePermissionMatrix + AuditLogList. Composed inside the dashboard AppShell at /dashboard/settings.html.
IntegrationGrid
GitHub
Slack
Gmail
PagerDutySoon
ApiKeyManager
Production server
sk-...A47Kreadwrite2m ago
CI · GitHub Actions
sk-...P19Rread38m ago
RolePermissionMatrix
| Permission | Owner | Admin | Editor |
|---|---|---|---|
| View | |||
| Manage members | |||
| Manage billing |
AuditLogList
Rotated API key
Maya · 14:32 UTC
Failed login (3rd attempt)
maya@brightline.ai · 11:04 UTC
Revoked API key (expired)
system · 09:30 UTC
Onboarding patterns
WelcomeChecklist + SetupWizard + ProgressMilestone + FeatureTour. Composed inside the dashboard AppShell at /dashboard/onboarding.html.
WelcomeChecklist
2 of 5 complete
40%- Verify email
- Name workspace
- 3Connect your stack~3 min
- Invite teammate
ProgressMilestone
-
Start
-
2
Connect
-
Run
-
Ship
SetupWizard
- Workspace
- 2Integrations
- 3Invite
Pick the tools your team lives in.
GitHub
Slack
Linear
FeatureTour
Card 1 — dashboard overview
Quick tour · 1/3
Dashboard overview
Where the agent runs land. Most teams pin this tab.
Public status page
StatusBadge + UptimeGrid + IncidentTimeline + NotificationCenter. Live demo at /status.html.
StatusBadge
Operational
Degraded
Major outage
AI engines
GPT-4o, Claude Sonnet 4.6
Degraded performance
UptimeGrid
API · 30 days
99.94%30d agoToday
IncidentTimeline
Elevated latency on AI engines
May 1, 2026 · 09:14 UTC
Resolved · 38 min
Elevated latency on AI engines
May 1, 2026 · 09:14 UTC
Resolved · 38 min
- resolved
GPT-4o vendor recovered. Added a circuit breaker.
- investigating
p99 latency on /v1/runs spiked from 1.2s → 4.8s.
NotificationCenter
Notifications3 unread
Run failed: PHI redaction
Pulse · 2m ago
Maya merged payments-refactor
Maya · 18m ago
API key rotated
system · Yesterday
Atoms
Single-purpose primitives
The smallest interactive units. They don’t know about your app — they only know how to look right and behave accessibly.
Button
Primary trigger. Six variants, five sizes.
Badge
Status / category indicator. Seven variants, two sizes.
Variants
AI-powered
Coming soon
Beta
Live
Pending
Failed
New
Sizes
AI
AI-powered
Input
Three sizes. Composes label, helper / error, leading / trailing icons.
We will never share your email.
Password must be at least 8 characters.
Avatar
Five sizes. Falls back to initials, then to a generic icon.
Sizes
MC
MC
MC
MC
MC
Sources
MC
With status
MC
LP
SD
Stacked
MC
LP
SD
AL
+3
Card
Surface container. Four variants.
Default
Bordered surface on the page background.
Subtle
Tinted, no border.
Elevated
Lifts on hover. For clickable grids.
Gradient
Brand → accent border. One per page.
Form atoms
Label, Checkbox, Switch, Spinner, Divider.
Label
Checkbox
Switch
Spinner
Divider
or continue with
Skeleton
Async-content placeholder. Three shapes.
Rect
Circle
Text
Kbd
Keyboard shortcut display.
Press ⌘ K to search.
Tiny: Tab
ProgressBar
Three sizes, four tones, indeterminate.
Sizes (brand, 64%)
Tones
Tag
User-actionable chip with optional dismiss.
Filter: All
design-system
shipped
in-review
blocked
Radio
Pair with same `name` to form a group.
Slider
Native range with brand thumb.
Textarea
Multi-line input with label/helper/error.
Optional. Markdown supported.
Reason must be at least 20 characters.
OTPInput
Auto-advance, backspace-rewind, paste-fill.
✓ Code complete:
Molecules
Composed patterns
Atoms wired together to do something useful — an alert with action, a password field with a visibility toggle, an empty state with a CTA.
AlertBanner — info
New: bring-your-own-key support
Connect your own OpenAI or Anthropic key from the workspace settings page.
Read changelogAlertBanner — error
Could not save changes
Your session expired while editing. Please sign back in and try again.
PasswordField
At least 12 characters.
SocialButton
EmptyState
No conversations yet
Halo has no incoming chats to show. Once your widget is live on your site, conversations will appear here.
FeatureCard
Multi-line completions
Tab to accept whole functions, not single lines.
Beta
Privacy mode
On-device 8B model. Your code never leaves the laptop.
Codebase context
Refactors that know your types and conventions.
StatCard
Resolution rate
70%
+12 pts
Across 240 production cohorts.
Reply lag
4m 32s
-2m 11s
p50, business hours.
Active workspaces
2,431
+103%
LogoCloud
Trusted by 4,231 teams shipping AI
Acme
Nimbus
Forge
Vector
Helio
Pulse
Stepper
Cards layout (default) and horizontal pill row.
-
01
Identify leads
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.
- Identify
- Sequence
- Reply
- Book
Tabs
Underline (default) and pills variants.
Eight vertical demos, two stacks, one design system. Lighthouse 100 across the board.
From $0 for solo devs to $29/mo for teams. Enterprise self-host available.
v2.3 — Halo demo + atomic design taxonomy. v2.2 — Stride analytics. v2.1 — Axiom refactor mode.
Tooltip
Pure CSS, no JS
More info
Pagination
Page of
Breadcrumb
SearchBox
⌘
K
DropdownMenu
StatStrip
Connected-cells KPI row with brand inset shadow.
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
FileDropzone
Drop files here
or click to choose files
Combobox
- No results.
ColorPicker
Enter a valid 3 or 6 digit hex (e.g. #7C3AED).
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.
Organisms
Back to sign in
Save 20%
MC
LP
SD
AL
JK
RW
Drop-in views
Whole conversion-critical surfaces composed from atoms and molecules. They own their loading and success states.
SignIn
Sign in to your account
Welcome back. Enter your credentials to continue.
or
Don’t have an account? Sign up
SignUp
ForgotPassword
Reset your password
Enter your email and we’ll send a link to reset your password.
Check your inbox
If the email matches an account, a reset link is on its way. The link expires in 30 minutes.
ContactForm
Talk to our team
Tell us a bit about what you need. We reply in a business day.
Thanks — we got it.
A team member will reply to your inbox within one business day.
NewsletterSignup — card
The weekly Vexell digest
One email each Friday. Best AI launches, design patterns and the fresh stuff that just shipped.
You’re on the list
Look for the first Friday digest in your inbox.
PricingTable
Simple, transparent pricing
Pick a plan that fits where you are. Upgrade or downgrade any time.
Starter
For solo devs trying things out.
$
- Up to 100 requests / day
- Community Discord support
- All AI models
Most popular
Pro
For teams shipping AI in production.
$
- Unlimited requests
- Priority email support
- Privacy mode (on-device)
- Team workspaces
Enterprise
For orgs with compliance requirements.
Custom
- 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.”
Maya Chen
CTO · Brightline AI
“Best $79 we’ve spent this quarter. Lighthouse 100 out of the box.”
Lin Park
Founder · Helio
“Privacy mode was the dealbreaker for our enterprise customers. Halo handles 70% of tickets without breaking SOC 2.”
Sam Diaz
Head of Support · Foundry
“Stride booked us 47 meetings the first week. Real outbound, no ‘hi {{firstName}}’ spam.”
Ana López
VP Sales · Northstar
“The dual-stack is genius. HTML for the landing, Next for the dashboard, same tokens.”
Jordan Kim
Lead Engineer · Pulse
“Axiom replaced two of our seats. Refactor mode is uncanny — it actually understands our codebase.”
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.
BannerStrip
v2.4 just shipped — atomic design taxonomy + 8 new components.
Read changelogMaintenance window Saturday, 2am UTC. Expect 5 min of downtime.
Status pagePricingComparison
Compare every feature
| Features |
Starter Free |
Pro $29 / mo |
Enterprise Custom |
|---|---|---|---|
| Core | |||
| Requests / day | 100 | Unlimited | Unlimited |
| All AI models | |||
| Privacy mode (on-device) | |||
| Team | |||
| Team workspaces | |||
| Seats | 1 | 25 | Unlimited |
| Compliance | |||
| SOC 2 Type II | |||
| SSO + SAML | |||
CommandPalette
Press ⌘ K or click below.
BlogPostCard
Card / horizontal / compact layouts.
ChangelogEntry
v2.5
Final organisms wave
DataTable, ChangelogEntry and BlogPostCard land. The DS now ships 13 atoms, 17 molecules and 16 organisms.
- New DataTable with internal sort state and aria-sort wiring.
- New BlogPostCard in card / horizontal / compact layouts.
- Improved All form atoms (Radio, Slider, Textarea) wired into PaymentForm and SignUp flows.
- Faster Showcase /components page now lazy-loads heavy organisms behind the fold.
v2.4
- New CommandPalette, BannerStrip, PricingComparison.
- Fixed RSC serialization on Tag — moved onClick to a client island.
DataTable
Click a header to sort. Single-click cycles asc → desc → off.
| Plan | Status | ||
|---|---|---|---|
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 <dialog> for free a11y.
Composed example — testimonial card
MC
Verified
Maya Chen
CTO, Brightline
“Vexell cut our launch by three weeks. The AI Coding demo dropped straight into our marketing site.”
Read case study