apex-ui-kit 2.6.0 → 2.8.0

package/ReadMe.md

@@ -4,7 +4,7 @@
 [![npm downloads](https://img.shields.io/npm/dm/apex-ui-kit?color=a3e635)](https://www.npmjs.com/package/apex-ui-kit)
 [![license](https://img.shields.io/npm/l/apex-ui-kit?color=a3e635)](./Licence.md)
 
-**96 free, animated UI components for React.** Pick one, add it with a single command, and the source lands in your project so you can read it and change anything.
+**115 free, animated UI components for React.** Pick one, add it with a single command, and the source lands in your project so you can read it and change anything.
 
 Built with React, Tailwind CSS and Framer Motion, plus GSAP, Canvas and WebGL where a component needs them.
 
@@ -15,7 +15,7 @@ Built with React, Tailwind CSS and Framer Motion, plus GSAP, Canvas and WebGL wh
 
 ## Why ApexUI
 
-- **96 components** across backgrounds, cards, text effects, navigation, buttons, interactive UI, AI interfaces, loaders and maps.
+- **115 components** across backgrounds, cards, text effects, navigation, buttons, interactive UI, AI interfaces, loaders and maps.
 - **You own the code.** The CLI copies plain `.jsx` files into your project, no runtime package to keep in sync.
 - **Every docs page has** a live preview, a playground to tweak props, a Desktop / Tablet / Mobile preview, the full props table and a ready prompt you can paste into ChatGPT or Claude.
 - **Smooth on real devices.** Animations stick to transform and opacity, respect reduced motion, and work with mouse, touch and keyboard.
@@ -99,14 +99,16 @@ Every component's props, variants and copy-ready code are on its docs page.
 
 ## Components
 
-### Backgrounds (14)
+### Backgrounds (17)
 
 | Component | CLI name |
 | --- | --- |
 | [Aurora Background](https://apex-ui.in/components/aurora-background) | `aurora-background` |
 | [BluePrint Background](https://apex-ui.in/components/blueprint-background) | `blueprint-background` |
+| [Dither Waves](https://apex-ui.in/components/dither-waves) | `dither-waves` |
 | [Dot Wave Background](https://apex-ui.in/components/dot-wave-background) | `dot-wave-background` |
 | [Galaxy 3D](https://apex-ui.in/components/galaxy-3d) | `galaxy-3d` |
+| [Horizon Glow](https://apex-ui.in/components/horizon-glow) | `horizon-glow` |
 | [Kinetic Threads Background](https://apex-ui.in/components/kinetic-threads-background) | `kinetic-threads-background` |
 | [Lens Flare Background](https://apex-ui.in/components/lens-flare-background) | `lens-flare-background` |
 | [Liquid Gradient](https://apex-ui.in/components/liquid-gradient) | `liquid-gradient` |
@@ -116,9 +118,10 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Retro Grid 3D](https://apex-ui.in/components/retro-grid-3d) | `retro-grid-3d` |
 | [Ripple Background](https://apex-ui.in/components/ripple-background) | `ripple-background` |
 | [Smoke Background](https://apex-ui.in/components/smoke-background) | `smoke-background` |
+| [Sunrise Background](https://apex-ui.in/components/sunrise-background) | `sunrise-background` |
 | [Warp Tunnel](https://apex-ui.in/components/warp-tunnel) | `warp-tunnel` |
 
-### Cards (18)
+### Cards (20)
 
 | Component | CLI name |
 | --- | --- |
@@ -131,17 +134,19 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Glare Card](https://apex-ui.in/components/glare-card) | `glare-card` |
 | [Holo Card](https://apex-ui.in/components/holo-card) | `holo-card` |
 | [Hyper Card](https://apex-ui.in/components/hyper-card) | `hyper-card` |
+| [Image Accordion](https://apex-ui.in/components/image-accordion) | `image-accordion` |
 | [Iso Stack](https://apex-ui.in/components/iso-stack) | `iso-stack` |
 | [Parallax Card](https://apex-ui.in/components/parallax-card) | `parallax-card` |
 | [Pixel Transition](https://apex-ui.in/components/pixel-transition) | `pixel-transition` |
 | [Pricing Cards](https://apex-ui.in/components/pricing-cards) | `pricing-cards` |
 | [Profile](https://apex-ui.in/components/profile) | `flip-profile`, `parallax-profile`, `profile-card` |
+| [Scroll Stack](https://apex-ui.in/components/scroll-stack) | `scroll-stack` |
 | [Smart Grid Card](https://apex-ui.in/components/smart-grid-card) | `smart-grid-card` |
 | [Spotlight Grid](https://apex-ui.in/components/spotlight-grid) | `spotlight-grid` |
 | [Swipe Cards](https://apex-ui.in/components/swipe-cards) | `swipe-cards` |
 | [Testimonials](https://apex-ui.in/components/testimonials) | `testimonials` |
 
-### Text & Motion (18)
+### Text & Motion (20)
 
 | Component | CLI name |
 | --- | --- |
@@ -150,11 +155,13 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Beam Bar](https://apex-ui.in/components/beam-bar) | `beam-bar` |
 | [Blur Reveal Text](https://apex-ui.in/components/blur-reveal-text) | `blur-reveal-text` |
 | [Circular Text](https://apex-ui.in/components/circular-text) | `circular-text` |
+| [Crossed Marquee](https://apex-ui.in/components/crossed-marquee) | `crossed-marquee` |
 | [Extruded Text](https://apex-ui.in/components/extruded-text) | `extruded-text` |
 | [Flip Clock](https://apex-ui.in/components/flip-clock) | `flip-clock` |
 | [Glitch Text](https://apex-ui.in/components/glitch-text) | `glitch-text` |
 | [Hover Text](https://apex-ui.in/components/hover-text) | `hover-text` |
 | [Mask View](https://apex-ui.in/components/mask-view) | `mask-view` |
+| [Particle Text](https://apex-ui.in/components/particle-text) | `particle-text` |
 | [Proximity Text](https://apex-ui.in/components/proximity-text) | `proximity-text` |
 | [Rolling Counter](https://apex-ui.in/components/rolling-counter) | `rolling-counter` |
 | [Rotating Text](https://apex-ui.in/components/rotating-text) | `rotating-text` |
@@ -164,53 +171,65 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [True Focus](https://apex-ui.in/components/true-focus) | `true-focus` |
 | [Typewriter Text](https://apex-ui.in/components/typewriter-text) | `typewriter-text` |
 
-### Navigation (8)
+### Navigation (11)
 
 | Component | CLI name |
 | --- | --- |
 | [Animated Tabs](https://apex-ui.in/components/animated-tabs) | `animated-tabs` |
+| [Command Palette](https://apex-ui.in/components/command-palette) | `command-palette` |
 | [Floating Navbar](https://apex-ui.in/components/floating-navbar) | `floating-navbar` |
 | [Gooey Nav](https://apex-ui.in/components/gooey-nav) | `gooey-nav` |
 | [Magnify Dock](https://apex-ui.in/components/magnify-dock) | `magnify-dock` |
 | [Nav DropDown](https://apex-ui.in/components/nav-drop-down) | `nav-dropdown` |
 | [Nav Menu](https://apex-ui.in/components/nav-menu) | `nav-menu` |
+| [Radial Menu](https://apex-ui.in/components/radial-menu) | `radial-menu` |
 | [Sidebar Nav](https://apex-ui.in/components/sidebar-nav) | `sidebar-nav` |
+| [Theme Switcher](https://apex-ui.in/components/theme-switcher) | `theme-switcher` |
 | [Theme Toggle](https://apex-ui.in/components/theme-toggle) | `theme-toggle` |
 
-### Buttons (3)
+### Buttons (4)
 
 | Component | CLI name |
 | --- | --- |
 | [Animated Buttons](https://apex-ui.in/components/animated-buttons) | `animated-button`, `hold-to-confirm` |
 | [Animated Switches](https://apex-ui.in/components/animated-switches) | `animated-switch` |
+| [Magnetic Button](https://apex-ui.in/components/magnetic-button) | `magnetic-button` |
 | [Star Border](https://apex-ui.in/components/star-border) | `star-border` |
 
-### Interactive (22)
+### Interactive (30)
 
 | Component | CLI name |
 | --- | --- |
 | [3D Carousel](https://apex-ui.in/components/3d-carousel) | `3d-carousel`, `webgl-carousel` |
+| [Arc Gallery](https://apex-ui.in/components/arc-gallery) | `arc-gallery` |
 | [Avatar](https://apex-ui.in/components/avatar) | `avatar` |
 | [Carousel](https://apex-ui.in/components/carousel) | `carousel`, `parallax-carousel`, `drag-carousel` |
+| [Circular Carousel](https://apex-ui.in/components/circular-carousel) | `circular-carousel` |
 | [Click Spark](https://apex-ui.in/components/click-spark) | `click-spark` |
 | [Coverflow 3D](https://apex-ui.in/components/coverflow-3d) | `coverflow-3d` |
 | [Cube Gallery](https://apex-ui.in/components/cube-gallery) | `cube-gallery` |
 | [Cursor Trail](https://apex-ui.in/components/cursor-trail) | `cursor-trail` |
 | [Dynamic Island](https://apex-ui.in/components/dynamic-island) | `dynamic-island` |
+| [Edge Blur](https://apex-ui.in/components/edge-blur) | `edge-blur` |
 | [Edge Glow Form](https://apex-ui.in/components/edge-glow-form) | `edge-glow-form` |
 | [Elastic Slider](https://apex-ui.in/components/elastic-slider) | `elastic-slider` |
 | [FAQ Accordion](https://apex-ui.in/components/faq-accordion) | `faq-accordion` |
 | [Flip Book](https://apex-ui.in/components/flip-book) | `flip-book` |
+| [Glass Lens](https://apex-ui.in/components/glass-lens) | `glass-lens` |
 | [Image Compare](https://apex-ui.in/components/image-compare) | `image-compare` |
+| [Infinite Canvas](https://apex-ui.in/components/infinite-canvas) | `infinite-canvas` |
 | [Liquid Blob 3D](https://apex-ui.in/components/liquid-blob-3d) | `liquid-blob-3d` |
 | [Magnet Lines](https://apex-ui.in/components/magnet-lines) | `magnet-lines` |
 | [Magnetic Cursor](https://apex-ui.in/components/magnetic-cursor) | `magnetic-cursor` |
+| [Marquee 3D](https://apex-ui.in/components/marquee-3d) | `marquee-3d` |
+| [Orbit Icons](https://apex-ui.in/components/orbit-icons) | `orbit-icons` |
 | [Particle Morph](https://apex-ui.in/components/particle-morph) | `particle-morph` |
 | [Pointer Follower](https://apex-ui.in/components/pointer-follower) | `pointer-follower` |
 | [Receipt Printer](https://apex-ui.in/components/receipt-printer) | `receipt-printer` |
 | [Stepper](https://apex-ui.in/components/stepper) | `stepper` |
 | [Toast Stack](https://apex-ui.in/components/toast-stack) | `toast-stack` |
 | [ToolTip](https://apex-ui.in/components/tool-tip) | `tooltip` |
+| [Wireframe Knot 3D](https://apex-ui.in/components/wireframe-knot-3d) | `wireframe-knot-3d` |
 
 ### AI (10)
 
@@ -240,9 +259,12 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Dot Globe](https://apex-ui.in/components/dot-globe) | `dot-globe` |
 | [World Map](https://apex-ui.in/components/world-map) | `world-map` |
 
-## What's new in 2.6
+## What's new in 2.8
 
-- 27 new components, including WebGL and three.js (Galaxy 3D, Warp Tunnel, Distortion Image, Liquid Blob 3D, Particle Morph, Retro Grid 3D), the AI voice family (Wave, Bars, Ring, Blob), Gooey Nav (WebGL metaball pill), Coverflow 3D, Card Swap 3D, 3D Text Ring, Elastic Slider, Stepper and Pixel Transition.
+- New in 2.8: Glass Lens (WebGL liquid glass), Dither Waves (WebGL 1-bit background), Infinite Canvas, Image Accordion, Orbit Icons, Command Palette, Crossed Marquee (tech-stack bands with simple-icons) and Theme Switcher (8 themes with a circle reveal).
+- Toast Stack and Radial Menu no longer blink in production builds; Radial Menu, 3D Text Ring, Animated Tabs and Gooey Nav now fit 320px phones.
+- 38 new components since 2.6, including WebGL and three.js (Sunrise Background, Horizon Glow, Circular Carousel, Arc Gallery, Galaxy 3D, Warp Tunnel, Wireframe Knot 3D, Marquee 3D, Distortion Image, Liquid Blob 3D, Particle Morph, Retro Grid 3D), Scroll Stack, Particle Text, Edge Blur, Magnetic Button, Radial Menu, the AI voice family (Wave, Bars, Ring, Blob), Gooey Nav (WebGL metaball pill), Coverflow 3D, Card Swap 3D, 3D Text Ring, Elastic Slider, Stepper and Pixel Transition.
+- Accordion Marquee is rebuilt: one liquid band glides between rows on springs, leans toward the pointer, and its marquee speeds up with sideways mouse moves. No GSAP needed any more.
 - AI Model Prompt now exports `DEFAULT_LLM_MODELS` and an index file, so you can import both from the folder.
 - Loading Screens follow the real page load by default: drop `<LoadingScreen fullScreen />` into your app and it covers the page while it loads, with a live bar and percentage, then hides itself. Pass `progress` to drive it yourself.
 - Hold to Confirm follows a delete flow with an `UndoNotice` that counts down before the action is final.