shadcn-ui-react 0.2.8 → 0.3.1

package/README.md

@@ -1,70 +1,161 @@
-# shadcn-ui-react
+# 🧩 shadcn-ui-react
 
-A simple wrapper for [shadcn/ui](https://github.com/shadcn-ui/ui)
+A simple wrapper for [shadcn/ui](https://github.com/shadcn-ui/ui) to build modern, accessible, and customizable UIs in React with minimal setup.
 
-## Install
+---
 
-```sh
-pnpm add shadcn-ui-react
-# or
+## 📦 Installation
+
+Install via your preferred package manager:
+
+```bash
 npm install shadcn-ui-react
 # or
 yarn add shadcn-ui-react
+# or
+pnpm add shadcn-ui-react
 ```
 
-## Usage
+---
+
+## 🚀 Getting Started
 
-Import `style.css` in the App root:
+### 1. Import Global Styles
+
+In your `main.tsx` or `App.tsx`:
 
 ```tsx
 import "shadcn-ui-react/dist/style.css";
 ```
 
-Then use the components:
+### 2. Use Components
 
 ```tsx
 import { Button } from "shadcn-ui-react";
 
-export default function MyComponent() {
-  return <Button>Hello world</Button>;
-}
-```
-
-```tsx
-import { Card } from "shadcn-ui-react";
-
-export default function MyComponent() {
+export default function App() {
   return (
-    <Card>
-      <h1>Hello World</h1>
-    </Card>
+    <div className="p-4">
+      <Button variant="default">Click me</Button>
+      <Button loading className="ml-2">Loading</Button>
+    </div>
   );
 }
 ```
 
+---
+
+## 🧱 Available Components
+
+### 📦 UI Primitives
+
+- `Accordion`
+- `Alert`
+- `Avatar`
+- `Badge`
+- `Breadcrumb`
+- `Button`
+- `Calendar`
+- `Card`
+- `Carousel`
+- `Checkbox`
+- `Collapsible`
+- `Command`
+- `ContextMenu`
+- `Dialog`
+- `Drawer`
+- `DropdownMenu`
+- `HoverCard`
+- `Input`
+- `InputOtp`
+- `Label`
+- `Menubar`
+- `Modal`
+- `NavigationMenu`
+- `Pagination`
+- `Popover`
+- `Progress`
+- `RadioGroup`
+- `Resizable`
+- `ScrollArea`
+- `Select`
+- `Separator`
+- `Sheet`
+- `Skeleton`
+- `Slider`
+- `Sonner`
+- `Switch`
+- `Table`
+- `Tabs`
+- `Textarea`
+- `Toast`
+- `Toggle`
+- `ToggleGroup`
+- `Tooltip`
+
+---
+
+### 🧠 Forms
+
+- `Form`
+- `FormField`
+
+---
+
+### 🔍 Inputs
+
+- `SearchInput`
+
+---
+
+### 🧩 Utilities
+
+- `UseToast`
+- `Icons`
+
+---
+
+### 🛠 Shared Components
+
+- `AlertModal`
+- `Breadcrumbs`
+- `DataTable` (with pagination)
+- `DataTableSkeleton`
+- `FileUpload`
+- `Heading`
+- `PageHead`
+- `PaginationSection`
+
+---
+
+## ✨ Examples
+
+### 🔘 Button
+
 ```tsx
-import React, { useState } from "react";
-import { SearchInput } from "./components/search-input";
+<Button variant="default">Default</Button>
+<Button variant="outline">Outline</Button>
+<Button loading>Loading...</Button>
+```
 
-export default function MyComponent() {
-  const [searchTerm, setSearchTerm] = useState("");
+### 🪄 Accordion
 
-  const handleSearch = (term?: string) => {
-    setSearchTerm(term);
-    console.log("Search term:", term);
-  };
+```tsx
+<Accordion type="single" collapsible>
+  <AccordionItem value="item-1">
+    <AccordionTrigger>Click me</AccordionTrigger>
+    <AccordionContent>Hidden content revealed!</AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
 
-  return (
-    <SearchInput
-      placeholder="Search"
-      value={searchTerm}
-      onSearch={handleSearch}
-    />
-  );
-}
+### ⚠️ Alert
+
+```tsx
+<Alert>This is an alert message</Alert>
 ```
 
-## Example of a login form
+### 🧾 Form
 
 ```tsx
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -82,7 +173,7 @@ import {
 import * as z from "zod";
 
 const formSchema = z.object({
-  email: z.string().email({ message: "Enter a valid email address" }),
+  email: z.string({required_error: "Email is required"}).email({ message: "Enter a valid email address" }),
   password: z
     .string()
     .min(8, { message: "Password must be at least 8 characters" }),
@@ -106,10 +197,9 @@ export default function UserAuthForm() {
       <FormField
         control={form.control}
         name="email"
+        type="email"
         placeholder="Enter your email"
-        onChange={(e) => {
-          form.setValue("firstname", e.target.value);
-        }}
+        label="Email"
       />
       <Button className="ml-auto w-full" type="submit">
         Log In
@@ -119,20 +209,20 @@ export default function UserAuthForm() {
 }
 ```
 
-## Example of a data table
+### 📊 DataTable
 
 ```tsx
 import React, { useState } from "react";
 import { DataTable } from "shadcn-ui-react";
 import { ColumnDef } from "@tanstack/react-table";
 
-type Data = {
+type User = {
   id: number;
   name: string;
-  age: number;
+  email: string;
 };
 
-const columns: ColumnDef<Data, any>[] = [
+const columns: ColumnDef<User, any>[] = [
   {
     accessorKey: "id",
     header: "ID",
@@ -142,38 +232,55 @@ const columns: ColumnDef<Data, any>[] = [
     header: "Name",
   },
   {
-    accessorKey: "age",
-    header: "Age",
+    accessorKey: "email",
+    header: "Email",
   },
 ];
 
-const data: Data[] = [
-  { id: 1, name: "John Doe", age: 28 },
-  { id: 2, name: "Jane Smith", age: 34 },
-  { id: 3, name: "Sam Johnson", age: 45 },
+const data: User[] = [
+  { id: 1, name: "John Doe", email: "john@example.com" },
+  { id: 2, name: "Jane Smith", email: "jane@example.com" },
+  { id: 3, name: "Sam Johnson", email: "sam@example.com" },
+  { id: 4, name: "Alice Brown", email: "alice@example.com" },
+  { id: 5, name: "Bob White", email: "bob@example.com" },
+  { id: 6, name: "Charlie Black", email: "charlie@example.com" },
+  { id: 7, name: "Diana Green", email: "diana@example.com" },
+  { id: 8, name: "Eve Blue", email: "eve@example.com" },
+  { id: 9, name: "Frank Yellow", email: "frank@example.com" },
+  { id: 10, name: "Grace Red", email: "grace@example.com" },
 ];
 
 const Example = () => {
   const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(5);
+
+  const paginatedData = data.slice((page - 1) * perPage, page * perPage);
 
   const handlePageChange = (newPage: number) => {
     setPage(newPage);
   };
 
-  const handleRowClick = (row: Data) => {
-    console.log("Row clicked:", row);
+  const handlePageSizeChange = (newPageSize: number) => {
+    setPerPage(newPageSize);
+    setPage(1); // Reset to the first page when page size changes
   };
 
   return (
     <div>
-      <h1>Data Table Example</h1>
+      <h1 className="text-xl font-bold mb-4">Data Table with Pagination</h1>
       <DataTable
         columns={columns}
-        data={data}
-        pageCount={3}
+        data={paginatedData}
+        pageCount={Math.ceil(data.length / perPage)}
         page={page}
+        perPage={perPage}
         onPageChange={handlePageChange}
-        onClick={handleRowClick}
+        onPageSizeChange={handlePageSizeChange}
+        rowPerPageLabel="Rows per page"
+        pageLabel="Page"
+        ofLabel="of"
+        rowsSelectedLabel="rows selected"
+        emptyData={<div>No data available</div>}
       />
     </div>
   );
@@ -181,3 +288,24 @@ const Example = () => {
 
 export default Example;
 ```
+
+---
+
+## 💅 Theming & Styling
+
+- Built with **Tailwind CSS**
+- Override styles using your own CSS/Tailwind classes
+- Component APIs are designed to be extensible
+
+---
+
+## 🧪 Example Projects
+
+- Vite + React + Tailwind
+- Next.js + TypeScript + shadcn-ui-react
+
+---
+
+## 📝 License
+
+Licensed under the [MIT license](https://github.com/blencm/shadcn-ui-react/blob/main/LICENSE).