Loading...
v5.3.2 Enterprise Edition 56 Components Verified

Nawfal UI Kit

Production-grade monochromatic component architecture featuring authoritative taxonomy, AI RAG engines, audio media suites, and full source code specs.

npx nawfal-ui@latest init

AI Neural Voice Spectrum

Neural Voice AI
speaking

Interactive voice frequency visualizer with real-time AI agent status & volume controls.

React TSX

AI Token & Cost Estimator

AI Token Estimator$0.3750 USD
Prompt Context:150k Tokens

Live LLM token pricing calculator comparing GPT-4o, Claude 3.5 Sonnet & Gemini Pro.

React TSX

Quantum Particle Mesh Node

Quantum Mesh Node24 NODES

Interactive HTML5 canvas particle matrix with proximity node connection lines.

React TSX

Cybernetic 3D Parallax HUD Card

SYSTECH_HUD_v4
ONLINE
CPU LOAD42.8%
MEMORY3.4 GB
PARALLAX TILT 3DHOVER ME

Futuristic sci-fi 3D mouse parallax tilt container with telemetry gauges.

React TSX

Interactive Pipeline Stepper

Pipeline StepperStep 3 of 4
Lint
Build
Scan
Deploy

Animated multi-step workflow stepper with active progress indicator & status badges.

React TSX

Bespoke Spotlight Command Palette

Spotlight-style floating command search modal with instant search & hotkey badges.

React TSX

AI Semantic Vector Search

AI Vector Search
98.4% MATCH
#VectorRAG#Nextjs14

AI-powered conversational semantic search bar with similarity confidence score.

React TSX

AI Vision Prompt Inspector

AI Vision Inspector
Structural Density:85% Optimal

Multi-modal AI vision analyzer measuring structural UI density & code patches.

React TSX

Interactive Code Diff Viewer

calculator.ts
function calculateTotal(items) {
- return items.reduce((a, b) => a + b, 0);
+ return items.reduce((sum, item) => sum + item.price, 0);

Inline git code comparison diff patch with copy trigger.

React TSX

RAG AI Token Stream Simulator

RAG Stream
Click 'Trigger' to watch stream...

Token-by-token streaming RAG AI generation simulator.

React TSX

Spotify Mini Player

Midnight City

M83

1:24
3:45

Mini audio player with progress bar timestamps & play/pause toggle.

React TSX

Spotify Track Row

01

Starboy

The Weeknd

3:50

Playlist row item with track number, play hover trigger, & duration.

React TSX

Spotify Vinyl Record Player

Rotating vinyl record player disc sleeve with active spin.

React TSX

Spotify Album Artwork Card

Random Access Memories

Daft Punk • 2013

Album artwork card with hover play button trigger.

React TSX

Audio Waveform Visualizer

Audio Spectrum
PAUSED

Live frequency spectrum audio visualizer with spring physics.

React TSX

Synthesizer Sound Pad

Audio Synth4-PAD OSC

Interactive 4-pad oscillator sound synthesizer widget.

React TSX

Holographic Scanline Card

HOLO PASSPORT
SECURE

ID

#NAWFAL-8890

✦

Monochrome holographic card with hover scanline laser animation.

React TSX

Hardware Telemetry Monitor

TelemetrySTABLE

CPU

32%

RAM

58%

Real-time simulated CPU & RAM telemetry gauge monitor.

React TSX

Luminance Harmony Wheel

Luminance SwatchesHEX #0A0A0A
100%
85%
60%
15%

Monochrome luminance scale swatch generator.

React TSX

Palette Tint Generator

Palette GeneratorClick to Copy

Real-time monochrome tint generator with click-to-copy.

React TSX

Live BPM Metronome

BPM Metronome120 BPM
1
2
3
4

Interactive metronome ticker with BPM beat pulse.

React TSX

Terminal Task Runner

Build Runner
Click 'Run Build' to trigger script...

Interactive build execution simulator with logs.

React TSX

Live FPS Monitor

FPS Monitor60 FPS
Frame Time: 16.6msGPU Acceleration: ON

Real-time browser rendering performance gauge.

React TSX

AI Prompt Matrix Generator

PROMPT MATRIX

"Generate monochrome UI component"

Structured prompt generator with copy trigger.

React TSX

Particle Mesh Node

Interactive node selector with glow spotlight feedback.

React TSX

Hardware Keypress Tracker

Key TrackerPress Keys
Q
W
E
R
T
Y
U
I

Real-time keypress listener lighting up 3D keys on user key events.

React TSX

Magnetic Button

Physics spring button magnetizing to cursor glare.

React TSX

Shimmer Beam Button

Rotating metallic border beam effect.

React TSX

Particle Burst Button

Monochrome burst ring ripple on click.

React TSX

Command Key Shortcut

Shortcut⌘+K

Keyboard shortcut card with click-to-copy.

React TSX

Segmented Control Switch

Sleek sliding tab selector pill.

React TSX

Monochrome Matrix Stream

0 1 0 1 1 0
1 1 0 0 1 0
MATRIX STREAM

Digital stream matrix background component with toggle.

React TSX

Spotlight Glow Card

Spotlight Glow

Cursor tracking border.

Radial mouse spotlight border highlight.

React TSX

Cyber Grid Card

+
+
Active
0x4F

Node System

Futuristic corner crosshairs & node status.

React TSX

3D Tilt Parallax Card

3D Gyroscope Perspective

3D perspective tilt on mouse movement.

React TSX

Floating macOS Dock

Icon dock bar with hover scaling.

React TSX

Retro CLI Terminal Window

nawfal-cli.sh
$ npx nawfal-ui@latest add

Dark CLI window with action logs.

React TSX

Accordion FAQ Item

Spring physics expanding card.

React TSX

Glassmorphism Floating Input

Floating label backdrop blur input.

React TSX

Pin Code OTP Input

4-digit PIN verification auto-advance.

React TSX

Compact Toggle Switch

Minimalist boolean state toggle.

React TSX

Minimal Pulse Badge

Operational

Monochrome live ping indicator dot.

React TSX

Radar Sweep Status

RADAR ACTIVE

Spinning radar scan indicator.

React TSX

Pipeline Step Badge

1
Build PipelinePASSED

Compact vertical step indicator.

React TSX

Notification Toast Banner

Component Exported

Minimal toast with action close.

React TSX

Avatar Group Overlap

U1
U2
U3
+5

Overlapping monochrome avatars.

React TSX

Metric Key-Value Card

Latency12ms

Compact telemetry performance card.

React TSX

Git Branch Tree Graph

Git Graphfeat/uikit-v3
8f3a92binit: monochrome tokens
2c7e14ffeat: add 42 components

Interactive commit graph visualizer with HEAD selector.

React TSX

AI Reasoning & Thought Accordion

1. Parsing semantic prompt intent & extracting constraint tokens...

2. Comparing vector embeddings in 1,536-dimensional space (cosine sim: 0.942)...

3. Synthesizing deterministic code output with zero hallucinations.

Answer Generated
Optimal system throughput achieved at 14,200 req/s with 99.98% cache hit ratio.

Collapsible thought process container with live step breakdown and token time indicator.

React TSX

Voice Orb Audio Wave Visualizer

Neural Audio CoreLISTENING

Click orb to toggle live audio stream capture

Fluid multi-layered kinetic plasma ring reacting to microphone audio state.

React TSX

Spotlight Cursor Bento Card

Spotlight Bentox: 0px

Dynamic Luminescence Physics

Hardware-accelerated mathematical spotlight shader calculating localized light attenuation on mouse coordinate displacement.

Interactive hardware-accelerated radial spotlight beam tracking cursor coordinates.

React TSX

Animated Border Beam Card

BORDER_BEAM_v2ACTIVE

Seamless Conic-gradient beam tracing card perimeter with buttery smooth 60fps compositor thread rotation.

Conic gradient light beam continuously tracing component border perimeter.

React TSX

macOS Spring Physics Dock

Hover icons to trigger spring scaling magnification

Magnified floating desktop dock with spring physics distance scaling.

React TSX

Server Latency & Uptime Matrix

Edge Fleet Telemetry100% UP
Singapore (sin1)
18ms
Tokyo (nrt1)
42ms
Frankfurt (fra1)
114ms
US-East (iad1)
148ms

Real-time edge fleet health monitor with live ping fluctuations across global regions.

React TSX

Git Commit Flow DAG Graph

DAG Branch Treemain · 4 commits ahead
b428746fix(pdf): dynamic CDN canvas
5465a50feat: enterprise UI Kit CLI

Interactive git DAG branch tree graph visualizer with commit status rings.

React TSX

Vinyl Record Disc Player

Cyberpunk Lo-Fi Chillwave00:00

Interactive album sleeve with sliding, spinning vinyl record disc and playback state.

React TSX