Skip to content

Production Components

Reusable UI distilled from shipping products — pricing plans, usage meters, score gauges, timelines, combobox, promo banners, and more. Every class is token-driven, so all of these adapt to dark mode automatically.

Icon tile

Rounded container for a single icon, color-tinted to context. Sizes and tint variants.

<span class="n-icon-tile n-icon-tile-success" aria-hidden="true">✓</span> <span class="n-icon-tile n-icon-tile-lg n-icon-tile-round n-icon-tile-info">i</span>

Status indicator

Dot plus label for live, lifecycle, or health state. Optional pulse.

System connected Pending Failed Offline
<span class="n-status n-status-online n-status-pulse"> <span class="n-status-dot" aria-hidden="true"></span> System connected </span>

Meter

Labeled usage bar; fill color flips at a threshold. Set the fill with --n-meter-value.

Searches42 / 100
Audits82 / 100
Storage96 / 100
<div class="n-meter n-meter-warning"> <div class="n-meter-header"> <span class="n-meter-label">Audits</span> <span class="n-meter-value">82 / 100</span> </div> <div class="n-meter-track"> <div class="n-meter-fill" style="--n-meter-value: 82%"></div> </div> </div>

Gauge

Radial score ring driven by --n-gauge-value (0–100).

<div class="n-gauge n-gauge-success" style="--n-gauge-value: 88" role="img" aria-label="Score 88 of 100"> <span class="n-gauge-value">88</span> </div>

Segmented control

Single-select pill group for filtering or switching views.

<div class="n-segmented" role="tablist"> <button class="n-segmented-item" role="tab" aria-selected="true">All</button> <button class="n-segmented-item" role="tab" aria-selected="false">Audited</button> </div>

Stat grid

Responsive auto-fit wrapper for metric tiles. Compose with an icon tile.

Leads found1,284
Active scans7
New today36+12%
<div class="n-stat-grid"> <article class="n-card"><div class="n-card-body"> <span class="n-icon-tile n-icon-tile-primary">◎</span> <div class="n-stat"><span class="n-stat-label">Leads found</span><span class="n-stat-value">1,284</span></div> </div></article> </div>

Search field

Input wrapper with a built-in leading search glyph.

<div class="n-search-field"> <input class="n-input n-search-input" type="search" placeholder="Search leads"> </div>

Combobox

Typeahead input plus a results list (shown open). Requires JS for filtering and keyboard nav.

<div class="n-combobox"> <input class="n-input" type="text" role="combobox" aria-expanded="true" aria-controls="cities"> <ul class="n-combobox-list" id="cities" role="listbox"> <li><button class="n-combobox-option" role="option" aria-selected="true">Lisbon, Portugal</button></li> </ul> </div>

Signal list

Dotted pro/con or insight bullets, color-coded by sentiment.

  • Fast, secure HTTPS checkout
  • Clear calls to action
  • No mobile layout
  • Blog last updated 2019
<ul class="n-signal-list"> <li class="n-signal n-signal-positive">Fast, secure checkout</li> <li class="n-signal n-signal-negative">No mobile layout</li> </ul>

Timeline

Vertical connector list with a numbered or icon marker per item.

  1. 1

    Arrive in Lisbon

    Day 1 · Hotel check-in, 3:00 PM

  2. 2

    Sintra day trip

    Day 2 · Pena Palace & Quinta da Regaleira

  3. 3

    Free day

    Day 3 · Details being finalised

<ol class="n-timeline"> <li class="n-timeline-item"> <span class="n-timeline-marker">1</span> <p class="n-timeline-title">Arrive in Lisbon</p> <p class="n-timeline-meta">Day 1 · Hotel check-in</p> </li> </ol>

Pricing plan

Tier cards with price, features, and a featured or inverted state.

Starter

$19/mo

For solo operators getting going.

  • 100 searches / month
  • CSV export
Popular

Pro

$49/mo

For teams operating at scale.

  • 500 audits / month
  • Priority processing
  • Bulk export
Best value

Business

$99/mo

Unlimited usage and API access.

  • Unlimited audits
  • API + webhooks
<div class="n-plan n-plan-featured"> <span class="n-plan-ribbon">Popular</span> <p class="n-plan-name">Pro</p> <p class="n-plan-price">$49<span class="n-plan-period">/mo</span></p> <ul class="n-plan-features"> <li class="n-plan-feature">500 audits / month</li> </ul> <button class="n-btn n-btn-primary">Choose Pro</button> </div>

Checklist

Onboarding task list; mark finished rows with n-checklist-done.

  • Create your first trip
  • Generate an itinerary with AI
  • Share a client portal
  • Invite a team member
<ul class="n-checklist"> <li class="n-checklist-item n-checklist-done"> <span class="n-checklist-marker" aria-hidden="true">✓</span> <span>Create your first trip</span> </li> </ul>

Action dock

Bottom-centered floating bar of actions. The pill below is shown in flow; the full markup fixes it to the viewport.

<div class="n-dock"> <div class="n-dock-bar n-dock-bar-dark"> <button class="n-dock-item">Request change</button> <span class="n-dock-divider" aria-hidden="true"></span> <button class="n-dock-item">Ask for help</button> </div> </div>

Responsive table

Collapses each row into a labeled card below 768px. Resize the window to see it stack.

BusinessMarketStatus
Blue Bottle Coffee · SF Enriched
Ritual Roasters Coffee · SF Pending
<table class="n-table n-table-stack"> <thead><tr><th>Business</th><th>Status</th></tr></thead> <tbody> <tr> <td data-label="Business">Blue Bottle</td> <td data-label="Status">Enriched</td> </tr> </tbody> </table>