@cyberbloxai/ui-kit 0.1.0 → 0.1.1

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 +51 -48
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,73 +1,76 @@
1
- # Welcome to your Lovable project
1
+ # CyberBlox UI Kit
2
2
 
3
- ## Project info
3
+ Production-ready component library built with Radix UI and Tailwind CSS, developed by **Abhishek John Charan**.
4
4
 
5
- **URL**: https://lovable.dev/projects/REPLACE_WITH_PROJECT_ID
5
+ **Live Preview**: [https://ui.cyberbloxai.in/](https://ui.cyberbloxai.in/)
6
6
 
7
- ## How can I edit this code?
7
+ ## Overview
8
8
 
9
- There are several ways of editing your application.
9
+ CyberBlox UI Kit is a modular, themeable component library designed for building SaaS applications faster. It includes production-grade components for authentication flows, dashboards, notifications, error pages, and more.
10
10
 
11
- **Use Lovable**
11
+ ## Key Features
12
12
 
13
- Simply visit the [Lovable Project](https://lovable.dev/projects/REPLACE_WITH_PROJECT_ID) and start prompting.
13
+ - **Type-Safe**: Full TypeScript support with proper generics and inference.
14
+ - **Accessible**: WCAG compliant with proper ARIA labels and keyboard navigation.
15
+ - **Themeable**: Easy customization using CSS variables and design tokens.
16
+ - **Responsive**: Mobile-first design that looks great on every screen.
17
+ - **Modular**: Tree-shakeable by default—import only what you need.
14
18
 
15
- Changes made via Lovable will be committed automatically to this repo.
19
+ ## Installation
16
20
 
17
- **Use your preferred IDE**
18
-
19
- If you want to work locally using your own IDE, you can clone this repo and push changes. Pushed changes will also be reflected in Lovable.
20
-
21
- The only requirement is having Node.js & npm installed - [install with nvm](https://github.com/nvm-sh/nvm#installing-and-updating)
22
-
23
- Follow these steps:
24
-
25
- ```sh
26
- # Step 1: Clone the repository using the project's Git URL.
27
- git clone <YOUR_GIT_URL>
21
+ ```bash
22
+ npm install @cyberbloxai/ui-kit
23
+ ```
28
24
 
29
- # Step 2: Navigate to the project directory.
30
- cd <YOUR_PROJECT_NAME>
25
+ ## Quick Start
31
26
 
32
- # Step 3: Install the necessary dependencies.
33
- npm i
27
+ 1. **Import Styles**: Add the CSS to your main entry file (e.g., `main.tsx` or `App.tsx`):
34
28
 
35
- # Step 4: Start the development server with auto-reloading and an instant preview.
36
- npm run dev
29
+ ```tsx
30
+ import "@cyberbloxai/ui-kit/styles.css";
37
31
  ```
38
32
 
39
- **Edit a file directly in GitHub**
33
+ 2. **Use Components**:
40
34
 
41
- - Navigate to the desired file(s).
42
- - Click the "Edit" button (pencil icon) at the top right of the file view.
43
- - Make your changes and commit the changes.
35
+ ```tsx
36
+ import { Button } from "@cyberbloxai/ui-kit";
44
37
 
45
- **Use GitHub Codespaces**
38
+ function App() {
39
+ return (
40
+ <Button variant="default" onClick={() => console.log("Clicked!")}>
41
+ Click Me
42
+ </Button>
43
+ );
44
+ }
45
+ ```
46
46
 
47
- - Navigate to the main page of your repository.
48
- - Click on the "Code" button (green button) near the top right.
49
- - Select the "Codespaces" tab.
50
- - Click on "New codespace" to launch a new Codespace environment.
51
- - Edit files directly within the Codespace and commit and push your changes once you're done.
47
+ ## Technologies Used
52
48
 
53
- ## What technologies are used for this project?
49
+ - **Vite**: Next-generation frontend tooling.
50
+ - **TypeScript**: Static typing for better developer experience.
51
+ - **React**: For building user interfaces.
52
+ - **Radix UI**: Unstyled, accessible UI primitives.
53
+ - **Tailwind CSS**: Utility-first CSS framework.
54
+ - **Lucide React**: Beautiful & consistent icons.
54
55
 
55
- This project is built with:
56
+ ## Development
56
57
 
57
- - Vite
58
- - TypeScript
59
- - React
60
- - shadcn-ui
61
- - Tailwind CSS
58
+ If you want to contribute or run the project locally:
62
59
 
63
- ## How can I deploy this project?
60
+ ```bash
61
+ # Clone the repository
62
+ git clone https://github.com/abhishekjohn1507/uni-kit-forge.git
64
63
 
65
- Simply open [Lovable](https://lovable.dev/projects/REPLACE_WITH_PROJECT_ID) and click on Share -> Publish.
64
+ # Install dependencies
65
+ npm install
66
66
 
67
- ## Can I connect a custom domain to my Lovable project?
67
+ # Start development server
68
+ npm run dev
68
69
 
69
- Yes, you can!
70
+ # Build the library
71
+ npm run build:lib
72
+ ```
70
73
 
71
- To connect a domain, navigate to Project > Settings > Domains and click Connect Domain.
74
+ ## License
72
75
 
73
- Read more here: [Setting up a custom domain](https://docs.lovable.dev/features/custom-domain#custom-domain)
76
+ Created by [Abhishek John Charan](https://github.com/abhishekjohn1507).
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cyberbloxai/ui-kit",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "description": "Production-ready UI component library built on Radix UI + Tailwind CSS.",
5
5
  "repository": {
6
6
  "type": "git",