modula-ui 1.0.2 → 1.0.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.
Files changed (2) hide show
  1. package/README.md +84 -21
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,35 +1,98 @@
1
- This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
1
+ # Modula UI
2
2
 
3
- ## Getting Started
4
- First, run the development server:
3
+ A library of modern UI patterns and complete interfaces built with [Shadcn](https://ui.shadcn.com/) and [Tailwind CSS](https://tailwindcss.com/). Get beautiful, functional UIs without building from scratch.
4
+
5
+ ## ✨ Features
6
+
7
+ - 🎨 **Complete UI Patterns** - Full-featured interfaces, not just individual components
8
+ - 🚀 **Easy Integration** - Simple CLI to add entire UI blocks to your project
9
+ - 📦 **Copy & Paste** - Browse interfaces in your browser and copy code directly
10
+ - 🎯 **Modern Stack** - Built with Next.js, React 19, and Tailwind CSS 4
11
+ - 🔧 **Customizable** - Full control over styling and behavior
12
+ - 📱 **Responsive** - Mobile-first design approach
13
+
14
+ ## 🚀 Quick Start
15
+
16
+ ### Browse UI Patterns
17
+
18
+ Run the library locally to browse all available UI patterns and interfaces:
19
+
20
+ ```bash
21
+ npx modula-ui
22
+ ```
23
+
24
+ This will start a local server at `http://localhost:3177` where you can:
25
+ - Preview all UI patterns
26
+ - Copy interface code
27
+ - See live examples
28
+
29
+ ### Add UI Patterns to Your Project
30
+
31
+ Use the CLI to add complete interfaces directly to your project:
32
+
33
+ ```bash
34
+ npx modula-ui add <component-name>
35
+ ```
36
+
37
+ The CLI will automatically:
38
+ 1. Install required dependencies
39
+ 2. Install necessary Shadcn UI components
40
+ 3. Copy the complete interface files to your project
41
+
42
+ ## 📦 Available UI Patterns
43
+
44
+ - **video-conference** - Full-featured video conferencing interface with participant grid, controls, and animations
45
+ - **group-chat** - Modern group chat interface with sidebar, message threads, and real-time feel
46
+
47
+
48
+ ## 🛠️ Installation
49
+
50
+ ### Prerequisites
51
+
52
+ - Node.js >= 18.17.0
53
+ - A Next.js or React project with Tailwind CSS configured
54
+
55
+ ### Example: Adding a UI Block
5
56
 
6
57
  ```bash
7
- npm run dev
8
- # or
9
- yarn dev
10
- # or
11
- pnpm dev
12
- # or
13
- bun dev
58
+ # Add the video conference page
59
+ npx modula-ui add video-conference
60
+
61
+ # Add the group chat interface
62
+ npx modula-ui add group-chat
14
63
  ```
15
64
 
16
- Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
65
+ The interface will be added to `src/library/<type>/` (or `library/<type>/` if no `src` folder exists).
17
66
 
18
- You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
67
+ ## 🎯 Usage
19
68
 
20
- This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
69
+ After adding a UI pattern, import and use it in your project:
70
+
71
+ ```jsx
72
+ import VideoConferencePage from '@/library/pages/VideoConferencePage';
73
+
74
+ export default function MyPage() {
75
+ return <VideoConferencePage />;
76
+ }
77
+ ```
21
78
 
22
- ## Learn More
79
+ ## 🏗️ Tech Stack
23
80
 
24
- To learn more about Next.js, take a look at the following resources:
81
+ - **Framework:** Next.js 16
82
+ - **UI Library:** React 19
83
+ - **Styling:** Tailwind CSS 4
84
+ - **Components:** Radix UI primitives
85
+ - **Animations:** Framer Motion
86
+ - **Icons:** Lucide React
87
+ - **Charts:** Recharts
25
88
 
26
- - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
27
- - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
89
+ ## 📄 License
28
90
 
29
- You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
91
+ MIT © Mary Ojo
30
92
 
31
- ## Deploy on Vercel
32
93
 
33
- The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
94
+ ## 🔗 Links
34
95
 
35
- Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
96
+ - [npm Package](https://www.npmjs.com/package/modula-ui)
97
+ - [Shadcn UI](https://ui.shadcn.com/)
98
+ - [Tailwind CSS](https://tailwindcss.com/)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "modula-ui",
3
- "version": "1.0.2",
3
+ "version": "1.0.3",
4
4
  "description": "A library of modern interfaces and UI patterns with great UX built with Shadcn",
5
5
  "keywords": [
6
6
  "tailwind",