Search nx-ui

Jump to any foundation, component, block or example.

Overview

Home
Components
Documentation

Brand iconsNew
ColoursNew
IconsNew
ShadowsNew
Theme matrixNew
TypographyNew

Activity FeedNew
App BreadcrumbsNew
App ShellNew
App SidebarNew
App SwitcherNew
Auth LoginNew
Auth RecoveryNew
Auth SignupNew
Avatar GroupNew
Calendar ViewNew
Device MockupNew
Empty StateNew
Error PageNew
Featured IconNew
Filter BarNew
KanbanNew
Media PlayerNew
Metric CardNew
Notification CentreNew
Nx LogoNew
Onboarding ChecklistNew
Org SwitcherNew
Page HeaderNew
Pricing TableNew
Scoped NavNew
Scroll FadeNew
SettingsNew
Sidebar NavNew
Theme ToggleNew
User MenuNew

InvoicesNew
Waste movementsNew
OrganisationsNew

AreaNew
BarNew
ComposedNew
Donut & pieNew
InteractiveNew
LineNew
Radial & gaugeNew
SparklinesNew

Chain Of CustodyNew
Compliance ChecklistNew
Ewc SelectorNew
Location SelectorNew
Material SelectorNew
Movement FormNew
OpportunitiesNew
Permit BadgeNew
Project Scope SelectorNew
Transfer NoteNew

Control RoomNew
DashboardNew
Empty statesNew
Forgot passwordNew
MaintenanceNew
MarketplaceNew
Movement detailNew
MovementsNew
404 — Not foundNew
Onboarding wizardNew
OpportunitiesNew
Scoped appNew
500 — Server errorNew
Settings — BillingNew
Settings — ProfileNew
Settings — TeamNew
Sign inNew
Sign upNew

BackdropNew
Background PatternsNew
Cta BannerNew
FaqNew
Feature CardNew
Feature RowNew
Grid BackdropNew
Hero SplitNew
How It WorksNew
Logo CloudNew
MotionNew
Page HeroNew
SectionNew
Site FooterNew
Site HeaderNew
Stats BandNew
TestimonialsNew

ArtifactNew
Chain of ThoughtNew
ChatNew
CheckpointNew
Code BlockNew
ConfirmationNew
ContextNew
ConversationNew
ImageNew
Inline CitationNew
LoaderNew
MessageNew
Model SelectorNew
Open in ChatNew
PlanNew
Prompt InputNew
QueueNew
ReasoningNew
ShimmerNew
SourcesNew
TaskNew
ToolNew
Web PreviewNew
WorkflowNew

Boundary MapNew
Camera & ToursNew
GlobeNew
IsochronesNew
Map MarkerNew
Map Stat OverlayNew
Map ToolbarNew
Map ViewNew
Route MapNew
RoutingNew
Site MapNew
3D TerrainNew
Tilted RoutesNew
Transfer PreviewNew

Listing CardNew
Listings FiltersNew
Listings PanelNew
Marketplace MapNew

App-shell patternNew
Components & blocksNew
ContributingNew
Getting startedNew
ThemingNew

Home
Patterns

Patterns

Marketing and landing-page blocks — the config-driven backdrop system, heroes, section scaffolding, feature rows and cards, CTAs, and social proof (logo cloud, testimonials, stats, FAQ). All props-driven, composed from the nx-ui component suite.

The config-driven decorative section backdrop: glow, texture (grid/dots/diagonal/crosshair/contours/topo), grain and a blueprint frame, with named presets and dark-aware ink.

Background Patterns

A set of stock Untitled-UI CSS masked-grid backdrops (basic, fading and diagonal-cross variants) for a one-liner decorative layer.

The full-bleed navy call-to-action band, with split or centred layout and the accent CTA hover nudge.

A grouped FAQ composed on the nx-ui Accordion, styled as rounded cards that ring on open.

The flexible marketing card — default, dashed-outline and self-flipping on-brand variants, with an optional hover-lift link affordance.

An alternating image/copy feature row with an optional icon, eyebrow and checklist.

A lightweight standalone grid backdrop for brand bands, testimonials and stat cards — navy on light, accent-yellow on dark.

The two-column landing hero — headline and CTAs beside a media slot — with the CSS-only animated accent underline.

A numbered process with an animated gradient dashed connector, in horizontal or vertical orientation.

A social-proof logo band as a CSS marquee (auto-scroll, reduced-motion aware) or a static grid.

The scroll-reveal motion utilities — FadeIn, Stagger and StaggerItem plus the shared EASE constant.

The reusable interior/marketing hero with tone (default/brand) and align (left/center) variants, over a decorative backdrop.

The marketing layout backbone: Section (toned, padded band) plus Eyebrow and SectionHeading.

The navy marketing footer with a watermark, hairline divider, link columns and an optional theme toggle.

The marketing header — a sticky glassy bar with desktop mega-menus and a mobile popover menu, all props-driven.

The accent-on-navy metric treatment in three idioms: stat cards, a stat-plus-quote proof band, and an on-image overlay.

Customer testimonials on a dark brand band — a motion crossfade carousel or a static grid.