apex-ui-kit 2.3.1 → 2.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/ReadMe.md +251 -75
  2. package/package.json +22 -14
package/ReadMe.md CHANGED
@@ -1,75 +1,251 @@
1
- # Apex UI Kit
2
-
3
- Apex UI Kit is a modern, blazing-fast, beautifully animated React UI library built with Tailwind CSS, GSAP, and Framer Motion. Perfect for modern apps, portfolios, dashboards, and high-performance UIs.
4
-
5
- ---
6
-
7
- ## 🌐 Website & Docs
8
-
9
- - **Main Site:** [https://apex-ui.in/](https://apex-ui.in/)
10
- - **Introduction:** [https://apex-ui.in/components/docs/getting-started/introduction](https://apex-ui.in/components/docs/getting-started/introduction)
11
- - **Components:** [https://apex-ui.in/components/glass-navbar](https://apex-ui.in/components/glass-navbar)
12
-
13
- ## 🚀 Installation
14
-
15
- ### 1. Install the package
16
-
17
- ```bash
18
- npm install apex-ui-kit
19
- ```
20
-
21
- ### 2. Add a component using the CLI
22
-
23
- ```bash
24
- npx apex-ui-kit add hyper-card
25
- ```
26
-
27
- ---
28
-
29
- ## 🧩 Usage Example
30
-
31
- ```jsx
32
- import HyperCard from "./ApexUI-Kit/HyperCard/HyperCard.jsx";
33
-
34
- const App = () => {
35
- return (
36
- <div>
37
- <HyperCard
38
- starColor="#9f7aea"
39
- glow={true}
40
- beamCount={10}
41
- starCount={250}
42
- />
43
- </div>
44
- );
45
- };
46
-
47
- export default App;
48
- ```
49
-
50
- ---
51
-
52
- ## 📦 Features
53
-
54
- - Modern, animated React components
55
- - Easy CLI for adding components
56
- - Built with Tailwind CSS, GSAP, Framer Motion
57
- - Perfect for dashboards, portfolios, and modern web apps
58
-
59
- ---
60
-
61
- ## 📚 Documentation
62
-
63
- - More components and usage: [Coming Soon]
64
-
65
- ---
66
-
67
- ## 🛠️ Contributing
68
-
69
- Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.
70
-
71
- ---
72
-
73
- ## 📝 License
74
-
75
- MIT
1
+ # ApexUI Kit
2
+
3
+ [![npm version](https://img.shields.io/npm/v/apex-ui-kit?color=a3e635&label=npm)](https://www.npmjs.com/package/apex-ui-kit)
4
+ [![npm downloads](https://img.shields.io/npm/dm/apex-ui-kit?color=a3e635)](https://www.npmjs.com/package/apex-ui-kit)
5
+ [![license](https://img.shields.io/npm/l/apex-ui-kit?color=a3e635)](./Licence.md)
6
+
7
+ **90 free, animated React components for Tailwind CSS.** Pick one, add it with a single command, and the source lands in your project so you can read it and change anything.
8
+
9
+ Built with React, Tailwind CSS and Framer Motion, plus GSAP, Canvas and WebGL where a component needs them.
10
+
11
+ - Website: [apex-ui.in](https://apex-ui.in)
12
+ - All components: [apex-ui.in/components](https://apex-ui.in/components)
13
+ - Getting started: [Introduction](https://apex-ui.in/components/docs/getting-started/introduction)
14
+ - CLI guide: [ApexUI CLI setup](https://apex-ui.in/components/docs/getting-started/installation/apexui-cli)
15
+
16
+ ## Why ApexUI
17
+
18
+ - **90 components** across backgrounds, cards, text effects, navigation, buttons, interactive UI, AI interfaces, loaders and maps.
19
+ - **You own the code.** The CLI copies plain `.jsx` files into your project, no runtime package to keep in sync.
20
+ - **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.
21
+ - **Smooth on real devices.** Animations stick to transform and opacity, respect reduced motion, and work with mouse, touch and keyboard.
22
+ - **Light and dark** themes on the components that have a surface (`theme="light" | "dark"`).
23
+
24
+ ## Requirements
25
+
26
+ - React 18 or newer
27
+ - Tailwind CSS (v4 recommended, see the [Tailwind setup guide](https://apex-ui.in/components/docs/getting-started/installation/tailwind-setup))
28
+
29
+ ## Quick start
30
+
31
+ 1. Install the CLI package:
32
+
33
+ ```bash
34
+ npm install apex-ui-kit
35
+ ```
36
+
37
+ 2. Add any component by its CLI name:
38
+
39
+ ```bash
40
+ npx apex-ui-kit add gooey-nav
41
+ ```
42
+
43
+ The CLI asks where to put the files, installs the shared dependencies (Framer Motion, GSAP, Three.js, Lucide icons and a few more, plus anything that one component needs, such as `ogl`), and copies the component to:
44
+
45
+ ```
46
+ <your folder>/ApexUI-Kit/<ComponentName>/
47
+ ```
48
+
49
+ 3. Import it and use it:
50
+
51
+ ```jsx
52
+ import GooeyNav from "./ApexUI-Kit/GooeyNav/GooeyNav.jsx";
53
+
54
+ export default function App() {
55
+ return (
56
+ <GooeyNav
57
+ accentColor="#a3e635"
58
+ items={[
59
+ { label: "Home", href: "/" },
60
+ { label: "Components", href: "/components" },
61
+ { label: "Docs", href: "/docs" },
62
+ ]}
63
+ />
64
+ );
65
+ }
66
+ ```
67
+
68
+ ## Example: AI prompt with a model picker
69
+
70
+ ```bash
71
+ npx apex-ui-kit add ai-model-prompt
72
+ ```
73
+
74
+ ```jsx
75
+ import { useState } from "react";
76
+ import { DEFAULT_LLM_MODELS, AiModelPrompt } from "./ApexUI-Kit/AiModelPrompt";
77
+
78
+ export function PromptComposer() {
79
+ const [modelValue, setModelValue] = useState("claude-fable-5");
80
+ const [configurations, setConfigurations] = useState({});
81
+ const [prompt, setPrompt] = useState("");
82
+
83
+ return (
84
+ <AiModelPrompt
85
+ models={DEFAULT_LLM_MODELS}
86
+ value={modelValue}
87
+ onModelChange={(model) => setModelValue(model.value)}
88
+ configurations={configurations}
89
+ onConfigurationChange={(_, __, next) => setConfigurations(next)}
90
+ prompt={prompt}
91
+ onPromptChange={setPrompt}
92
+ onSubmit={({ model, configuration, prompt }) => sendToYourApi({ model, configuration, prompt })}
93
+ />
94
+ );
95
+ }
96
+ ```
97
+
98
+ Every component's props, variants and copy-ready code are on its docs page.
99
+
100
+ ## Components
101
+
102
+ ### Backgrounds (11)
103
+
104
+ | Component | CLI name |
105
+ | --- | --- |
106
+ | [Aurora Background](https://apex-ui.in/components/aurora-background) | `aurora-background` |
107
+ | [BluePrint Background](https://apex-ui.in/components/blueprint-background) | `blueprint-background` |
108
+ | [Dot Wave Background](https://apex-ui.in/components/dot-wave-background) | `dot-wave-background` |
109
+ | [Kinetic Threads Background](https://apex-ui.in/components/kinetic-threads-background) | `kinetic-threads-background` |
110
+ | [Lens Flare Background](https://apex-ui.in/components/lens-flare-background) | `lens-flare-background` |
111
+ | [Liquid Gradient](https://apex-ui.in/components/liquid-gradient) | `liquid-gradient` |
112
+ | [Luminous Particle Ocean](https://apex-ui.in/components/luminous-particle-ocean) | `luminous-particle-ocean` |
113
+ | [Orbs Background](https://apex-ui.in/components/orbs-background) | `orbs-background` |
114
+ | [Rain Background](https://apex-ui.in/components/rain-background) | `rain-background` |
115
+ | [Ripple Background](https://apex-ui.in/components/ripple-background) | `ripple-background` |
116
+ | [Smoke Background](https://apex-ui.in/components/smoke-background) | `smoke-background` |
117
+
118
+ ### Cards (17)
119
+
120
+ | Component | CLI name |
121
+ | --- | --- |
122
+ | [Bounce Cards](https://apex-ui.in/components/bounce-cards) | `bounce-cards` |
123
+ | [Card Stack](https://apex-ui.in/components/card-stack) | `card-stack` |
124
+ | [Card Swap 3D](https://apex-ui.in/components/card-swap-3d) | `card-swap-3d` |
125
+ | [Cards](https://apex-ui.in/components/cards) | `basic-card`, `meteor-card` |
126
+ | [Folder](https://apex-ui.in/components/folder) | `folder` |
127
+ | [Glare Card](https://apex-ui.in/components/glare-card) | `glare-card` |
128
+ | [Holo Card](https://apex-ui.in/components/holo-card) | `holo-card` |
129
+ | [Hyper Card](https://apex-ui.in/components/hyper-card) | `hyper-card` |
130
+ | [Iso Stack](https://apex-ui.in/components/iso-stack) | `iso-stack` |
131
+ | [Parallax Card](https://apex-ui.in/components/parallax-card) | `parallax-card` |
132
+ | [Pixel Transition](https://apex-ui.in/components/pixel-transition) | `pixel-transition` |
133
+ | [Pricing Cards](https://apex-ui.in/components/pricing-cards) | `pricing-cards` |
134
+ | [Profile](https://apex-ui.in/components/profile) | `flip-profile`, `parallax-profile`, `profile-card` |
135
+ | [Smart Grid Card](https://apex-ui.in/components/smart-grid-card) | `smart-grid-card` |
136
+ | [Spotlight Grid](https://apex-ui.in/components/spotlight-grid) | `spotlight-grid` |
137
+ | [Swipe Cards](https://apex-ui.in/components/swipe-cards) | `swipe-cards` |
138
+ | [Testimonials](https://apex-ui.in/components/testimonials) | `testimonials` |
139
+
140
+ ### Text & Motion (18)
141
+
142
+ | Component | CLI name |
143
+ | --- | --- |
144
+ | [3D Text Ring](https://apex-ui.in/components/text-ring-3d) | `text-ring-3d` |
145
+ | [Accordion Marquee](https://apex-ui.in/components/accordion-marquee) | `accordion-marquee` |
146
+ | [Beam Bar](https://apex-ui.in/components/beam-bar) | `beam-bar` |
147
+ | [Blur Reveal Text](https://apex-ui.in/components/blur-reveal-text) | `blur-reveal-text` |
148
+ | [Circular Text](https://apex-ui.in/components/circular-text) | `circular-text` |
149
+ | [Extruded Text](https://apex-ui.in/components/extruded-text) | `extruded-text` |
150
+ | [Flip Clock](https://apex-ui.in/components/flip-clock) | `flip-clock` |
151
+ | [Glitch Text](https://apex-ui.in/components/glitch-text) | `glitch-text` |
152
+ | [Hover Text](https://apex-ui.in/components/hover-text) | `hover-text` |
153
+ | [Mask View](https://apex-ui.in/components/mask-view) | `mask-view` |
154
+ | [Proximity Text](https://apex-ui.in/components/proximity-text) | `proximity-text` |
155
+ | [Rolling Counter](https://apex-ui.in/components/rolling-counter) | `rolling-counter` |
156
+ | [Rotating Text](https://apex-ui.in/components/rotating-text) | `rotating-text` |
157
+ | [Scramble Text](https://apex-ui.in/components/scramble-text) | `scramble-text` |
158
+ | [Scroll Marquee](https://apex-ui.in/components/scroll-marquee) | `scroll-marquee` |
159
+ | [Shiny Text](https://apex-ui.in/components/shiny-text) | `shiny-text` |
160
+ | [True Focus](https://apex-ui.in/components/true-focus) | `true-focus` |
161
+ | [Typewriter Text](https://apex-ui.in/components/typewriter-text) | `typewriter-text` |
162
+
163
+ ### Navigation (8)
164
+
165
+ | Component | CLI name |
166
+ | --- | --- |
167
+ | [Animated Tabs](https://apex-ui.in/components/animated-tabs) | `animated-tabs` |
168
+ | [Floating Navbar](https://apex-ui.in/components/floating-navbar) | `floating-navbar` |
169
+ | [Gooey Nav](https://apex-ui.in/components/gooey-nav) | `gooey-nav` |
170
+ | [Magnify Dock](https://apex-ui.in/components/magnify-dock) | `magnify-dock` |
171
+ | [Nav DropDown](https://apex-ui.in/components/nav-drop-down) | `nav-dropdown` |
172
+ | [Nav Menu](https://apex-ui.in/components/nav-menu) | `nav-menu` |
173
+ | [Sidebar Nav](https://apex-ui.in/components/sidebar-nav) | `sidebar-nav` |
174
+ | [Theme Toggle](https://apex-ui.in/components/theme-toggle) | `theme-toggle` |
175
+
176
+ ### Buttons (3)
177
+
178
+ | Component | CLI name |
179
+ | --- | --- |
180
+ | [Animated Buttons](https://apex-ui.in/components/animated-buttons) | `animated-button`, `hold-to-confirm` |
181
+ | [Animated Switches](https://apex-ui.in/components/animated-switches) | `animated-switch` |
182
+ | [Star Border](https://apex-ui.in/components/star-border) | `star-border` |
183
+
184
+ ### Interactive (20)
185
+
186
+ | Component | CLI name |
187
+ | --- | --- |
188
+ | [3D Carousel](https://apex-ui.in/components/3d-carousel) | `3d-carousel`, `webgl-carousel` |
189
+ | [Avatar](https://apex-ui.in/components/avatar) | `avatar` |
190
+ | [Carousel](https://apex-ui.in/components/carousel) | `carousel`, `parallax-carousel`, `drag-carousel` |
191
+ | [Click Spark](https://apex-ui.in/components/click-spark) | `click-spark` |
192
+ | [Coverflow 3D](https://apex-ui.in/components/coverflow-3d) | `coverflow-3d` |
193
+ | [Cube Gallery](https://apex-ui.in/components/cube-gallery) | `cube-gallery` |
194
+ | [Cursor Trail](https://apex-ui.in/components/cursor-trail) | `cursor-trail` |
195
+ | [Dynamic Island](https://apex-ui.in/components/dynamic-island) | `dynamic-island` |
196
+ | [Edge Glow Form](https://apex-ui.in/components/edge-glow-form) | `edge-glow-form` |
197
+ | [Elastic Slider](https://apex-ui.in/components/elastic-slider) | `elastic-slider` |
198
+ | [FAQ Accordion](https://apex-ui.in/components/faq-accordion) | `faq-accordion` |
199
+ | [Flip Book](https://apex-ui.in/components/flip-book) | `flip-book` |
200
+ | [Image Compare](https://apex-ui.in/components/image-compare) | `image-compare` |
201
+ | [Magnet Lines](https://apex-ui.in/components/magnet-lines) | `magnet-lines` |
202
+ | [Magnetic Cursor](https://apex-ui.in/components/magnetic-cursor) | `magnetic-cursor` |
203
+ | [Pointer Follower](https://apex-ui.in/components/pointer-follower) | `pointer-follower` |
204
+ | [Receipt Printer](https://apex-ui.in/components/receipt-printer) | `receipt-printer` |
205
+ | [Stepper](https://apex-ui.in/components/stepper) | `stepper` |
206
+ | [Toast Stack](https://apex-ui.in/components/toast-stack) | `toast-stack` |
207
+ | [ToolTip](https://apex-ui.in/components/tool-tip) | `tooltip` |
208
+
209
+ ### AI (10)
210
+
211
+ | Component | CLI name |
212
+ | --- | --- |
213
+ | [AI Chat](https://apex-ui.in/components/ai-chat) | `ai-chat` |
214
+ | [AI Model Prompt](https://apex-ui.in/components/ai-model-prompt) | `ai-model-prompt` |
215
+ | [AI Prompt Box](https://apex-ui.in/components/ai-prompt-box) | `ai-prompt-box` |
216
+ | [AI Response](https://apex-ui.in/components/ai-response) | `ai-response` |
217
+ | [AI Thinking](https://apex-ui.in/components/ai-thinking) | `ai-thinking` |
218
+ | [AI Voice Bars](https://apex-ui.in/components/ai-voice-bars) | `ai-voice-bars` |
219
+ | [AI Voice Blob](https://apex-ui.in/components/ai-voice-blob) | `ai-voice-blob` |
220
+ | [AI Voice Orb](https://apex-ui.in/components/ai-voice-orb) | `ai-voice-orb` |
221
+ | [AI Voice Ring](https://apex-ui.in/components/ai-voice-ring) | `ai-voice-ring` |
222
+ | [AI Voice Wave](https://apex-ui.in/components/ai-voice-wave) | `ai-voice-wave` |
223
+
224
+ ### Loaders (1)
225
+
226
+ | Component | CLI name |
227
+ | --- | --- |
228
+ | [Loading Screens](https://apex-ui.in/components/loading-screens) | `loading-screen` |
229
+
230
+ ### Maps (2)
231
+
232
+ | Component | CLI name |
233
+ | --- | --- |
234
+ | [Dot Globe](https://apex-ui.in/components/dot-globe) | `dot-globe` |
235
+ | [World Map](https://apex-ui.in/components/world-map) | `world-map` |
236
+
237
+ ## What's new in 2.3
238
+
239
+ - 21 new components, including 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.
240
+ - AI Model Prompt now exports `DEFAULT_LLM_MODELS` and an index file, so you can import both from the folder.
241
+ - Hold to Confirm follows a delete flow with an `UndoNotice` that counts down before the action is final.
242
+ - Sliders and drag components no longer stop midway when the page text gets selected.
243
+ - Stepper and Animated Tabs keep a steady height, Shiny Text loops seamlessly, Cube Gallery is a real 3D cube and Flip Book is a hardcover book you can drag.
244
+
245
+ ## Contributing
246
+
247
+ Issues and pull requests are welcome on [GitHub](https://github.com/Mohan-Kumar-Dalei/ApexUI). For bigger changes, please open an issue first so we can talk it through.
248
+
249
+ ## License
250
+
251
+ MIT
package/package.json CHANGED
@@ -1,24 +1,32 @@
1
1
  {
2
2
  "name": "apex-ui-kit",
3
- "version": "2.3.1",
3
+ "version": "2.3.2",
4
4
  "license": "MIT",
5
- "description": "Apex UI Kit - A React component library for building modern user interfaces",
5
+ "description": "90 free, animated React components for Tailwind CSS. Add any of them to your project with one CLI command.",
6
+ "homepage": "https://apex-ui.in",
7
+ "repository": {
8
+ "type": "git",
9
+ "url": "git+https://github.com/Mohan-Kumar-Dalei/ApexUI.git"
10
+ },
11
+ "bugs": {
12
+ "url": "https://github.com/Mohan-Kumar-Dalei/ApexUI/issues"
13
+ },
6
14
  "keywords": [
7
15
  "react",
8
- "ui",
9
- "components",
10
- "library",
11
- "design",
12
- "kit",
13
- "modern",
14
- "user interface",
15
- "frontend",
16
- "web development",
17
16
  "react components",
17
+ "tailwind",
18
+ "tailwindcss",
19
+ "framer-motion",
20
+ "animation",
21
+ "animated components",
22
+ "ui",
23
+ "ui library",
18
24
  "ui components",
19
- "react ui library",
20
- "apex ui kit",
21
- "ui components library"
25
+ "cli",
26
+ "webgl",
27
+ "ai ui",
28
+ "apexui",
29
+ "apex ui kit"
22
30
  ],
23
31
  "type": "module",
24
32
  "main": "dist/cli/index.js",