shadcn-ui-react 0.7.1 → 0.7.5

package/README.md

@@ -1,54 +1,48 @@
 # 🧩 shadcn-ui-react
 
-A simple wrapper for [shadcn/ui](https://github.com/shadcn-ui/ui) to build modern, accessible, and customizable UIs in React with minimal setup.
+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.
 
 ---
 
 ## 📦 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
+# or
+yarn add shadcn-ui-react
 ```
 
----
-
-### Tailwind IntelliSense (VS Code)
-
-To enable Tailwind CSS IntelliSense to detect classes within `cn(...)` and other utilities:
+### Peer dependencies
 
 ```bash
-npx shadcn-ui-react init-vscode
+npm install react react-dom
 ```
 
 ---
 
 ## 🚀 Getting Started
 
-### 1. Import Global Styles
+### 1. Import global styles
 
-In your `main.tsx` or `App.tsx`:
+In your `main.tsx`, `App.tsx`, or layout file:
 
 ```tsx
-import "shadcn-ui-react/dist/style.css";
+import 'shadcn-ui-react/dist/style.css';
 ```
 
-### 2. Use Components
+### 2. Use components
 
 ```tsx
-import { Button } from "shadcn-ui-react";
+import { Button } from 'shadcn-ui-react';
 
 export default function App() {
   return (
-    <div className="p-4">
-      <Button variant="default">Click me</Button>
-      <Button loading className="ml-2">
-        Loading
+    <div className="p-6">
+      <Button>Save</Button>
+      <Button variant="outline" className="ml-2">
+        Cancel
       </Button>
     </div>
   );
@@ -57,121 +51,108 @@ export default function App() {
 
 ---
 
-## 🧱 Available Components
-
-### 📦 UI Primitives
-
-- `Accordion`
-- `Alert`
-- `Avatar`
-- `Badge`
-- `Breadcrumb`
-- `Button`
-- `Calendar`
-- `Card`
-- `Carousel`
-- `Checkbox`
-- `Collapsible`
-- `Command`
-- `ContextMenu`
-- `Dialog`
-- `Drawer`
-- `DropdownMenu`
-- `Dropzone`
-- `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`
+## 🏭 Production scripts
 
----
+```bash
+npm run typecheck
+npm run test
+npm run build
+```
 
-### 🧠 Forms
+The package is configured as an ESM library and exports compiled CSS:
 
-- `Form`
-- `FormField`
+```tsx
+import 'shadcn-ui-react/dist/style.css';
+import { Button, FormField, DataTable } from 'shadcn-ui-react';
+```
 
 ---
 
-### 🔍 Inputs
+## 🧱 Available components
 
-- `SearchInput`
+### 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`.
 
-### 🧩 Utilities
+### Form helpers
 
-- `UseToast`
-- `Icons`
+`Form`, `FormField`, `FormSelect`, `FormCheckbox`, `FormItem`, `FormControl`, `FormLabel`, `FormDescription`, `FormMessage`, `UiInput`, `UiSelect`, `UiCheckbox`.
 
----
+### Shared components
+
+`AlertModal`, `Breadcrumbs`, `DataTable`, `DataTableSkeleton`, `Dropzone`, `FileUpload`, `Heading`, `PageHead`, `PaginationSection`, `SearchInput`, `SearchableSelect`.
 
-### 🛠 Shared Components
+### Utilities
 
-- `AlertModal`
-- `Breadcrumbs`
-- `DataTable` (with pagination)
-- `DataTableSkeleton`
-- `FileUpload`
-- `Heading`
-- `PageHead`
-- `PaginationSection`
+`cn`, `useToast`, `toast`, `Icons`, `useSidebar`.
 
 ---
 
-## ✨ Examples
+# ✨ 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.
 
-### 🔘 Button
+## 1. Button
 
 ```tsx
-<Button variant="default">Default</Button>
-<Button variant="outline">Outline</Button>
-<Button loading>Loading...</Button>
+import { Button } from 'shadcn-ui-react';
+
+export function ButtonDemo() {
+  return (
+    <div className="flex flex-wrap gap-3">
+      <Button>Default</Button>
+      <Button variant="outline">Outline</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="destructive">Delete</Button>
+      <Button variant="soft">Soft</Button>
+      <Button variant="gradient">Gradient</Button>
+      <Button loading>Loading</Button>
+    </div>
+  );
+}
 ```
 
----
+## 2. IconButton
 
-### ✍️ UiInput
+```tsx
+import { Pencil, Trash2 } from 'lucide-react';
+import { IconButton } from 'shadcn-ui-react';
+
+export function IconButtonDemo() {
+  return (
+    <div className="flex gap-2">
+      <IconButton aria-label="Edit item" variant="outline">
+        <Pencil />
+      </IconButton>
+
+      <IconButton aria-label="Delete item" variant="softDestructive">
+        <Trash2 />
+      </IconButton>
+    </div>
+  );
+}
+```
+
+## 3. UiInput
 
 ```tsx
-import { UiInput } from "shadcn-ui-react";
+import * as React from 'react';
+import { UiInput } from 'shadcn-ui-react';
 
-export default function Example() {
-  const [name, setName] = React.useState("");
+export function UiInputDemo() {
+  const [name, setName] = React.useState('');
 
   return (
     <UiInput
       htmlFormItemId="name"
-      variant="outline"
       label="Name"
-      placeholder="Enter name"
+      requiredLabel
+      placeholder="Enter your name"
       value={name}
-      onChange={(e) => setName(e.target.value)}
+      onChange={(event) => setName(event.target.value)}
       errorMessage={
         name.length > 0 && name.trim().length < 2
-          ? "Min 2 characters"
+          ? 'Minimum 2 characters'
           : undefined
       }
     />
@@ -179,330 +160,463 @@ export default function Example() {
 }
 ```
 
----
-
-### 🧾 UiSelect
-
-Using `items`:
+## 4. UiSelect
 
 ```tsx
-import { UiSelect } from "shadcn-ui-react";
+import * as React from 'react';
+import { UiSelect } from 'shadcn-ui-react';
 
-export default function LanguageSelectItemsDemo() {
-  const [lang, setLang] = React.useState("");
+export function UiSelectDemo() {
+  const [language, setLanguage] = React.useState('');
 
   return (
     <UiSelect
       htmlFormItemId="language"
       label="Language"
       placeholder="Select a language"
-      value={lang}
-      onChange={setLang}
-      variant="outline"
-      size="md"
+      value={language}
+      onChange={setLanguage}
       items={[
-        { label: "Spanish", value: "es" },
-        { label: "English", value: "en" },
-        { label: "Portuguese", value: "pt" },
-        { label: "Chinese", value: "zh" },
-        { label: "Japanese", value: "ja" },
-        { label: "Korean (disabled)", value: "ko", disabled: true },
+        { label: 'English', value: 'en' },
+        { label: 'Spanish', value: 'es' },
+        { label: 'Portuguese', value: 'pt' },
+        { label: 'French', value: 'fr' },
+        { label: 'Japanese', value: 'ja', disabled: true }
       ]}
-      errorMessage={!lang ? "Please select a language." : undefined}
+      errorMessage={!language ? 'Select a language.' : undefined}
     />
   );
 }
 ```
 
-Using `children`:
+## 5. UiCheckbox
 
 ```tsx
-import {
-  UiSelect,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectSeparator,
-} from "shadcn-ui-react";
+import * as React from 'react';
+import { UiCheckbox } from 'shadcn-ui-react';
 
-export default function LanguageSelectChildrenDemo() {
-  const [lang, setLang] = React.useState("");
+export function UiCheckboxDemo() {
+  const [accepted, setAccepted] = React.useState(false);
 
   return (
-    <UiSelect
-      htmlFormItemId="language_children"
-      label="Language (grouped)"
-      placeholder="Select a language"
-      value={lang}
-      onChange={setLang}
-      variant="outline"
-      size="md"
-      errorMessage={!lang ? "Please select a language." : undefined}
-    >
-      <SelectGroup>
-        <SelectLabel>Common</SelectLabel>
-        <SelectItem value="es">Spanish</SelectItem>
-        <SelectItem value="en">English</SelectItem>
-        <SelectItem value="pt">Portuguese</SelectItem>
-
-        <SelectSeparator />
-
-        <SelectLabel>Asia</SelectLabel>
-        <SelectItem value="zh">Chinese</SelectItem>
-        <SelectItem value="ja">Japanese</SelectItem>
-        <SelectItem value="ko" disabled>
-          Korean (disabled)
-        </SelectItem>
-      </SelectGroup>
-    </UiSelect>
+    <UiCheckbox
+      htmlFormItemId="terms"
+      checked={accepted}
+      onCheckedChange={(value) => setAccepted(value === true)}
+      label="I accept the terms and conditions"
+      description="You can change this option later from your account settings."
+      requiredLabel
+      errorMessage={!accepted ? 'You must accept the terms.' : undefined}
+    />
   );
 }
 ```
 
----
-
-### 🪄 Accordion
+## 6. React Hook Form + Zod
 
 ```tsx
-<Accordion type="single" collapsible>
-  <AccordionItem value="item-1">
-    <AccordionTrigger>Click me</AccordionTrigger>
-    <AccordionContent>Hidden content revealed!</AccordionContent>
-  </AccordionItem>
-</Accordion>
-```
-
----
-
-### ⚠️ Alert
-
-```tsx
-<Alert>This is an alert message</Alert>
-```
-
----
-
-### 🧾 Form
-
-```tsx
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
 import {
   Button,
   Form,
-  FormControl,
+  FormCheckbox,
   FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  Input,
-} from "shadcn-ui-react";
-import * as z from "zod";
-
-const formSchema = z.object({
-  email: z.email({
-    pattern: z.regexes.email,
-    error: "Email is required",
-  }),
-  password: z
-    .string()
-    .min(8, { message: "Password must be at least 8 characters" }),
-  gender: z.enum(["male", "female"]).optional().nullable(),
+  FormSelect
+} from 'shadcn-ui-react';
+
+const schema = z.object({
+  name: z.string().min(2, 'Minimum 2 characters'),
+  email: z.string().email('Invalid email'),
+  password: z.string().min(8, 'Minimum 8 characters'),
+  role: z.enum(['owner', 'editor', 'viewer']),
+  accepted: z.boolean().refine(Boolean, 'You must accept the terms')
 });
 
-type UserFormValue = z.infer<typeof formSchema>;
-
-export default function UserAuthForm() {
-  const defaultValues = {
-    email: "demo@domain.com",
-  };
-
-  const form = useForm<UserFormValue>({
-    resolver: zodResolver(formSchema),
-    defaultValues,
+type FormValues = z.infer<typeof schema>;
+
+export function FormDemo() {
+  const form = useForm<FormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      name: '',
+      email: '',
+      password: '',
+      role: 'viewer',
+      accepted: false
+    }
   });
 
-  const onSubmit = async (data: UserFormValue) => {};
+  const onSubmit = (values: FormValues) => {
+    console.log(values);
+  };
 
   return (
-    <Form methods={form} onSubmit={onSubmit}>
+    <Form methods={form} onSubmit={onSubmit} formProps={{ className: 'space-y-4' }}>
+      <FormField
+        control={form.control}
+        name="name"
+        label="Name"
+        placeholder="Jane Doe"
+        requiredLabel
+      />
+
       <FormField
         control={form.control}
         name="email"
-        type="email"
-        placeholder="Enter your email"
         label="Email"
-        variant="outline" // outline | soft | ghost | filled | flushed | unstyled | link
-        className="" // your style
+        type="email"
+        placeholder="jane@example.com"
+        requiredLabel
       />
 
       <FormField
         control={form.control}
         name="password"
-        type="password"
-        placeholder="Enter password"
         label="Password"
-        variant="outline" // outline | soft | ghost | filled | flushed | unstyled | link
-        className="" // your style
+        type="password"
+        placeholder="••••••••"
+        requiredLabel
       />
 
       <FormSelect
         control={form.control}
-        name="gender"
-        label="Gender"
-        variant="outline" // outline | soft | ghost | filled | flushed | unstyled | link
-        className="" // your style
-        items={[
-          { label: "Male", value: "male" },
-          { label: "Female", value: "female" },
+        name="role"
+        label="Role"
+        placeholder="Select a role"
+        options={[
+          { label: 'Owner', value: 'owner' },
+          { label: 'Editor', value: 'editor' },
+          { label: 'Viewer', value: 'viewer' }
         ]}
       />
 
-      <Button className="ml-auto w-full" type="submit">
-        Log In
+      <FormCheckbox
+        control={form.control}
+        name="accepted"
+        label="I accept the terms"
+        description="This field is required to continue."
+      />
+
+      <Button type="submit" className="w-full">
+        Create account
       </Button>
     </Form>
   );
 }
 ```
 
----
+## 7. SearchableSelect standalone
+
+```tsx
+import * as React from 'react';
+import { SearchableSelect } from 'shadcn-ui-react';
+
+export function SearchableSelectDemo() {
+  const [fruit, setFruit] = React.useState('');
+
+  return (
+    <SearchableSelect
+      value={fruit}
+      onValueChange={setFruit}
+      placeholder="Select a fruit"
+      searchPlaceholder="Search fruit..."
+      items={[
+        { 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' }
+      ]}
+    />
+  );
+}
+```
+
+## 8. Accordion
+
+```tsx
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger
+} from 'shadcn-ui-react';
+
+export function AccordionDemo() {
+  return (
+    <Accordion type="single" collapsible className="w-full">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>What is included?</AccordionTrigger>
+        <AccordionContent>
+          Accessible components, Tailwind styling, and reusable form helpers.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}
+```
+
+## 9. Dialog
+
+```tsx
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from 'shadcn-ui-react';
+
+export function DialogDemo() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Open dialog</Button>
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create note</DialogTitle>
+        </DialogHeader>
+
+        <p className="text-sm text-muted-foreground">
+          Use this area for a form, message, or confirmation content.
+        </p>
+      </DialogContent>
+    </Dialog>
+  );
+}
+```
+
+## 10. AlertModal
+
+```tsx
+import * as React from 'react';
+import { AlertModal, Button } from 'shadcn-ui-react';
+
+export function AlertModalDemo() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <Button variant="destructive" onClick={() => setOpen(true)}>
+        Delete item
+      </Button>
+
+      <AlertModal
+        isOpen={open}
+        onClose={() => setOpen(false)}
+        onConfirm={() => setOpen(false)}
+        loading={false}
+      />
+    </>
+  );
+}
+```
 
-### 📊 DataTable
+## 11. DataTable
 
 ```tsx
-import React, { useMemo, useState } from "react";
-import type { ColumnDef } from "@tanstack/react-table";
-import { DataTable } from "shadcn-ui-react";
+import * as React from 'react';
+import type { ColumnDef } from '@tanstack/react-table';
+import { DataTable } from 'shadcn-ui-react';
 
-type User = {
+type Project = {
   id: number;
   name: string;
-  email: string;
-  role: "Admin" | "Editor" | "Viewer";
+  owner: string;
+  status: 'Active' | 'Paused' | 'Completed';
 };
 
-const columns: ColumnDef<User, any>[] = [
-  { accessorKey: "id", header: "ID" },
-  {
-    accessorKey: "name",
-    header: "Name",
-    cell: ({ row }) => (
-      <div className="flex items-center gap-2">
-        <div className="h-2 w-2 rounded-full bg-primary" />
-        <span className="font-medium">{row.original.name}</span>
-      </div>
-    ),
-  },
-  { accessorKey: "email", header: "Email" },
-  {
-    accessorKey: "role",
-    header: "Role",
-    cell: ({ row }) => (
-      <span className="inline-flex items-center rounded-full border px-2 py-0.5 text-xs">
-        {row.original.role}
-      </span>
-    ),
-  },
+const columns: ColumnDef<Project>[] = [
+  { accessorKey: 'id', header: 'ID' },
+  { accessorKey: 'name', header: 'Project' },
+  { accessorKey: 'owner', header: 'Owner' },
+  { accessorKey: 'status', header: 'Status' }
 ];
 
-const data: User[] = [
-  { id: 1, name: "John Doe", email: "john@example.com", role: "Admin" },
-  { id: 2, name: "Jane Smith", email: "jane@example.com", role: "Editor" },
-  { id: 3, name: "Sam Johnson", email: "sam@example.com", role: "Viewer" },
-  { id: 4, name: "Alice Brown", email: "alice@example.com", role: "Editor" },
-  { id: 5, name: "Bob White", email: "bob@example.com", role: "Viewer" },
-  { id: 6, name: "Charlie Black", email: "charlie@example.com", role: "Admin" },
-  { id: 7, name: "Diana Green", email: "diana@example.com", role: "Viewer" },
-  { id: 8, name: "Eve Blue", email: "eve@example.com", role: "Editor" },
-  { id: 9, name: "Frank Yellow", email: "frank@example.com", role: "Viewer" },
-  { id: 10, name: "Grace Red", email: "grace@example.com", role: "Admin" },
+const data: Project[] = [
+  { id: 1, name: 'Website Redesign', owner: 'Jane Cooper', status: 'Active' },
+  { id: 2, name: 'Mobile App', owner: 'Wade Warren', status: 'Paused' },
+  { id: 3, name: 'Design System', owner: 'Esther Howard', status: 'Completed' }
 ];
 
-const Example = () => {
-  const [page, setPage] = useState(1);
-  const [perPage, setPerPage] = useState(5);
+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);
+
+  return (
+    <DataTable
+      columns={columns}
+      data={visibleRows}
+      page={page}
+      perPage={perPage}
+      pageCount={pageCount}
+      totalRows={data.length}
+      onPageChange={setPage}
+      onPageSizeChange={(size) => {
+        setPerPage(size);
+        setPage(1);
+      }}
+      template="neo"
+      accent="primary"
+      stickyHeader
+      animate
+      heightClassName="h-[420px]"
+    />
+  );
+}
+```
+
+## 12. SearchInput
 
-  const pageCount = useMemo(() => Math.ceil(data.length / perPage), [perPage]);
+```tsx
+import * as React from 'react';
+import { SearchInput } from 'shadcn-ui-react';
 
-  const paginatedData = useMemo(() => {
-    const start = (page - 1) * perPage;
-    const end = page * perPage;
-    return data.slice(start, end);
-  }, [page, perPage]);
+export function SearchInputDemo() {
+  const [search, setSearch] = React.useState('');
 
   return (
-    <div className="space-y-4">
-      <div className="space-y-1">
-        <h1 className="text-xl font-bold">DataTable v2</h1>
-        <p className="text-sm text-muted-foreground">
-          Manual pagination + templates + sticky header + accent
-        </p>
-      </div>
-
-      <DataTable
-        columns={columns}
-        data={paginatedData}
-        pageCount={pageCount}
-        page={page}
-        perPage={perPage}
-        onPageChange={setPage}
-        onPageSizeChange={(size) => {
-          setPerPage(size);
-          setPage(1);
-        }}
-        totalRows={data.length}
-        isRowsSelected={false}
-        rowPerPageLabel="Rows per page"
-        pageLabel="Page"
-        ofLabel="of"
-        rowsSelectedLabel="rows selected"
-        emptyData={<div className="py-10 text-center">No data available</div>}
-
-        // ✨ NEW (v0.6.6)
-        template="neo"          // neo | glass | compact | minimal | clean | elevated | grid | cards
-        accent="primary"        // primary | emerald | indigo | rose | amber | zinc
-        stickyHeader={true}
-        headerScroll={false}
-        animate={true}
-        heightClassName="h-[420px]" // Important: Define the height for the ScrollArea to work.
-
-        onClick={(row) => {
-          // demo: click in row
-          console.log("Row clicked:", row);
-        }}
+    <SearchInput
+      value={search}
+      placeholder="Search documents..."
+      debounceTime={400}
+      onSearch={(value) => setSearch(value ?? '')}
+    />
+  );
+}
+```
 
-        // optional
-        classNames={{
-          // root: "border-primary/20",
-          // th: "text-[10px]",
-          // td: "py-2",
+## 13. FileUpload / Dropzone
+
+```tsx
+import { Dropzone } from 'shadcn-ui-react';
+
+export function DropzoneDemo() {
+  return (
+    <Dropzone
+      onDrop={(files) => {
+        console.log(files);
+      }}
+    />
+  );
+}
+```
+
+## 14. Toast
+
+```tsx
+import { Button, Toaster, useToast } from 'shadcn-ui-react';
+
+export function ToastDemo() {
+  const { toast } = useToast();
+
+  return (
+    <>
+      <Button
+        onClick={() => {
+          toast({
+            title: 'Saved',
+            description: 'Your changes were saved successfully.'
+          });
         }}
-      />
-    </div>
+      >
+        Show toast
+      </Button>
+
+      <Toaster />
+    </>
   );
-};
+}
+```
+
+## 15. Sonner
+
+```tsx
+import { toast } from 'sonner';
+import { Button, ToasterSonner } from 'shadcn-ui-react';
 
-export default Example;
+export function SonnerDemo() {
+  return (
+    <>
+      <Button onClick={() => toast.success('Operation completed')}>
+        Notify
+      </Button>
+      <ToasterSonner />
+    </>
+  );
+}
 ```
 
----
+## 16. Card + Badge
 
-## 💅 Theming & Styling
+```tsx
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle
+} from 'shadcn-ui-react';
+
+export function CardDemo() {
+  return (
+    <Card className="max-w-md">
+      <CardHeader>
+        <CardTitle className="flex items-center justify-between">
+          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>
+    </Card>
+  );
+}
+```
 
-- Built with **Tailwind CSS**
-- Override styles using your own CSS/Tailwind classes
-- Component APIs are designed to be extensible
+## 17. Tabs
+
+```tsx
+import { Tabs, TabsContent, TabsList, TabsTrigger } from 'shadcn-ui-react';
+
+export function TabsDemo() {
+  return (
+    <Tabs defaultValue="overview">
+      <TabsList>
+        <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>
+  );
+}
+```
 
 ---
 
-## 🧪 Example Projects
+## 💅 Theming
+
+This package uses Tailwind CSS variables. You can override the default theme from your app CSS:
 
-- Vite + React + Tailwind
-- Next.js + TypeScript + shadcn-ui-react
+```css
+:root {
+  --primary: oklch(0.45 0.18 260);
+  --primary-foreground: oklch(0.98 0 0);
+  --radius: 0.75rem;
+}
+```
 
 ---
 
 ## 📝 License
 
-Licensed under the [MIT license](https://github.com/blencm/shadcn-ui-react/blob/main/LICENSE).
+MIT.