@cyberbloxai/ui-kit 0.3.0 → 0.3.1

package/README.md

@@ -4,6 +4,36 @@ Production-ready component library built with Radix UI and Tailwind CSS, develop
 
 **Live Preview**: [https://ui.cyberbloxai.in/](https://ui.cyberbloxai.in/)
 
+## Components
+
+CyberBlox UI includes a comprehensive set of production-ready components.
+
+### Core Components
+- **Button**: Enhanced with modern variants including `shiny`, `outline`, and `ghost`.
+- **Input & Textarea**: Polished fields with smooth transitions and rounded-lg styling.
+- **Badge**: Status indicators with `success`, `warning`, `info`, and `destructive` variants.
+- **Card**: Versatile containers with hover lift effects and rounded-xl corners.
+- **Checkbox & Switch**: Accessible toggle components with fluid animations.
+- **Select & Popover**: Modern dropdowns and floating panels with `rounded-xl` design.
+- **Dialog**: Fully accessible modal system with smooth transitions.
+- **Tabs**: Tabbed navigation with refined active states and shadows.
+
+### Advanced Components
+- **Accordion**: Vertically stacked interactive headings.
+- **Alert & Alert Dialog**: Important messages and confirmation modals.
+- **Avatar**: Visual representation of users with fallback support.
+- **Carousel**: Responsive image and content sliders.
+- **Chart**: Data visualization components built on Recharts.
+- **Command**: Fast, composable command menu/search.
+- **Form**: Powerful form builder integrated with `react-hook-form` and `zod`.
+- **Navigation Menu**: Complex header and side navigation patterns.
+- **Sidebar**: Fully responsive and collapsible dashboard sidebar.
+- **Table**: Data tables with support for headers, footers, and rows.
+- **Toast & Sonner**: Action notifications and system alerts.
+
+### And many more...
+*Breadcrumb, Calendar, Collapsible, Context Menu, Drawer, Hover Card, Label, Menubar, Pagination, Progress, Scroll Area, Separator, Sheet, Skeleton, Slider, Tooltip.*
+
 ## Overview
 
 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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyberbloxai/ui-kit",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Production-ready UI component library built on Radix UI + Tailwind CSS. Supports shadcn-style component installation.",
   "bin": "./src/cli.js",
   "repository": {

package/src/components/showcase/ComponentsShowcase.tsx

@@ -17,14 +17,15 @@ const ComponentsShowcase = () => {
       <div className="space-y-3">
         <h4 className="text-xs font-mono text-muted-foreground uppercase tracking-wider">Buttons</h4>
         <div className="flex flex-wrap gap-2">
-          <Button className="bg-primary text-primary-foreground hover:bg-primary/90">Primary</Button>
-          <Button variant="secondary" className="bg-secondary text-secondary-foreground">Secondary</Button>
-          <Button variant="outline" className="border-border/60 hover:bg-muted/60">Outline</Button>
+          <Button variant="shiny">Shiny</Button>
+          <Button>Default</Button>
+          <Button variant="secondary">Secondary</Button>
+          <Button variant="outline">Outline</Button>
           <Button variant="destructive">Destructive</Button>
-          <Button className="bg-primary text-primary-foreground" disabled>
+          <Button disabled>
             <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Loading
           </Button>
-          <Button variant="ghost" className="hover:bg-muted/60">Ghost</Button>
+          <Button variant="ghost">Ghost</Button>
         </div>
       </div>
 
@@ -32,8 +33,8 @@ const ComponentsShowcase = () => {
       <div className="space-y-3">
         <h4 className="text-xs font-mono text-muted-foreground uppercase tracking-wider">Inputs</h4>
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-          <Input placeholder="Default input" className="bg-muted/50 border-border/60" />
-          <Input placeholder="Disabled input" disabled className="bg-muted/30 border-border/40" />
+          <Input placeholder="Modern rounded input" />
+          <Input placeholder="Disabled input" disabled />
         </div>
       </div>
 
@@ -41,11 +42,13 @@ const ComponentsShowcase = () => {
       <div className="space-y-3">
         <h4 className="text-xs font-mono text-muted-foreground uppercase tracking-wider">Badges</h4>
         <div className="flex flex-wrap gap-2">
-          <Badge className="bg-primary/20 text-primary border-0">New</Badge>
-          <Badge variant="secondary" className="bg-secondary">Beta</Badge>
+          <Badge>Default</Badge>
+          <Badge variant="secondary">Secondary</Badge>
+          <Badge variant="success">Success</Badge>
+          <Badge variant="warning">Warning</Badge>
+          <Badge variant="info">Info</Badge>
           <Badge variant="destructive">Critical</Badge>
-          <Badge variant="outline" className="border-success/40 text-success">Stable</Badge>
-          <Badge variant="outline" className="border-warning/40 text-warning">Pending</Badge>
+          <Badge variant="outline">Outline</Badge>
         </div>
       </div>
 

package/src/pages/Index.tsx

@@ -60,8 +60,8 @@ const Index = () => {
         <nav className="relative z-10 flex items-center justify-between max-w-6xl mx-auto px-6 py-5">
           <div className="flex items-center gap-2">
             <Package className="h-6 w-6 text-primary" />
-            <span className="font-bold text-lg text-foreground">UIKit</span>
-            <span className="text-xs font-mono text-primary bg-primary/10 px-2 py-0.5 rounded-full">v1.0</span>
+            <span className="font-bold text-lg text-foreground">CyberBlox UI</span>
+            <span className="text-xs font-mono text-primary bg-primary/10 px-2 py-0.5 rounded-full">v0.3.0</span>
           </div>
           <div className="flex items-center gap-3">
             <Link to="/components">
@@ -173,7 +173,7 @@ const Index = () => {
       {/* Features Grid */}
       <section className="max-w-6xl mx-auto px-6 pb-24">
         <div className="text-center mb-12">
-          <h2 className="text-3xl font-bold text-foreground mb-3">Why UIKit?</h2>
+          <h2 className="text-3xl font-bold text-foreground mb-3">Why CyberBlox UI?</h2>
           <p className="text-muted-foreground">Everything you need to ship fast.</p>
         </div>
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">