Loading...
v5.0.0 Established Enterprise Edition 42 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 Semantic Vector Search

AI Vector Search
98.4% MATCH
#VectorRAG#Nextjs14

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

CLI: nawfal-ui

AI Vision Prompt Inspector

AI Vision Inspector
Structural Density:85% Optimal

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

CLI: nawfal-ui

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.

CLI: nawfal-ui

RAG AI Token Stream Simulator

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

Token-by-token streaming RAG AI generation simulator.

CLI: nawfal-ui

Spotify Mini Player

Midnight City

M83

1:24
3:45

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

CLI: nawfal-ui

Spotify Track Row

01

Starboy

The Weeknd

3:50

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

CLI: nawfal-ui

Spotify Vinyl Record Player

Rotating vinyl record player disc sleeve with active spin.

CLI: nawfal-ui

Spotify Album Artwork Card

Random Access Memories

Daft Punk • 2013

Album artwork card with hover play button trigger.

CLI: nawfal-ui

Audio Waveform Visualizer

Audio Spectrum
PAUSED

Live frequency spectrum audio visualizer with spring physics.

CLI: nawfal-ui

Synthesizer Sound Pad

Audio Synth4-PAD OSC

Interactive 4-pad oscillator sound synthesizer widget.

CLI: nawfal-ui

Holographic Scanline Card

HOLO PASSPORT
SECURE

ID

#NAWFAL-8890

Monochrome holographic card with hover scanline laser animation.

CLI: nawfal-ui

Hardware Telemetry Monitor

TelemetrySTABLE

CPU

32%

RAM

58%

Real-time simulated CPU & RAM telemetry gauge monitor.

CLI: nawfal-ui

Luminance Harmony Wheel

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

Monochrome luminance scale swatch generator.

CLI: nawfal-ui

Palette Tint Generator

Palette GeneratorClick to Copy

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

CLI: nawfal-ui

Live BPM Metronome

BPM Metronome120 BPM
1
2
3
4

Interactive metronome ticker with BPM beat pulse.

CLI: nawfal-ui

Terminal Task Runner

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

Interactive build execution simulator with logs.

CLI: nawfal-ui

Live FPS Monitor

FPS Monitor60 FPS
Frame Time: 16.6msGPU Acceleration: ON

Real-time browser rendering performance gauge.

CLI: nawfal-ui

AI Prompt Matrix Generator

PROMPT MATRIX

"Generate monochrome UI component"

Structured prompt generator with copy trigger.

CLI: nawfal-ui

Particle Mesh Node

Interactive node selector with glow spotlight feedback.

CLI: nawfal-ui

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.

CLI: nawfal-ui

Magnetic Button

Physics spring button magnetizing to cursor glare.

CLI: nawfal-ui

Shimmer Beam Button

Rotating metallic border beam effect.

CLI: nawfal-ui

Particle Burst Button

Monochrome burst ring ripple on click.

CLI: nawfal-ui

Command Key Shortcut

Shortcut⌘+K

Keyboard shortcut card with click-to-copy.

CLI: nawfal-ui

Segmented Control Switch

Sleek sliding tab selector pill.

CLI: nawfal-ui

Monochrome Matrix Stream

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

Digital stream matrix background component with toggle.

CLI: nawfal-ui

Spotlight Glow Card

Spotlight Glow

Cursor tracking border.

Radial mouse spotlight border highlight.

CLI: nawfal-ui

Cyber Grid Card

+
+
Active
0x4F

Node System

Futuristic corner crosshairs & node status.

CLI: nawfal-ui

3D Tilt Parallax Card

3D Gyroscope Perspective

3D perspective tilt on mouse movement.

CLI: nawfal-ui

Floating macOS Dock

Icon dock bar with hover scaling.

CLI: nawfal-ui

Retro CLI Terminal Window

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

Dark CLI window with action logs.

CLI: nawfal-ui

Accordion FAQ Item

Spring physics expanding card.

CLI: nawfal-ui

Glassmorphism Floating Input

Floating label backdrop blur input.

CLI: nawfal-ui

Pin Code OTP Input

4-digit PIN verification auto-advance.

CLI: nawfal-ui

Compact Toggle Switch

Minimalist boolean state toggle.

CLI: nawfal-ui

Minimal Pulse Badge

Operational

Monochrome live ping indicator dot.

CLI: nawfal-ui

Radar Sweep Status

RADAR ACTIVE

Spinning radar scan indicator.

CLI: nawfal-ui

Pipeline Step Badge

1
Build PipelinePASSED

Compact vertical step indicator.

CLI: nawfal-ui

Notification Toast Banner

Component Exported

Minimal toast with action close.

CLI: nawfal-ui

Avatar Group Overlap

U1
U2
U3
+5

Overlapping monochrome avatars.

CLI: nawfal-ui

Metric Key-Value Card

Latency12ms

Compact telemetry performance card.

CLI: nawfal-ui

Git Branch Tree Graph

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

Interactive commit graph visualizer with HEAD selector.

CLI: nawfal-ui