Components
107 components across 12 categories. Click any card to see usage, props, and live examples.
Logo
Nosible brand logo — mark, wordmark, and lockups with currentColor recolouring.
Wordmark
Convenience wrapper — renders the "NOSIBLE" wordmark via Logo.
LogoLockup
Mark + wordmark lockup — horizontal (primary) or stacked orientation.
ShareCoverImage
Illustrated 1200×630 share cover for OpenGraph / Twitter / LinkedIn.
BackgroundFrame
Foundation layer — backdrop + overlay + accent stripe that every marketing surface composes on.
NOSIBLE v1.0
Signal, structured
From tick to thesis in under 400 ms.
HeroBanner
Full-width hero with eyebrow, headline, actions, and aside slot.
EARLY ACCESS
Signal, structured
Research desk for AI-native teams.
CTACard
Column-width CTA card — obsidian, slate, accent, or outline tone.
01
Signal extraction
NLP across 94 sources.
FeatureCard
Illustration-forward card — stacked, horizontal, or hero-top layout.
INGEST
Every source that matters
SEC EDGAR, Federal Reserve, and 92 more.
SplitCTA
Two-column media + copy layout — media left or right.
NEW
Shipping updates for v1.1 are live
CalloutStripe
Thin horizontal banner — six tones for announcements, status, warnings.
RESEARCH DESK
Signal, structured
From tick to thesis in under 400 ms.
AdUnit
Fixed-dimension ad creative — 11 platform presets (LinkedIn, Reddit, X, Meta) for PNG export.
TextInput
Single-line text entry with label, description, and error states.
Textarea
Multi-line text area that auto-grows with content.
PasswordInput
Text input with toggleable visibility for sensitive values.
NumberInput
Numeric field with increment/decrement controls and step support.
FileInput
File picker with drag-and-drop zone and MIME type filtering.
ColorInput
Hex / HSL color picker with a swatch preview.
PinInput
Multi-cell OTP / PIN entry with automatic focus advancement.
TagsInput
Freeform tag entry — type and press Enter to create tags.
SearchBox
Search field with clear icon, loading state, and keyboard hints.
Combobox
Filterable dropdown combining a text input with a popover list.
Select
Dropdown selector built on Radix UI Select for accessibility.
MultiSelect
Multiple-value select with tag badges and keyboard navigation.
Rating
Star rating widget with half-star and keyboard support.
Slider
Range slider with single handle, range mode, and marks.
Button
Primary interactive element. Variants: solid, outline, ghost, link.
ActionIcon
Square icon-only button with the same variants as Button.
Toggle
Pressable toggle that maintains on / off state.
ToggleGroup
Exclusive or multi-select group of Toggle buttons.
SegmentedControl
Horizontal pill-group for switching between 2–5 views.
NavLink
Sidebar navigation item with active state, icons, and nesting.
Sidebar
Collapsible app sidebar with keyboard shortcut Ctrl+B.
Breadcrumbs
Breadcrumb trail with customisable separator.
Tab content renders here.
Tabs
Tabbed interface with keyboard navigation and ARIA roles.
Pagination
Page navigation with prev / next and numbered page buttons.
Account
Profile
Review
Stepper
Linear multi-step progress indicator.
MobileNav
Slide-in mobile navigation drawer with one-level nesting.
Menu
Dropdown context menu built on Radix DropdownMenu.
MenuBar
Horizontal application menu bar (File / Edit / View…).
Command
cmdk-based command palette primitives (list, item, group).
Spotlight
Full command-palette overlay with Mod+K shortcut.
Dialog
Modal dialog with backdrop, focus trap, and Escape to dismiss.
Drawer
Side-anchored panel that slides in from any edge.
Popover
Anchored floating panel for forms, pickers, and rich content.
HoverCard
Preview card shown on hover/focus delay.
Tooltip
Short text hint anchored to a trigger element.
Toast
Transient notification messages via Sonner.
| Ticker | Price | Signal |
|---|---|---|
| AAPL | $189 | ↑ Bull |
| MSFT | $415 | — Flat |
Table
Striped, sortable data table with sticky header support.
Badge
Compact status / label pill. Variants: solid, outline, dot.
Avatar
User avatar with image, initials fallback, and online indicator.
AvatarGroup
Stacked row of Avatar components with overflow count.
import { Code } from nosible-ux for inline snippets.Code
Inline code snippet styled in Space Mono.
Kbd
Keyboard key badge — renders ⌘ K as styled chips.
Search results with highlighted terms are easier to scan at a glance.
Mark
Inline text highlight for search results and annotations.
Indicator
Dot badge overlaid on a child element (unread count, status).
ScrollArea
Custom scrollbar overlay for any scrollable region.
ThemeIcon
Icon inside a rounded container with brand-colour fills.
SearchResult
Single result row used inside SearchBox result lists.
Container
Max-width wrapper with consistent horizontal padding.
Stack
Vertical flex column with consistent gap between children.
Group
Horizontal flex row with gap and optional wrapping.
Flex
Low-level flex container with all CSS flex props as props.
SimpleGrid
Equal-width CSS Grid wrapper with configurable column count.
Center
Centres a single child element both horizontally and vertically.
Box
Semantic div / span with Tailwind class merging via cn().
Paper
Elevated surface card with border and bg-elevated background.
AspectRatio
Maintains a fixed aspect ratio for any child content.
Divider
Horizontal or vertical rule with optional label.
Space
Empty spacer block; height/width set via Tailwind.
Affix
Fixed-position container pinned to a viewport corner.
Typography
Semantic heading and body primitives — H1 (Orbitron), H2–H5 (Space Grotesk), P, Em, Strong.
Anchor
Styled hyperlink with Neo Green underline on hover.
NumberFormatter
Formats numbers with locale, currency, and precision.
VisuallyHidden
Screen-reader-only wrapper — hidden visually, readable by AT.
AnchorScroll
Smooth-scroll anchor target with auto-registered TOC id.
Deployed
Rate limit
Alert
Inline status message with icon, title, body, and dismiss button.
Progress
Horizontal progress bar with determinate and indeterminate modes.
RingProgress
Circular donut progress indicator with size and colour control.
Loader
Animated spinner with three size variants.
Skeleton
Shimmer placeholder for content loading states.
AreaChart
Filled area chart built on Recharts with brand colours.
BarChart
Vertical / horizontal bar chart with stacked mode.
DonutChart
Donut / pie chart with centre label slot.
LineChart
Multi-series line chart with tooltip and legend.
- Americas
- Europe
- APAC
MapLegend
HUD-style legend block for maps — ramp, vertical ramp, or categorical swatches.
Sparkline
Minimal inline trend chart, no axes or labels.
WorldBubbleMap
Proportional-circle world map — bubble area (sqrt-scaled) encodes a value.
WorldChoropleth
Shaded world map — colour ramp driven by a numeric value per country.
WorldConnectionMap
Great-circle arcs between origin / destination coordinate pairs.
WorldDotMap
Dot-matrix world map — terrain as a Neo-Green lattice with hotspot overlays.
WorldHeatmap
Kernel density heatmap over a world map — colour encodes point concentration.
WorldMap
Base world-map primitive — country polygons + fitted d3-geo projection.
WorldMarkerMap
Labelled point markers with hover-card metrics on a world map.
Accordion
Collapsible panels with animated height transitions.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
29 | 30 | 31 | 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 1 |
Calendar
Month-view calendar grid for date selection.
DatePicker
Date picker field with a calendar popover.
DateRangePicker
Dual-calendar range selector.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
29 | 30 | 31 | 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 1 |
InlineDatePicker
Always-visible inline date picker without a popover.
MonthPicker
Month / year picker grid.
DateInput
Masked date text input (DD/MM/YYYY) with calendar trigger.
Checkbox
Accessible checkbox with label and indeterminate state.
CheckboxGroup
Managed group of labelled checkboxes.
Radio
Single radio button — compose into RadioGroup for selection.
RadioGroup
Exclusive radio selection with ARIA roles.
RadioCard
Card-style radio option — larger touch target than Radio.
Switch
Toggle switch for binary on / off settings.
Fieldset
Groups related form inputs with a legend and description.