@sreedev/my3dui 0.1.2 → 0.1.3
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.
- package/README.md +23 -23
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
#
|
|
1
|
+
# My3DUI - Modern 3D-Inspired UI Component Library
|
|
2
2
|
|
|
3
3
|
A TypeScript React component library combining beautiful 2D UI components with cutting-edge 3D visual effects using Three.js. Built on top of shadcn/ui, Radix UI, Framer Motion, and @react-three/fiber for maximum flexibility and extensibility.
|
|
4
4
|
|
|
@@ -34,11 +34,11 @@ A TypeScript React component library combining beautiful 2D UI components with c
|
|
|
34
34
|
## Installation
|
|
35
35
|
|
|
36
36
|
```bash
|
|
37
|
-
npm install
|
|
37
|
+
npm install my3dui react react-dom
|
|
38
38
|
# or
|
|
39
|
-
yarn add
|
|
39
|
+
yarn add my3dui react react-dom
|
|
40
40
|
# or
|
|
41
|
-
pnpm add
|
|
41
|
+
pnpm add my3dui react react-dom
|
|
42
42
|
```
|
|
43
43
|
|
|
44
44
|
### Optional Dependencies
|
|
@@ -55,7 +55,7 @@ npm install three @react-three/fiber @react-three/drei
|
|
|
55
55
|
|
|
56
56
|
```tsx
|
|
57
57
|
import React from 'react';
|
|
58
|
-
import { Button3D } from '
|
|
58
|
+
import { Button3D } from 'my3dui';
|
|
59
59
|
|
|
60
60
|
export function MyComponent() {
|
|
61
61
|
return (
|
|
@@ -73,7 +73,7 @@ export function MyComponent() {
|
|
|
73
73
|
### Card3D Component
|
|
74
74
|
|
|
75
75
|
```tsx
|
|
76
|
-
import { Card3D } from '
|
|
76
|
+
import { Card3D } from 'my3dui';
|
|
77
77
|
|
|
78
78
|
export function MyCard() {
|
|
79
79
|
return (
|
|
@@ -96,7 +96,7 @@ import {
|
|
|
96
96
|
Select,
|
|
97
97
|
Badge,
|
|
98
98
|
Card
|
|
99
|
-
} from '
|
|
99
|
+
} from 'my3dui';
|
|
100
100
|
|
|
101
101
|
export function StandardUI() {
|
|
102
102
|
return (
|
|
@@ -118,11 +118,11 @@ export function StandardUI() {
|
|
|
118
118
|
|
|
119
119
|
### Using 3D Effects with Canvas
|
|
120
120
|
|
|
121
|
-
|
|
121
|
+
my3dui 3D components require a `<Canvas>` from @react-three/fiber:
|
|
122
122
|
|
|
123
123
|
```tsx
|
|
124
124
|
import { Canvas } from '@react-three/fiber';
|
|
125
|
-
import { Bloom } from '
|
|
125
|
+
import { Bloom } from 'my3dui';
|
|
126
126
|
|
|
127
127
|
export function MyScene() {
|
|
128
128
|
return (
|
|
@@ -138,7 +138,7 @@ export function MyScene() {
|
|
|
138
138
|
|
|
139
139
|
```tsx
|
|
140
140
|
import { Canvas } from '@react-three/fiber';
|
|
141
|
-
import { Bloom } from '
|
|
141
|
+
import { Bloom } from 'my3dui';
|
|
142
142
|
|
|
143
143
|
export function BloomExample() {
|
|
144
144
|
return (
|
|
@@ -161,7 +161,7 @@ export function BloomExample() {
|
|
|
161
161
|
|
|
162
162
|
```tsx
|
|
163
163
|
import { Canvas } from '@react-three/fiber';
|
|
164
|
-
import { ImagePlane, VideoPlane } from '
|
|
164
|
+
import { ImagePlane, VideoPlane } from 'my3dui';
|
|
165
165
|
|
|
166
166
|
export function MediaPlanes() {
|
|
167
167
|
return (
|
|
@@ -180,7 +180,7 @@ export function MediaPlanes() {
|
|
|
180
180
|
|
|
181
181
|
```tsx
|
|
182
182
|
import { Canvas } from '@react-three/fiber';
|
|
183
|
-
import { Gallery3D } from '
|
|
183
|
+
import { Gallery3D } from 'my3dui';
|
|
184
184
|
|
|
185
185
|
export function MyGallery() {
|
|
186
186
|
const images = [
|
|
@@ -201,7 +201,7 @@ export function MyGallery() {
|
|
|
201
201
|
|
|
202
202
|
```tsx
|
|
203
203
|
import { Canvas } from '@react-three/fiber';
|
|
204
|
-
import { Map3D } from '
|
|
204
|
+
import { Map3D } from 'my3dui';
|
|
205
205
|
|
|
206
206
|
export function InteractiveMap() {
|
|
207
207
|
return (
|
|
@@ -220,7 +220,7 @@ export function InteractiveMap() {
|
|
|
220
220
|
|
|
221
221
|
```tsx
|
|
222
222
|
import { Canvas } from '@react-three/fiber';
|
|
223
|
-
import { Particles } from '
|
|
223
|
+
import { Particles } from 'my3dui';
|
|
224
224
|
|
|
225
225
|
export function ParticleEffect() {
|
|
226
226
|
return (
|
|
@@ -293,7 +293,7 @@ interface ParticlesProps {
|
|
|
293
293
|
|
|
294
294
|
### Using next-themes
|
|
295
295
|
|
|
296
|
-
|
|
296
|
+
my3dui supports dark mode seamlessly via next-themes:
|
|
297
297
|
|
|
298
298
|
```tsx
|
|
299
299
|
import { ThemeProvider } from 'next-themes';
|
|
@@ -314,7 +314,7 @@ export function App() {
|
|
|
314
314
|
// tailwind.config.js
|
|
315
315
|
module.exports = {
|
|
316
316
|
content: [
|
|
317
|
-
'./node_modules/
|
|
317
|
+
'./node_modules/my3dui/**/*.{js,ts,jsx,tsx}',
|
|
318
318
|
],
|
|
319
319
|
theme: {
|
|
320
320
|
extend: {
|
|
@@ -450,14 +450,14 @@ src/
|
|
|
450
450
|
|
|
451
451
|
### From shadcn/ui
|
|
452
452
|
|
|
453
|
-
All
|
|
453
|
+
All my3dui components maintain compatibility with shadcn/ui styling:
|
|
454
454
|
|
|
455
455
|
```tsx
|
|
456
456
|
// Before
|
|
457
457
|
import { Button } from '@/components/ui/button';
|
|
458
458
|
|
|
459
459
|
// After - with enhanced features
|
|
460
|
-
import { Button3D } from '
|
|
460
|
+
import { Button3D } from 'my3dui';
|
|
461
461
|
```
|
|
462
462
|
|
|
463
463
|
### Variant Changes
|
|
@@ -484,9 +484,9 @@ For 3D features, WebGL support is required.
|
|
|
484
484
|
|
|
485
485
|
1. **Code Splitting**: Import components individually
|
|
486
486
|
```tsx
|
|
487
|
-
import { Button3D } from '
|
|
487
|
+
import { Button3D } from 'my3dui'; // Better
|
|
488
488
|
// vs
|
|
489
|
-
import * as
|
|
489
|
+
import * as My3DUI from 'my3dui'; // Avoids this
|
|
490
490
|
```
|
|
491
491
|
|
|
492
492
|
2. **Lazy Load 3D Components**: Use React.lazy for 3D canvas
|
|
@@ -520,9 +520,9 @@ MIT License - see LICENSE file for details
|
|
|
520
520
|
|
|
521
521
|
## Support
|
|
522
522
|
|
|
523
|
-
- 📖 [Documentation](https://github.com/yourusername/
|
|
524
|
-
- 🐛 [Issue Tracker](https://github.com/yourusername/
|
|
525
|
-
- 💬 [Discussions](https://github.com/yourusername/
|
|
523
|
+
- 📖 [Documentation](https://github.com/yourusername/my3dui)
|
|
524
|
+
- 🐛 [Issue Tracker](https://github.com/yourusername/my3dui/issues)
|
|
525
|
+
- 💬 [Discussions](https://github.com/yourusername/my3dui/discussions)
|
|
526
526
|
|
|
527
527
|
## Changelog
|
|
528
528
|
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"name":"@sreedev/my3dui","version":"0.1.
|
|
1
|
+
{"name":"@sreedev/my3dui","version":"0.1.3","description":"A modern 3D-inspired UI component library for React with Three.js integration","author":"Sreekanth","license":"MIT","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./hooks/*":{"types":"./dist/hooks/*.d.ts","import":"./dist/hooks/*.js","require":"./dist/hooks/*.cjs"},"./components/*":{"types":"./dist/components/*.d.ts","import":"./dist/components/*.js","require":"./dist/components/*.cjs"},"./package.json":"./package.json"},"files":["dist","README.md","LICENSE"],"sideEffects":false,"repository":{"type":"git","url":"https://github.com/sree0405/m3dui"},"bugs":{"url":"https://github.com/sree0405/m3dui/issues"},"homepage":"https://github.com/sree0405/m3dui#readme","keywords":["react","ui","component-library","3d","threejs","react-three-fiber","webgl","design-system","shadcn","radix-ui","tailwind","framer-motion","typescript"],"scripts":{"clean":"rimraf dist","build":"tsup","dev":"tsup --watch","lint":"tsc --noEmit","prepublishOnly":"npm run clean && npm run lint && npm run build"},"peerDependencies":{"react":">=18 <19","react-dom":">=18 <19","three":">=0.150.0","@react-three/fiber":"^8.15.0","@react-three/drei":"^9.100.0"},"devDependencies":{"react":"^18.2.0","react-dom":"^18.2.0","@react-three/fiber":"^8.15.0","@react-three/drei":"^9.100.0","@types/node":"^20.0.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","@types/three":"^0.160.0","three":"^0.160.0","three-stdlib":"^2.28.0","typescript":"^5.3.0","tsup":"^8.0.0","rimraf":"^5.0.0"},"dependencies":{"@radix-ui/react-accordion":"^1.2.0","@radix-ui/react-alert-dialog":"^1.1.0","@radix-ui/react-aspect-ratio":"^1.1.0","@radix-ui/react-avatar":"^1.1.0","@radix-ui/react-checkbox":"^1.1.0","@radix-ui/react-collapsible":"^1.1.0","@radix-ui/react-context-menu":"^2.2.0","@radix-ui/react-dialog":"^1.1.0","@radix-ui/react-dropdown-menu":"^2.1.0","@radix-ui/react-hover-card":"^1.1.0","@radix-ui/react-label":"^2.1.0","@radix-ui/react-menubar":"^1.1.0","@radix-ui/react-navigation-menu":"^1.2.0","@radix-ui/react-popover":"^1.1.0","@radix-ui/react-progress":"^1.1.0","@radix-ui/react-radio-group":"^1.2.0","@radix-ui/react-scroll-area":"^1.1.0","@radix-ui/react-select":"^2.1.0","@radix-ui/react-separator":"^1.1.0","@radix-ui/react-slider":"^1.2.0","@radix-ui/react-slot":"^1.1.0","@radix-ui/react-switch":"^1.1.0","@radix-ui/react-tabs":"^1.1.0","@radix-ui/react-toast":"^1.2.0","@radix-ui/react-toggle":"^1.1.0","@radix-ui/react-toggle-group":"^1.1.0","@radix-ui/react-tooltip":"^1.1.0","class-variance-authority":"^0.7.0","clsx":"^2.1.0","cmdk":"^1.0.0","date-fns":"^3.0.0","embla-carousel-react":"^8.0.0","framer-motion":"^11.0.0","input-otp":"^1.0.0","lucide-react":"^0.400.0","next-themes":"^0.3.0","react-day-picker":"^8.10.0","react-hook-form":"^7.50.0","react-resizable-panels":"^2.0.0","recharts":"^2.12.0","sonner":"^1.4.0","tailwind-merge":"^2.2.0","tailwindcss-animate":"^1.0.7","vaul":"^0.9.0","zod":"^3.22.0"}}
|