shadcn-ui-react 0.7.6 → 0.7.8

package/README.md

@@ -1,6 +1,6 @@
 # 🧩 shadcn-ui-react
 
-A modern React UI kit inspired by shadcn/ui. It includes accessible Radix primitives, production-ready shared components, form helpers for `react-hook-form`, Tailwind CSS styling, and reusable demos you can copy into your app.
+A production-ready React UI library that packages `shadcn/ui` components into a single reusable library, with Tailwind CSS styling, Radix UI primitives, form helpers, and ready-to-use demos.
 
 ---
 
@@ -22,11 +22,11 @@ npm install react react-dom
 
 ---
 
-## 🚀 Getting Started
+## 🚀 Getting started
 
-### 1. Import global styles
+### 1. Import the global styles
 
-In your `main.tsx`, `App.tsx`, or layout file:
+Import the package stylesheet once in your app entry file, layout, or root component.
 
 ```tsx
 import 'shadcn-ui-react/dist/style.css';
@@ -39,11 +39,9 @@ import { Button } from 'shadcn-ui-react';
 
 export default function App() {
   return (
-    <div className="p-6">
+    <div className="flex gap-3 p-6">
       <Button>Save</Button>
-      <Button variant="outline" className="ml-2">
-        Cancel
-      </Button>
+      <Button variant="outline">Cancel</Button>
     </div>
   );
 }
@@ -51,46 +49,103 @@ export default function App() {
 
 ---
 
-## 🏭 Production scripts
-
-```bash
-npm run typecheck
-npm run test
-npm run build
-```
-
-The package is configured as an ESM library and exports compiled CSS:
-
-```tsx
-import 'shadcn-ui-react/dist/style.css';
-import { Button, FormField, DataTable } from 'shadcn-ui-react';
-```
+## 🧱 Available Components
+
+### 📦 UI Primitives
+
+- `Accordion`
+- `Alert`
+- `AlertDialog`
+- `Avatar`
+- `Badge`
+- `Breadcrumb`
+- `Button`
+- `IconButton`
+- `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`
+- `Toaster`
+- `Toggle`
+- `ToggleGroup`
+- `Tooltip`
 
 ---
 
-## 🧱 Available components
-
-### UI primitives
+### 🧠 Forms
+
+- `Form`
+- `FormField`
+- `FormSelect`
+- `FormCheckbox`
+- `FormItem`
+- `FormControl`
+- `FormLabel`
+- `FormDescription`
+- `FormMessage`
+- `UiInput`
+- `UiSelect`
+- `UiCheckbox`
 
-`Accordion`, `Alert`, `AlertDialog`, `Avatar`, `Badge`, `Breadcrumb`, `Button`, `IconButton`, `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`, `Toaster`, `Toggle`, `ToggleGroup`, `Tooltip`.
-
-### Form helpers
+---
 
-`Form`, `FormField`, `FormSelect`, `FormCheckbox`, `FormItem`, `FormControl`, `FormLabel`, `FormDescription`, `FormMessage`, `UiInput`, `UiSelect`, `UiCheckbox`.
+### 🧩 Shared Components
 
-### Shared components
+- `AlertModal`
+- `Breadcrumbs`
+- `DataTable`
+- `DataTableSkeleton`
+- `Dropzone`
+- `FileUpload`
+- `Heading`
+- `PageHead`
+- `PaginationSection`
+- `SearchInput`
+- `SearchableSelect`
 
-`AlertModal`, `Breadcrumbs`, `DataTable`, `DataTableSkeleton`, `Dropzone`, `FileUpload`, `Heading`, `PageHead`, `PaginationSection`, `SearchInput`, `SearchableSelect`.
+---
 
-### Utilities
+### 🛠️ Utilities
 
-`cn`, `useToast`, `toast`, `Icons`, `useSidebar`.
+- `cn`
+- `useToast`
+- `toast`
+- `Icons`
+- `useSidebar`
 
 ---
 
-# ✨ Demos
-
-All demos use neutral sample data so they can be published in public documentation without referencing any private product, client, tenant, store, or internal business flow.
+## ✨ Demos
 
 ## 1. Button
 
@@ -228,7 +283,7 @@ import {
 
 const schema = z.object({
   name: z.string().min(2, 'Minimum 2 characters'),
-  email: z.string().email('Invalid email'),
+  email: z.string().email('Invalid email address'),
   password: z.string().min(8, 'Minimum 8 characters'),
   role: z.enum(['owner', 'editor', 'viewer']),
   accepted: z.boolean().refine(Boolean, 'You must accept the terms')
@@ -253,7 +308,11 @@ export function FormDemo() {
   };
 
   return (
-    <Form methods={form} onSubmit={onSubmit} formProps={{ className: 'space-y-4' }}>
+    <Form
+      methods={form}
+      onSubmit={onSubmit}
+      formProps={{ className: 'space-y-4' }}
+    >
       <FormField
         control={form.control}
         name="name"
@@ -326,8 +385,16 @@ export function SearchableSelectDemo() {
         { label: 'Apple', value: 'apple', keywords: 'fruit red green sweet' },
         { label: 'Banana', value: 'banana', keywords: 'fruit yellow tropical' },
         { label: 'Orange', value: 'orange', keywords: 'fruit citrus vitamin c' },
-        { label: 'Strawberry', value: 'strawberry', keywords: 'fruit berry red sweet' },
-        { label: 'Pineapple', value: 'pineapple', keywords: 'fruit tropical sweet' }
+        {
+          label: 'Strawberry',
+          value: 'strawberry',
+          keywords: 'fruit berry red sweet'
+        },
+        {
+          label: 'Pineapple',
+          value: 'pineapple',
+          keywords: 'fruit tropical sweet'
+        }
       ]}
     />
   );
@@ -350,7 +417,7 @@ export function AccordionDemo() {
       <AccordionItem value="item-1">
         <AccordionTrigger>What is included?</AccordionTrigger>
         <AccordionContent>
-          Accessible components, Tailwind styling, and reusable form helpers.
+          Accessible components, Tailwind CSS styling, and reusable form helpers.
         </AccordionContent>
       </AccordionItem>
     </Accordion>
@@ -447,6 +514,7 @@ const data: Project[] = [
 export function DataTableDemo() {
   const [page, setPage] = React.useState(1);
   const [perPage, setPerPage] = React.useState(5);
+
   const pageCount = Math.ceil(data.length / perPage);
   const visibleRows = data.slice((page - 1) * perPage, page * perPage);
 
@@ -540,7 +608,7 @@ export function ToastDemo() {
 
 ```tsx
 import { toast } from 'sonner';
-import { Button, ToasterSonner } from 'shadcn-ui-react';
+import { Button, Sonner } from 'shadcn-ui-react';
 
 export function SonnerDemo() {
   return (
@@ -548,7 +616,8 @@ export function SonnerDemo() {
       <Button onClick={() => toast.success('Operation completed')}>
         Notify
       </Button>
-      <ToasterSonner />
+
+      <Sonner />
     </>
   );
 }
@@ -569,11 +638,12 @@ export function CardDemo() {
   return (
     <Card className="max-w-md">
       <CardHeader>
-        <CardTitle className="flex items-center justify-between">
+        <CardTitle className="flex items-center justify-between gap-4">
           Starter Kit
           <Badge>New</Badge>
         </CardTitle>
       </CardHeader>
+
       <CardContent className="text-sm text-muted-foreground">
         A simple card example with a title, badge, and supporting description.
       </CardContent>
@@ -594,6 +664,7 @@ export function TabsDemo() {
         <TabsTrigger value="overview">Overview</TabsTrigger>
         <TabsTrigger value="settings">Settings</TabsTrigger>
       </TabsList>
+
       <TabsContent value="overview">General information goes here.</TabsContent>
       <TabsContent value="settings">Preferences and configuration go here.</TabsContent>
     </Tabs>
@@ -605,12 +676,28 @@ export function TabsDemo() {
 
 ## 💅 Theming
 
-This package uses Tailwind CSS variables. You can override the default theme from your app CSS:
+This package uses Tailwind CSS variables. You can override the default theme from your app CSS.
 
 ```css
 :root {
-  --primary: oklch(0.45 0.18 260);
-  --primary-foreground: oklch(0.98 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(64.12% 0.209 16.22);
+  --destructive-foreground: oklch(97.913% 0.00011 271.152);
+  --border: oklch(0.922 0 0);
+  --input: #fdfdfd;
+  --ring: 221.2 83.2% 53.3%;
+
   --radius: 0.75rem;
 }
 ```
@@ -619,4 +706,4 @@ This package uses Tailwind CSS variables. You can override the default theme fro
 
 ## 📝 License
 
-MIT.
+MIT.