VNHAX
vnhax
Explore Repos

Design system & interface patterns

ui components & interface design

Zero-dependency, accessible, production-ready interface components engineered with semantic HTML, fluid CSS tokens, and React 19. Complete copy-paste source code, live previews, and installation guides.

Components
9 Patterns
MagicUI & UI-Layouts
Bundle Overhead
0 kB JS
Zero runtime bloat
Accessibility
WCAG 2.1 AA
Keyboard & ARIA ready
Core Web Vitals
0.00 CLS
Zero layout shifts

Component Directory

Select any component to inspect full source code, installation steps, and live interactive sandbox.

Inspect Layout Starter →
Cards & SocialMagicUI Pattern

Tweet Card

Verified social testimonial card with live engagement metrics, media embed, and responsive theme support.

✓ Zero third-party JavaScript tracking or blocking iframe scripts✓ Optimistic like/bookmark toggles with responsive feedback
Layouts & GridsMagicUI Pattern

Bento Grid

Asymmetric feature showcase grid with ambient radial spotlight, badge headers, and interactive hover states.

✓ Responsive CSS Grid spans (1x1, 2x1, and 2x2 asymmetric modular tiles)✓ Hardware-accelerated ambient cursor spotlight with zero FPS drop
Animations & FeedsMagicUI Pattern

Animated List

Dynamic notification and activity feed with staggered entrance transitions, auto-flow, and pause controls.

✓ Spring-calibrated staggered entrances with smooth height interpolation✓ Configurable addition interval with pause-on-hover capability
Navigation & ToolbarsMagicUI Pattern

Interactive Dock

macOS-inspired floating navigation bar with proximity-based icon magnification and dark glassmorphism.

✓ Smooth proximity-based Gaussian curve scaling (1.0x to 1.5x magnification)✓ Dark glassmorphic container with backdrop-blur and ambient rim lighting
Typography & EffectsUI-Layouts Pattern

Sparkles Title

High-impact hero headline with shimmering canvas sparkle particles floating across gradient typography.

✓ Iridescent dual-gradient typography with customizable color stops✓ HTML5 Canvas 4-point sparkle star engine with randomized twinkle speeds
Backgrounds & CanvasUI-Layouts Pattern

Sparkles Effect

Interactive HTML5 Canvas particle background with twinkling stars, cursor attraction, and customizable density.

✓ Interactive particle count, speed, and star size parameters✓ Zero external graphics libraries (vanilla HTML5 2D Canvas context)
Interactive MediaUI-Layouts Pattern

Image Accordions

Interactive multi-panel gallery with smooth flex expansion, title overlays, and active card state.

✓ Silky smooth CSS flex-grow transition timing without layout flicker✓ Dynamic metadata overlays (tags, headlines, description text)
Marketing BlocksUI-Layouts Pattern

Modern Pricing Table

Conversion-optimized SaaS pricing matrix with annual discount toggle, featured tier spotlight, and feature checklist.

✓ Interactive Monthly / Annual toggle with automatic 20% discount calculation✓ Featured tier with glowing border spotlight and "Most Popular" pill badge
Marketing BlocksUI-Layouts Pattern

Futuristic Hero Section

Production-ready SaaS hero block with glowing announcement pill, gradient headline, dual CTAs, and interactive preview.

✓ Shimmering announcement badge pill with interactive link✓ Fluid clamp() typography scaling smoothly from 320px mobile to 4K displays
Engineering Architecture

Why Zero-Dependency UI Architecture Wins

Modern web applications frequently suffer from bundle bloat caused by installing monolithic component packages. When you install heavy third-party UI libraries, your bundle imports hundreds of kilobytes of runtime CSS-in-JS compilers, non-treeshakable iconography, and duplicate state listeners.

⚡ Sub-Millisecond Paint Times

Native CSS custom properties load without JavaScript execution cost. The browser renders layout elements immediately on HTML receipt, eliminating FCP delays.

📐 Fluid Clamp Typography

By combining clamp() with viewport units, headings scale smoothly between mobile viewports and 4K displays without cluttered media query breakpoints.

♿ Certified WCAG AA Contrast

All semantic surfaces and text tokens are pre-calculated to exceed WCAG 2.1 AA 4.5:1 contrast requirements, ensuring full legibility across light and dark modes.

Frequently Asked Questions

Answers regarding design tokens, accessibility compliance, and framework integration.

How do these components compare to MagicUI and UI-Layouts?
These components adopt the visual aesthetics and interaction patterns popularized by MagicUI and UI-Layouts, but are engineered to be zero-dependency. They do not require heavy CSS-in-JS runtimes and can be dropped directly into vanilla React 19, Next.js App Router, Vite, or Astro projects with full TypeScript typing.
Are all components fully accessible according to WCAG 2.1 AA standards?
Yes. Every component includes semantic HTML5 landmark tags (<article>, <nav>, <header>, <section>), explicit ARIA attributes (aria-label, role="toolbar", aria-live="polite", aria-expanded), visible focus rings for keyboard navigation, and contrast ratios exceeding 4.5:1.
Can I copy and customize these components for commercial client work?
Yes. All component source code, CSS tokens, and templates published on VNHAX are licensed under permissive terms for unrestricted private and commercial use with zero attribution requirements.
How do I use these components with Tailwind CSS vs Vanilla CSS?
Each component detail page includes three production source tabs: React 19 / TypeScript, Vanilla CSS stylesheet tokens, and standard Tailwind CSS utility class equivalents. You can use whichever matches your frontend stack.
Do these components impact Google Core Web Vitals (INP and CLS)?
No. By utilizing GPU-accelerated CSS properties (transform, opacity, backdrop-filter) and static aspect-ratio bounding containers, all components maintain 0.00 CLS (Cumulative Layout Shift) and sub-10ms INP (Interaction to Next Paint).

Build for the interface around it

A reusable component earns its place by being clear, accessible, and adaptable. Document keyboard behavior, focus states, visual states, and dependencies beside the code so implementation teams do not need to reverse-engineer design decisions.