02. Client SDK/UI Primitives
UI Component Suite
GN-Apex provides 14 production-ready, Tailwind-styled React components that map directly to your CMS schema field types, with built-in null-safety so missing fields never crash your page.
ZERO NULL POINTERS
14 Primitives
Tailwind Ready · Dark Mode Compliant
“Never write conditional if (!data) boilerplate again. Render rich CMS blocks with automatic fallback handling.”
Type-Safe Frontend Primitives
Component Catalog
TYPOGRAPHY
NexusRichText
Sanitized HTML parser with Tailwind Typography prose formatting.
MEDIA
NexusImage & Gallery
Auto object-cover, aspect ratio enforcement, and animated hover grids.
VIDEO
NexusVideo
Smart embed engine for YouTube, Vimeo, and native MP4/R2 streams.
TERMINAL
NexusCode
Dark-mode terminal block with line numbers and copy-to-clipboard trigger.
DATA STRUCTURE
NexusKeyValue
Renders technical specification maps inside tabular comparison grids.
STYLING
NexusGradient & Color
CSS background gradients, text clipping masks, and hex color swatches.
Text & Media Renderers
tsx
| 1 | import { NexusRichText } from "@nexushub/client/react"; |
| 2 | |
| 3 | export function ArticleBody({ content }) { |
| 4 | return ( |
| 5 | <NexusRichText |
| 6 | value={content.html_body} |
| 7 | className="dark:prose-invert max-w-none leading-relaxed" |
| 8 | /> |
| 9 | ); |
| 10 | } |
Data & Structural Renderers
tsx
| 1 | import { NexusKeyValue } from "@nexushub/client/react"; |
| 2 | |
| 3 | export function ProductSpecs({ specs }) { |
| 4 | // specs: { "Processor": "M3 Max", "RAM": "64GB", "Storage": "2TB SSD" } |
| 5 | return <NexusKeyValue value={specs} className="my-6" />; |
| 6 | } |
Interactive & Code Renderers
tsx
| 1 | import { NexusCode } from "@nexushub/client/react"; |
| 2 | |
| 3 | export function SnippetBlock({ script }) { |
| 4 | return ( |
| 5 | <NexusCode |
| 6 | value={script} |
| 7 | language="typescript" |
| 8 | showLineNumbers={true} |
| 9 | /> |
| 10 | ); |
| 11 | } |