Library
Components
Every component below is built on Radix primitives and styled with the Neoncite & Neon system. Copy-paste or install via the CLI.
Primitives
17Machined button with neon variants and pressed state.
Cluster Status
3 nodes online · uptime 99.98%
Neoncite machined card with optional rim-light header.
Pill badge in 6 neon variants for status and labels.
Section A
Section B
Hairline divider with horizontal and vertical orientations.
Circular avatar with rim glow and machined fallback.
Segmented tabs with neon-active indicator.
Collapsible sections with neon-pink active triggers.
Mono uppercase breadcrumb trail with chevron separators.
Keeps media and panels locked to a consistent aspect ratio.
Accessible disclosure primitive for expandable content.
Custom scroll container with native scrolling behavior.
Keyboard-accessible resizable application panel layouts.
Keyboard-friendly Embla carousel with Neoncite controls.
Machined keyboard-key hint for shortcuts and command surfaces.
Run neoncite add button
const ready = true ship(ready)
Inline and block code typography helpers.
Accessible icon-only Button wrapper requiring a label.
Visually joins adjacent buttons into one control cluster.
Form
21Recessed input with rim lighting and neon focus ring.
Recessed multi-line input with neon focus state.
Pressed/unpressed action control with a machined neon-active state.
Recessed checkbox with neon-pink checked state.
Hardware slider with track ticks and a metallic thumb.
Mono uppercase form label tuned to Neoncite tokens.
Recessed radios with neon-pink indicator.
Dropdown select with neon focus and machined surface.
Hardware toggle switch with neon-pink active state.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Date picker calendar built on react-day-picker.
Hostname is required.
Validated forms with react-hook-form and zod schema.
Single or multi-select group of pressed-state controls.
Segmented one-time-password input with accessible caret behavior.
Searchable select composed from Command and Popover.
Single-date picker composed from Calendar and Popover.
Composed input shell with leading and trailing addons.
Recessed search field with icon and clear affordance.
Password field with accessible visibility toggle.
Numeric input with bounded increment and decrement controls.
Dark-native time input with Neoncite focus treatment.
Keyboard and drag-and-drop file selection surface.
Data
05| Status | Region | ||
|---|---|---|---|
| node-alpha | Online | 14% | us-east-1 |
| node-bravo | Online | 42% | eu-west-1 |
| node-charlie | Degraded | 91% | ap-south-1 |
| node-delta | Online | 23% | us-west-2 |
| node-echo | Offline | 0% | eu-central-1 |
Sortable, filterable, paginated table built on TanStack Table.
Page navigation primitives with active and ellipsis states.
Chronological event timeline with optional icons and timestamps.
- Region
- fra-1
- Runtime
- node-22
Compact label/value definition list for technical metadata.
Expandable hierarchical tree for files, nodes and resources.
Overlay
12Modal dialog with scan-line backdrop and machined panel.
Compact uppercase tooltip with hairline border.
Floating panel anchored to a trigger.
Side panel that slides from any edge of the viewport.
Keyboard-friendly menu with checkbox/radio items.
Rich hover-triggered preview floating panel.
Keyboard-driven command palette built on cmdk.
Confirmation dialog for destructive or consequential actions.
Right-click menu with checkbox, radio and nested items.
Desktop-style application menu bar with keyboard navigation.
Accessible navigation with animated viewport content.
Touch-friendly bottom drawer built on Vaul.
Feedback
10Recessed progress bar with neon spectrum fill.
Shimmering placeholder for loading states.
Disk pressure
Status callout in 5 neon variants for inline feedback.
Toast notifications themed for Neoncite (success/error/warn/info).
No telemetry yet
Connect a runtime to begin streaming metrics.
Structured empty-state surface with icon, guidance and action slots.
Reduced-motion-aware loading spinner.
Blocking loading surface with live-region semantics.
Clipboard action with transient copied feedback.
Compact labeled status dot with semantic neon states.
- Configure
- 2Validate
- 3Deploy
Multi-step progress indicator with complete and active states.
Neoncite Signature
19Neoncite signature: rim-lit metric card with delta.
Data visualization component built on recharts.
✓ resolved dependencies ✓ component installed
Neoncite signature terminal shell with prompt and output primitives.
Structured live-log surface with severity, timestamp and source fields.
Hardware-inspired semantic status LED with optional pulse.
Endpoint connection state with latency and signal treatment.
Dense technical panel and row primitives for runtime telemetry.
Circular meter for bounded technical values.
Metric card with a lightweight inline SVG trend line.
Threshold-aware resource utilization meter.
Signal-style latency readout with threshold coloring.
Aggregated system checks with per-service health states.
Build/deploy state card with environment, commit and duration metadata.
Vertical runtime activity feed with status markers and timestamps.
Server/node surface with health and resource utilization.
Corner-bracket technical panel for dense command-center interfaces.
Severity-coded diagnostics for checks, warnings and failures.
Compact command/search trigger with keyboard shortcut hints.
Responsive composition grid for KPI and telemetry cards.