react-shadcn-kit 0.1.1 → 0.2.0

package/README.md

@@ -1,113 +1,97 @@
-# React Shadcn Kit Component Library
+# React Shadcn Kit Premium
 
-A comprehensive, atomic design-based component library built with React, TypeScript, Tailwind CSS v4, and shadcn/ui.
+A state-of-the-art, high-performance UI library built with **React 19**, **Tailwind CSS v4**, and **shadcn/ui**. This kit provides a structured, type-safe foundation for building premium web applications and marketing sites with ease.
 
-## Features
+## ✨ Key Features
 
-- **Atomic Design Structure**: Components organized into atoms, molecules, and organisms.
-- **Configurable Navigation**: `AppSidebar` and `AppNavbar` driven by JSON configuration.
-- **Responsive Layout**: Built-in `Layout` component handling mobile and desktop views.
-- **Theming**: Integrated dark mode support.
-- **TypeScript Support**: Fully typed components and configurations.
+- **🚀 Premium Aesthetics**: Modern design system with vibrant colors, glassmorphism, and smooth animations.
+- **🏗️ Atomic Architecture**: Organized into `primitives`, `composites`, and `marketing` layers for maximum reusability.
+- **⚡ Performance First**: Zero Tailwind runtime overhead, optimized build pipeline, and light-weight exports.
+- **🛡️ Type Safety**: Full TypeScript support with strict mode and exported types for every component.
+- **🌟 Interactive Elements**: Advanced components like `ActionButton` with built-in transitions and `CustomButton` with rich hover effects.
+- **📣 Accessibility**: Built-in ARIA hooks and screen-reader utilities.
 
-## Installation
+## 📦 Installation
 
 ```bash
 npm install react-shadcn-kit
-# or
-yarn add react-shadcn-kit
 ```
 
-## Usage
+## 📂 Library Structure
 
-### Basic Layout
+We follow a modular structure to keep your bundle small:
 
-Wrap your application with the `Layout` component to get the sidebar and navbar structure automatically.
+- `react-shadcn-kit/primitives`: Core UI building blocks (Button, Input, LoadingSwap, etc.)
+- `react-shadcn-kit/composites`: Complex interactive units (ActionButton, SidebarWrapper, UserMenu)
+- `react-shadcn-kit/marketing`: high-impact landing page sections (HeroSection, SocialProof, ValueProps)
+- `react-shadcn-kit/hooks`: Useful React hooks (useIsMobile, useAriaLive, useFocusVisible)
+- `react-shadcn-kit/lib`: Essential utilities (cn, date formatting, slug generation)
+
+## 🚀 Usage
+
+### 🎨 Marketing Hero Section
 
 ```tsx
-import { Layout } from "react-shadcn-kit";
+import { HeroSection } from "react-shadcn-kit/marketing";
 
-export default function App() {
+export default function Landing() {
   return (
-    <Layout>
-      <div className="p-4">
-        <h1>My App Content</h1>
-      </div>
-    </Layout>
+    <HeroSection
+      title="Create something stunning"
+      subtitle="Better design, faster development, premium results."
+      ctaText="Get Started"
+      badge="v0.1.1 is now live!"
+    />
   );
 }
 ```
 
-### Configuration
-
-The navigation components are highly configurable. You can pass a `config` prop to `AppSidebar` and `AppNavbar` (via `Layout` props if exposed, or by using them directly).
+### 🔘 Interactive Action Button
 
-#### Sidebar Configuration (`SidebarConfig`)
+Handles async states, loading indicators, and confirmation dialogs automatically.
 
 ```tsx
-import { AppSidebar } from "react-shadcn-kit";
-import { LayoutDashboard, Settings } from "lucide-react";
-
-const sidebarConfig = {
-  branding: {
-    name: "My App",
-    logo: LayoutDashboard,
-    href: "/",
-  },
-  fixed: true, // Set to false to make sidebar scroll with page
-  groups: [
-    {
-      label: "Platform",
-      items: [
-        { label: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
-        { label: "Settings", href: "/settings", icon: Settings },
-      ],
-    },
-  ],
-  user: {
-    name: "John Doe",
-    email: "john@example.com",
-    avatar: "https://github.com/shadcn.png",
-  },
-  userMenuItems: [
-    { label: "Profile", href: "/profile" },
-    { label: "Log out", onClick: () => console.log("Logout") },
-  ],
-};
-
-<AppSidebar config={sidebarConfig} />;
+import { ActionButton } from "react-shadcn-kit/composites";
+
+async function deleteProject() {
+  // Your async logic
+  return { error: false, message: "Project deleted successfully" };
+}
+
+<ActionButton
+  variant="destructive"
+  action={deleteProject}
+  requireAreYouSure
+  areYouSureDescription="This will permanently delete your project data."
+>
+  Delete Project
+</ActionButton>;
 ```
 
-#### Navbar Configuration (`NavbarConfig`)
+### 🛠️ Enhanced Utilities
 
 ```tsx
-import { AppNavbar } from "react-shadcn-kit";
-
-const navbarConfig = {
-  items: [
-    { label: "Overview", href: "/overview" },
-    { label: "Docs", href: "/docs" },
-  ],
-  searchPlaceholder: "Search docs...",
-  userMenuItems: [
-    { label: "Profile", href: "/profile" },
-    { label: "Settings", href: "/settings" },
-  ],
-};
-
-<AppNavbar config={navbarConfig} />;
+import { formatDate, generateSlug } from "react-shadcn-kit/lib";
+
+const date = formatDate(new Date()); // "Oct 24, 2023"
+const slug = generateSlug("Hello World!"); // "hello-world"
 ```
 
-## Development
+## 🛠️ Development
 
-To run the local development application:
+Run the playground locally:
 
 ```bash
 npm run dev
 ```
 
-To build the library:
+Validate exports and build:
 
 ```bash
+npm run test:exports
 npm run build
 ```
+
+## 📄 License
+
+MIT © [Tushar Yadav](https://github.com/tusharyadav21)