Onboard EU collectors
Components
263 components. Every one of them live.
Not screenshots — live components, composed into the kind of surfaces you'd actually ship. The same accessible, themeable primitives that build this entire site.
Layout
Stacks, cards, and dividers — the scaffolding every screen is built on.
Stack · Card · Divider
Stack
Flex rows and columns with token gaps.
Card
Surfaces with elevation, accent, and glow.
Divider
Labeled separators between regions.
Content region
Primary column
Grows to fill available width.
Aside
Wraps below on narrow screens.
Forms & inputs
Fields, selects, comboboxes, and toggles — accessible and themeable, the same primitives that build this site.
Selection
SNMP
Numeric & range
Sliders, ranges, spinners, dials, and ratings for precise input.
Slider
Range
Number spinner
Dial
72
Rating
Date, time & color
Pickers for dates, times, and color — keyboard-accessible and localizable.
Color picker
Tables & lists
Data tables, trees, and lists that scale from a handful of rows to thousands.
Data table
Network inventory
Node | State | Team | Health |
|---|---|---|---|
| core-router-01 | active | NOC | Healthy |
| edge-fw-04 | degraded | Security | Watch |
| dist-switch-12 | active | NOC | Healthy |
| collector-eu-2 | offline | Platform | Down |
| lb-public-03 | active | Platform | Healthy |
Tree
- Network
- Core
- core-router-01
- core-router-02
- Edge
List
- CollectionHealthy
- CorrelationHealthy
- AutomationActive
- Service deskOpen
Stats & meters
Statistics, sparklines, meters, and progress — the language of a dashboard.
Sample dashboard
Service overview
Active sources
1,284
+48
Open events
37
-12
Auto-resolved
92
+6
Event volume
Pipeline
- Collection46
- Correlation28
- Automation18
- Idle8
Charts
Eighty-two chart types, themed with the rest of your UI.
Line
| Category | Series 1 |
|---|---|
| Jan | 820 |
| Feb | 932 |
| Mar | 901 |
| Apr | 1290 |
| May | 1330 |
| Jun | 1450 |
Area
| Category | Series 1 |
|---|---|
| Jan | 120 |
| Feb | 200 |
| Mar | 150 |
| Apr | 280 |
| May | 270 |
| Jun | 360 |
Donut
- Resolved48
- In progress27
- Queued15
- Escalated10
| Slice | Value | Share |
|---|---|---|
| Resolved | 48 | 48.0% |
| In progress | 27 | 27.0% |
| Queued | 15 | 15.0% |
| Escalated | 10 | 10.0% |
Radar
| Axis | Sample |
|---|---|
| Coverage | 88 |
| Latency | 74 |
| Accuracy | 92 |
| Throughput | 81 |
| Resilience | 79 |
Cards & disclosure
Cards and accordions to group, frame, and reveal content.
Outlined
A quiet, bordered surface.
Accent
A top accent bar in the brand tone.
Elevated · glow
Lifts and glows on hover.
A complete, AI-native UI framework — components, engines, and a token theme system — that this entire site runs on.
Vue, React, and Web Components, all rendering from one shared set of behavior engines.
Yes — one token system re-skins the whole library, light and dark, including the charts.
Overlays
Dialogs, drawers, popovers, and tooltips — focus-trapped and portal-safe.
Click to open
Feedback
Alerts, badges, tags, skeletons, and toasts to keep users informed.
Deployed
Your changes are live across all regions.
Heads up
Two collectors are approaching capacity.
Action needed
A federation link is unreachable.
Badges:
primarysuccesswarningdangerTags:
ActiveStreamingDegradedToasts:
Skeleton (loading state):
Typography & code
Headings, prose, code blocks, key hints, and a live terminal.
Display heading
A section heading
Body prose in the muted tone, sized with tokens. Inline elements like a themed link and a key hint CtrlK sit naturally in the flow.
vue
<CButton variant="primary" tone="success">
Save changes
</CButton>npx carapace add button
CButton ready - auto-imported in Nuxt
npm run dev
Local: http://localhost:3000
Planning
Kanban boards and timelines for work that moves.
Kanban
Backlog
2Tune correlation rules
In progress
1/3Federation health checks
Done
2Service-desk integration
AI summaries
Timeline
Incident activity
- 09:15Fault detectedInterface down on core-02
- 09:22Correlated to root causeUpstream link flap identified
- 09:31Workflow triggeredAutomated remediation started
- 09:45Service restoredInterface back online, alarms cleared
Media & identity
Images, avatars, and feature icons for rich, branded surfaces.
Image
Avatars
ACMWPNSR
Feature icons
Fast
Secure
Accessible
Themeable
Identity
Avatars, badges, and tags that label people, status, and things at a glance — composed into a team roster.
Team members
ALGHATKJ+1
AL
Ada Lovelace
ada@example.com
OwnerAdmin
GH
Grace Hopper
grace@example.com
EditorMember
AT
Alan Turing
alan@example.com
EditorMember
KJ
Katherine Johnson
kj@example.com
ViewerMember
LT
Linus Torvalds
linus@example.com
ViewerGuest
Selection
Filters and assignment controls — segmented views, switches, checkboxes, multi-select, combobox, and tag input.
Account settings
Text inputs
A profile & security settings form — textarea, password, phone, OTP, masked, cron, mentions, and emoji.
Profile & security
Everything below is a Carapace text-input primitive — validation, masking, and reveal handled for you.
Reveal toggle and live strength meter.
Expression:
0 3 * * 1Next 5 run(s):
- 2026-10-26 03:00 UTC
- 2026-11-02 03:00 UTC
- 2026-11-09 03:00 UTC
- 2026-11-16 03:00 UTC
- 2026-11-23 03:00 UTC
Plain-language preview of the cron.
Type @ to mention a teammate, or add a reaction.
Page sections
Marketing-grade page scaffolding — headers, CTAs, a full hero, and a pricing table.
CPageHeader
Projects
12 active · 3 due this week
A dashboard page title row — title, subtitle, and an icon.
CPricingTable
Simple, honest pricing
Start free. Upgrade when your team grows.
Starter
For a small team finding its footing.
$0/mo
- Up to 3 projects
- Unlimited tasks
- Mobile apps
Best value
Team
For growing teams that ship weekly.
$12/user/mo
- Unlimited projects
- Automations
- Timeline & board views
- Priority support
Business
For orgs that need control at scale.
Custom
- SSO & SCIM
- Audit log
- Advanced permissions
- Dedicated CSM
A full pricing grid — plans, features, and a featured tier.
Commerce
A storefront moment — a product configurator and a live cart with pricing, variants, and quantities.
Merino crew sweater
Ethically sourced, 100% merino wool
SizeM
ColorSand
Your cart
2 itemsMerino crew sweater
$128.00
Ribbed knit beanie
$48.00
Subtotal
$176.00Discount
SAVE20Total
$140.80Developer tools
The primitives that build developer UIs — a structural diff and live component playgrounds.
CTreeDiff
Structural diff of a deploy config — added, removed, and changed keys.
CDemoPreview
Render a source string live — the docs' inline example runner.
Theming
The token-editing controls behind the theme system — swatches, color/shadow/font/easing fields, contrast, and the picker.
Theme studio
Every control writes a design token — the preview updates live.
AgThe quick brown fox jumps over 0123
The quick brown foxThe quick brown fox
13.35:1
AAA- Normal text (AA)
- Normal text (AAA)
- Large text (AA)
- Large text (AAA)
- UI components (AA)
Preview
Buttons and surfaces pick up the tokens above.
AI & chat
The conversational surface — messages, composer, reasoning, tool calls, and AI-readable insight cards.
You
Which channel drove the most signups last month?
Reasoningthought for 1.4s
The user wants the top acquisition channel by signups for the previous month. I'll query the analytics warehouse for signups grouped by channel, then rank and summarize the leader with its share.
Assistant
Organic search led with 1,840 signups (39%), ahead of Referral (1,210) and Paid (960). Organic also grew the fastest — up 22% month-over-month.
Summary
Layout utilities
Fine-grain layout helpers — scroll areas, watermarks, and aspect-ratio containers.
Release notes
Draft2.4.0
New board view with swimlanes and saved filters.
2.3.2
Faster search indexing; large workspaces load ~40% quicker.
2.3.1
Fixed a drag-and-drop glitch on touch devices.
2.3.0
Dark mode for the mobile app; per-project themes.
2.2.4
Accessibility: full keyboard nav across the timeline.
2.2.0
Automations — trigger actions when a card changes status.
Launch video
16 : 9 — scales with the column
CResponsive keeps a fixed aspect ratio at any width — embeds and thumbnails never jump on load.
Other
Remaining input and feedback primitives — radio groups, date-time picker, and the toaster.
Notifications
Choose how and when this workspace reaches you.
Desktop OS
An in-browser windowing layer — a draggable-window desktop, dock, start menu, and status bar.
Web desktop — 5 apps
v2.4 · signed in as you
Files & drawing
File browser, upload dropzone, signature capture, and the native spatial map canvas — all sandboxed.
Project files
Files
- brand
- logo.svg
4.0 KB
- palette.json
640 B
- logo.svg
- photos
- hero.jpg
277 KB
- team.jpg
191 KB
- hero.jpg
Upload assets
Drop files hereor to choose
.svg,.json,.jpg,.png
Drag & drop — sandboxed, no upload endpoint wired.
Approve the plan
Client-only signature capture — sign directly on the canvas.
Venue floor plan
Native canvas · no third-party tilesThe complete catalog
268 components. Every category, covered.
Grouped the way you'd reach for them. Hover any component to see exactly what it does.
Tables & lists
Data at any scale — virtualized grids, trees, pivots and spreadsheets that stay fast.
Media
Images, video, galleries and scanners, each tuned for crisp loading and zoom.
Navigation
Menus, tabs, breadcrumbs and rails that move people through an app without a wrong turn.
Typography & code
Headings, prose and syntax-aware code — from a one-line label to a full editor.
Overlays
Dialogs, drawers, menus and tooltips that float precisely and trap focus correctly.
Selection
Every way to pick one or many — comboboxes, multi-selects, transfers and switches.
Stats & charts
KPI tiles, sparklines and stat cards that make a number land at a glance.
Feedback
Alerts, toasts, progress and skeletons that keep people informed, never guessing.
Layout
The structural spine — shells, grids, splits and stacks that compose any screen.
Forms
Composable forms with fields, groups and validation that scale to complex schemas.
Date, time & color
Calendars, pickers and swatches with range, locale and keyboard support built in.
Layout utilities
Fine-grain spacing, dividers and helpers for the last mile of a layout.
Theming
Live theme controls — pickers, swatches and contrast tools wired to the token system.
AI & chat
A native AI surface — assistant, chat and context wiring, opt-in by design.
Text inputs
Fields, textareas and masked inputs with validation and affordances handled.
Numeric & range
Sliders, steppers, ratings and gauges for precise numeric input and display.
Other
Specialist primitives that round out the catalog.
Buttons & actions
Buttons, icon buttons and action groups with every state and size covered.
Desktop OS
A windowing layer — draggable windows, docks and panels for app-in-app UIs.
Page sections
Marketing-grade sections — heroes, CTAs and feature grids, ready to assemble.
Cards & disclosure
Cards, accordions and disclosure that group and reveal content cleanly.
Game engine
Primitives from the plastron engine — real-time canvas, sprites and scenes.
Files & drawing
Upload, annotate and draw — from a dropzone to a full canvas surface.
Planning
Boards, timelines and schedulers for work that moves through stages.
Identity
Avatars, tags and badges that label people, status and things at a glance.
Charts
A native, tree-shakable chart suite — no heavyweight dependency required.
Developer tools
Inspectors, code and regex tools for building developer-facing UIs.
Commerce
Pricing, carts and checkout building blocks for product and billing flows.
See a component you need?
Carapace ships these as a real product. Talk to us about adopting it, or about a build.