feat: new CLI, Styles and more (#637)

.changeset/slimy-cooks-glow.md

@@ -0,0 +1,5 @@
+---
+"shadcn-ui": minor
+---
+
+everything is new

.eslintrc.json

@@ -10,13 +10,12 @@
   "plugins": ["tailwindcss"],
   "rules": {
     "@next/next/no-html-link-for-pages": "off",
-    "react/jsx-key": "off",
     "tailwindcss/no-custom-classname": "off",
     "tailwindcss/classnames-order": "error"
   },
   "settings": {
     "tailwindcss": {
-      "callees": ["cn"],
+      "callees": ["cn", "cva"],
       "config": "tailwind.config.cjs"
     },
     "next": {

.github/workflows/code-check.yml

@@ -22,6 +22,7 @@ jobs:
         name: Install pnpm
         id: pnpm-install
         with:
+          version: 8.6.1
           run_install: false
 
       - name: Get pnpm store directory
@@ -57,6 +58,7 @@ jobs:
         name: Install pnpm
         id: pnpm-install
         with:
+          version: 8.6.1
           run_install: false
 
       - name: Get pnpm store directory
@@ -94,6 +96,7 @@ jobs:
         name: Install pnpm
         id: pnpm-install
         with:
+          version: 8.6.1
           run_install: false
 
       - name: Get pnpm store directory

.github/workflows/prerelease.yml

@@ -24,6 +24,8 @@ jobs:
 
       - name: Use PNPM
         uses: pnpm/action-setup@v2.2.4
+        with:
+          version: 8.6.1
 
       - name: Use Node.js 18
         uses: actions/setup-node@v3

.github/workflows/release.yml

@@ -20,10 +20,13 @@ jobs:
 
       - name: Use PNPM
         uses: pnpm/action-setup@v2.2.4
+        with:
+          version: 8.6.1
 
       - name: Use Node.js 18
         uses: actions/setup-node@v3
         with:
+          version: 8.6.1
           node-version: 18
           cache: "pnpm"
 

.github/workflows/test.yml

@@ -0,0 +1,42 @@
+name: Test
+
+on:
+  pull_request:
+    branches: ["*"]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    name: Test
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - uses: pnpm/action-setup@v2.2.4
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 8.6.1
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: |
+          echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      - name: Install dependencies
+        run: pnpm install
+
+      - run: pnpm test

.prettierignore

@@ -3,4 +3,4 @@ node_modules
 .next
 build
 .contentlayer
-apps/www/pages/api/components.json
+apps/www/pages/api/registry.json

.vscode/settings.json

@@ -2,5 +2,9 @@
   "eslint.workingDirectories": [
     { "pattern": "apps/*/" },
     { "pattern": "packages/*/" }
+  ],
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
   ]
 }

apps/www/.prettierignore

@@ -2,4 +2,5 @@ dist
 node_modules
 .next
 build
-.contentlayer
+.contentlayer
+__registry__/index.tsx

apps/www/__registry__/.autogenerated

@@ -0,0 +1 @@
+// The content of this directory is autogenerated by the registry server.

apps/www/__registry__/README.md

@@ -0,0 +1 @@
+> Files inside this directory is autogenerated by `./scripts/build-registry.ts`. **Do not edit them manually.** - shadcn

apps/www/app/docs/[[...slug]]/page.tsx

@@ -10,13 +10,13 @@ import Balancer from "react-wrap-balancer"
 import { siteConfig } from "@/config/site"
 import { getTableOfContents } from "@/lib/toc"
 import { absoluteUrl, cn } from "@/lib/utils"
-import { badgeVariants } from "@/components/ui/badge"
-import { ScrollArea } from "@/components/ui/scroll-area"
-import { Separator } from "@/components/ui/separator"
 import { Icons } from "@/components/icons"
 import { Mdx } from "@/components/mdx-components"
 import { DocsPager } from "@/components/pager"
 import { DashboardTableOfContents } from "@/components/toc"
+import { badgeVariants } from "@/registry/new-york/ui/badge"
+import { ScrollArea } from "@/registry/new-york/ui/scroll-area"
+import { Separator } from "@/registry/new-york/ui/separator"
 
 interface DocPageProps {
   params: {
@@ -133,18 +133,20 @@ export default async function DocPage({ params }: DocPageProps) {
             )}
           </div>
         ) : null}
-        <Separator className="my-4 md:my-6" />
-        <Mdx code={doc.body.code} />
-        <Separator className="my-4 md:my-6" />
+        <div className="pb-12 pt-8">
+          <Mdx code={doc.body.code} />
+        </div>
         <DocsPager doc={doc} />
       </div>
-      <div className="hidden text-sm xl:block">
-        <div className="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] overflow-hidden pt-6">
-          <ScrollArea className="pb-10">
-            <DashboardTableOfContents toc={toc} />
-          </ScrollArea>
+      {doc.toc && (
+        <div className="hidden text-sm xl:block">
+          <div className="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] overflow-hidden pt-6">
+            <ScrollArea className="pb-10">
+              <DashboardTableOfContents toc={toc} />
+            </ScrollArea>
+          </div>
         </div>
-      </div>
+      )}
     </main>
   )
 }

apps/www/app/docs/layout.tsx

@@ -1,6 +1,6 @@
 import { docsConfig } from "@/config/docs"
-import { ScrollArea } from "@/components/ui/scroll-area"
 import { DocsSidebarNav } from "@/components/sidebar-nav"
+import { ScrollArea } from "@/registry/new-york/ui/scroll-area"
 
 interface DocsLayoutProps {
   children: React.ReactNode
@@ -8,13 +8,15 @@ interface DocsLayoutProps {
 
 export default function DocsLayout({ children }: DocsLayoutProps) {
   return (
-    <div className="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
-      <aside className="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 overflow-y-auto border-r md:sticky md:block">
-        <ScrollArea className="py-6 pr-6 lg:py-8">
-          <DocsSidebarNav items={docsConfig.sidebarNav} />
-        </ScrollArea>
-      </aside>
-      {children}
+    <div className="border-b">
+      <div className="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
+        <aside className="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block">
+          <ScrollArea className="h-full py-6 pl-8 pr-6 lg:py-8">
+            <DocsSidebarNav items={docsConfig.sidebarNav} />
+          </ScrollArea>
+        </aside>
+        {children}
+      </div>
     </div>
   )
 }

apps/www/app/examples/authentication/components/user-auth-form.tsx

@@ -3,10 +3,10 @@
 import * as React from "react"
 
 import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
 import { Icons } from "@/components/icons"
+import { Button } from "@/registry/new-york/ui/button"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
 
 interface UserAuthFormProps extends React.HTMLAttributes<HTMLDivElement> {}
 

apps/www/app/examples/authentication/page.tsx

@@ -4,7 +4,7 @@ import Link from "next/link"
 import { Command } from "lucide-react"
 
 import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
+import { buttonVariants } from "@/registry/new-york/ui/button"
 import { UserAuthForm } from "@/app/examples/authentication/components/user-auth-form"
 
 export const metadata: Metadata = {
@@ -35,20 +35,14 @@ export default function AuthenticationPage() {
         <Link
           href="/examples/authentication"
           className={cn(
-            buttonVariants({ variant: "ghost", size: "sm" }),
+            buttonVariants({ variant: "ghost" }),
             "absolute right-4 top-4 md:right-8 md:top-8"
           )}
         >
           Login
         </Link>
         <div className="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex">
-          <div
-            className="absolute inset-0 bg-cover"
-            style={{
-              backgroundImage:
-                "url(https://images.unsplash.com/photo-1590069261209-f8e9b8642343?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1376&q=80)",
-            }}
-          />
+          <div className="absolute inset-0 bg-zinc-900" />
           <div className="relative z-20 flex items-center text-lg font-medium">
             <Command className="mr-2 h-6 w-6" /> Acme Inc
           </div>
@@ -57,7 +51,7 @@ export default function AuthenticationPage() {
               <p className="text-lg">
                 &ldquo;This library has saved me countless hours of work and
                 helped me deliver stunning designs to my clients faster than
-                ever before. Highly recommended!&rdquo;
+                ever before.&rdquo;
               </p>
               <footer className="text-sm">Sofia Davis</footer>
             </blockquote>

apps/www/app/examples/cards/components/cookie-settings.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { Button } from "@/components/ui/button"
+import { Button } from "@/registry/new-york/ui/button"
 import {
   Card,
   CardContent,
@@ -8,9 +8,9 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card"
-import { Label } from "@/components/ui/label"
-import { Switch } from "@/components/ui/switch"
+} from "@/registry/new-york/ui/card"
+import { Label } from "@/registry/new-york/ui/label"
+import { Switch } from "@/registry/new-york/ui/switch"
 
 export function DemoCookieSettings() {
   return (

apps/www/app/examples/cards/components/create-account.tsx

@@ -1,6 +1,7 @@
 "use client"
 
-import { Button } from "@/components/ui/button"
+import { Icons } from "@/components/icons"
+import { Button } from "@/registry/new-york/ui/button"
 import {
   Card,
   CardContent,
@@ -8,10 +9,9 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { Icons } from "@/components/icons"
+} from "@/registry/new-york/ui/card"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
 
 export function DemoCreateAccount() {
   return (

apps/www/app/examples/cards/components/date-picker.tsx

@@ -1,6 +1,6 @@
-import { Card, CardContent } from "@/components/ui/card"
-import { Label } from "@/components/ui/label"
-import { DatePickerWithRange } from "@/components/examples/date-picker/with-range"
+import DatePickerWithRange from "@/registry/default/example/date-picker-with-range"
+import { Card, CardContent } from "@/registry/new-york/ui/card"
+import { Label } from "@/registry/new-york/ui/label"
 
 export function DemoDatePicker() {
   return (

apps/www/app/examples/cards/components/github-card.tsx

@@ -1,13 +1,13 @@
 import { ChevronDown, Circle, Plus, Star } from "lucide-react"
 
-import { Button } from "@/components/ui/button"
+import { Button } from "@/registry/new-york/ui/button"
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card"
+} from "@/registry/new-york/ui/card"
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -16,8 +16,8 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Separator } from "@/components/ui/separator"
+} from "@/registry/new-york/ui/dropdown-menu"
+import { Separator } from "@/registry/new-york/ui/separator"
 
 export function DemoGithub() {
   return (
@@ -71,7 +71,7 @@ export function DemoGithub() {
           </div>
           <div className="flex items-center">
             <Star className="mr-1 h-3 w-3" />
-            10k
+            20k
           </div>
           <div>Updated April 2023</div>
         </div>

apps/www/app/examples/cards/components/notifications.tsx

@@ -6,20 +6,20 @@ import {
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card"
+} from "@/registry/new-york/ui/card"
 
 export function DemoNotifications() {
   return (
     <Card>
-      <CardHeader>
+      <CardHeader className="pb-3">
         <CardTitle>Notifications</CardTitle>
         <CardDescription>
           Choose what you want to be notified about.
         </CardDescription>
       </CardHeader>
-      <CardContent className="grid gap-1 p-1.5">
-        <div className="flex items-center space-x-4 rounded-md p-2 hover:bg-accent hover:text-accent-foreground">
-          <Bell className="h-5 w-5" />
+      <CardContent className="grid gap-1">
+        <div className="-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground">
+          <Bell className="mt-px h-5 w-5" />
           <div className="space-y-1">
             <p className="text-sm font-medium leading-none">Everything</p>
             <p className="text-sm text-muted-foreground">
@@ -27,8 +27,8 @@ export function DemoNotifications() {
             </p>
           </div>
         </div>
-        <div className="flex items-center space-x-4 rounded-md bg-accent p-2 text-accent-foreground">
-          <AtSign className="h-5 w-5" />
+        <div className="-mx-2 flex items-start space-x-4 rounded-md bg-accent p-2 text-accent-foreground transition-all">
+          <AtSign className="mt-px h-5 w-5" />
           <div className="space-y-1">
             <p className="text-sm font-medium leading-none">Available</p>
             <p className="text-sm text-muted-foreground">
@@ -36,8 +36,8 @@ export function DemoNotifications() {
             </p>
           </div>
         </div>
-        <div className="flex items-center space-x-4 rounded-md p-2 hover:bg-accent hover:text-accent-foreground">
-          <BellOff className="h-5 w-5" />
+        <div className="-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground">
+          <BellOff className="mt-px h-5 w-5" />
           <div className="space-y-1">
             <p className="text-sm font-medium leading-none">Ignoring</p>
             <p className="text-sm text-muted-foreground">

apps/www/app/examples/cards/components/payment-method.tsx

@@ -1,6 +1,7 @@
 import { CreditCard } from "lucide-react"
 
-import { Button } from "@/components/ui/button"
+import { Icons } from "@/components/icons"
+import { Button } from "@/registry/new-york/ui/button"
 import {
   Card,
   CardContent,
@@ -8,18 +9,17 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+} from "@/registry/new-york/ui/card"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import { RadioGroup, RadioGroupItem } from "@/registry/new-york/ui/radio-group"
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select"
-import { Icons } from "@/components/icons"
+} from "@/registry/new-york/ui/select"
 
 export function DemoPaymentMethod() {
   return (

apps/www/app/examples/cards/components/report-an-issue.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { Button } from "@/components/ui/button"
+import { Button } from "@/registry/new-york/ui/button"
 import {
   Card,
   CardContent,
@@ -8,17 +8,17 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
+} from "@/registry/new-york/ui/card"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select"
-import { Textarea } from "@/components/ui/textarea"
+} from "@/registry/new-york/ui/select"
+import { Textarea } from "@/registry/new-york/ui/textarea"
 
 export function DemoReportAnIssue() {
   return (

apps/www/app/examples/cards/components/share-document.tsx

@@ -1,23 +1,27 @@
 "use client"
 
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Button } from "@/components/ui/button"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+import { Button } from "@/registry/new-york/ui/button"
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card"
-import { Input } from "@/components/ui/input"
+} from "@/registry/new-york/ui/card"
+import { Input } from "@/registry/new-york/ui/input"
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select"
-import { Separator } from "@/components/ui/separator"
+} from "@/registry/new-york/ui/select"
+import { Separator } from "@/registry/new-york/ui/separator"
 
 export function DemoShareDocument() {
   return (

apps/www/app/examples/cards/components/team-members.tsx

@@ -1,14 +1,18 @@
 import { ChevronDown } from "lucide-react"
 
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Button } from "@/components/ui/button"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+import { Button } from "@/registry/new-york/ui/button"
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card"
+} from "@/registry/new-york/ui/card"
 import {
   Command,
   CommandEmpty,
@@ -16,12 +20,12 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-} from "@/components/ui/command"
+} from "@/registry/new-york/ui/command"
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/components/ui/popover"
+} from "@/registry/new-york/ui/popover"
 
 export function DemoTeamMembers() {
   return (

apps/www/app/examples/dashboard/components/date-range-picker.tsx

@@ -6,13 +6,13 @@ import { Calendar as CalendarIcon } from "lucide-react"
 import { DateRange } from "react-day-picker"
 
 import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Calendar } from "@/components/ui/calendar"
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/components/ui/popover"
+} from "@/registry/new-york/ui/popover"
 
 export function CalendarDateRangePicker({
   className,
@@ -29,9 +29,8 @@ export function CalendarDateRangePicker({
           <Button
             id="date"
             variant={"outline"}
-            size="sm"
             className={cn(
-              "w-[240px] justify-start text-left font-normal",
+              "w-[260px] justify-start text-left font-normal",
               !date && "text-muted-foreground"
             )}
           >

apps/www/app/examples/dashboard/components/recent-sales.tsx

@@ -1,4 +1,8 @@
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
 
 export function RecentSales() {
   return (

apps/www/app/examples/dashboard/components/search.tsx

@@ -1,4 +1,4 @@
-import { Input } from "@/components/ui/input"
+import { Input } from "@/registry/new-york/ui/input"
 
 export function Search() {
   return (
@@ -6,7 +6,7 @@ export function Search() {
       <Input
         type="search"
         placeholder="Search..."
-        className="h-9 md:w-[100px] lg:w-[300px]"
+        className="md:w-[100px] lg:w-[300px]"
       />
     </div>
   )

apps/www/app/examples/dashboard/components/team-switcher.tsx

@@ -4,8 +4,12 @@ import * as React from "react"
 import { Check, ChevronsUpDown, PlusCircle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Button } from "@/components/ui/button"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+import { Button } from "@/registry/new-york/ui/button"
 import {
   Command,
   CommandEmpty,
@@ -14,7 +18,7 @@ import {
   CommandItem,
   CommandList,
   CommandSeparator,
-} from "@/components/ui/command"
+} from "@/registry/new-york/ui/command"
 import {
   Dialog,
   DialogContent,
@@ -23,21 +27,21 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
+} from "@/registry/new-york/ui/dialog"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/components/ui/popover"
+} from "@/registry/new-york/ui/popover"
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select"
+} from "@/registry/new-york/ui/select"
 
 const groups = [
   {
@@ -83,7 +87,6 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
         <PopoverTrigger asChild>
           <Button
             variant="outline"
-            size="sm"
             role="combobox"
             aria-expanded={open}
             aria-label="Select a team"
@@ -93,6 +96,7 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
               <AvatarImage
                 src={`https://avatar.vercel.sh/${selectedTeam.value}.png`}
                 alt={selectedTeam.label}
+                className="grayscale"
               />
               <AvatarFallback>SC</AvatarFallback>
             </Avatar>
@@ -120,6 +124,7 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
                         <AvatarImage
                           src={`https://avatar.vercel.sh/${team.value}.png`}
                           alt={team.label}
+                          className="grayscale"
                         />
                         <AvatarFallback>SC</AvatarFallback>
                       </Avatar>

apps/www/app/examples/dashboard/components/user-nav.tsx

@@ -1,7 +1,11 @@
 import { CreditCard, LogOut, PlusCircle, Settings, User } from "lucide-react"
 
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Button } from "@/components/ui/button"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+import { Button } from "@/registry/new-york/ui/button"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -11,7 +15,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from "@/registry/new-york/ui/dropdown-menu"
 
 export function UserNav() {
   return (

apps/www/app/examples/dashboard/page.tsx

@@ -2,15 +2,20 @@ import { Metadata } from "next"
 import Image from "next/image"
 import { Activity, CreditCard, DollarSign, Download, Users } from "lucide-react"
 
-import { Button } from "@/components/ui/button"
+import { Button } from "@/registry/new-york/ui/button"
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+} from "@/registry/new-york/ui/card"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/new-york/ui/tabs"
 import { CalendarDateRangePicker } from "@/app/examples/dashboard/components/date-range-picker"
 import { MainNav } from "@/app/examples/dashboard/components/main-nav"
 import { Overview } from "@/app/examples/dashboard/components/overview"
@@ -59,7 +64,7 @@ export default function DashboardPage() {
             <h2 className="text-3xl font-bold tracking-tight">Dashboard</h2>
             <div className="flex items-center space-x-2">
               <CalendarDateRangePicker />
-              <Button size="sm">
+              <Button>
                 <Download className="mr-2 h-4 w-4" />
                 Download
               </Button>

apps/www/app/examples/forms/account/account-form.tsx

@@ -7,22 +7,15 @@ import { useForm } from "react-hook-form"
 import * as z from "zod"
 
 import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Calendar } from "@/components/ui/calendar"
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
 import {
   Command,
   CommandEmpty,
   CommandGroup,
   CommandInput,
   CommandItem,
-} from "@/components/ui/command"
-import { Input } from "@/components/ui/input"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover"
-import { toast } from "@/components/ui/use-toast"
+} from "@/registry/new-york/ui/command"
 import {
   Form,
   FormControl,
@@ -31,7 +24,14 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@/components/react-hook-form/form"
+} from "@/registry/new-york/ui/form"
+import { Input } from "@/registry/new-york/ui/input"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+import { toast } from "@/registry/new-york/ui/use-toast"
 
 const languages = [
   { label: "English", value: "en" },

apps/www/app/examples/forms/account/page.tsx

@@ -1,4 +1,4 @@
-import { Separator } from "@/components/ui/separator"
+import { Separator } from "@/registry/new-york/ui/separator"
 import { AccountForm } from "@/app/examples/forms/account/account-form"
 
 export default function SettingsAccountPage() {

apps/www/app/examples/forms/appearance/appearance-form.tsx

@@ -6,9 +6,7 @@ import { useForm } from "react-hook-form"
 import * as z from "zod"
 
 import { cn } from "@/lib/utils"
-import { Button, buttonVariants } from "@/components/ui/button"
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
-import { toast } from "@/components/ui/use-toast"
+import { Button, buttonVariants } from "@/registry/new-york/ui/button"
 import {
   Form,
   FormControl,
@@ -17,7 +15,9 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@/components/react-hook-form/form"
+} from "@/registry/new-york/ui/form"
+import { RadioGroup, RadioGroupItem } from "@/registry/new-york/ui/radio-group"
+import { toast } from "@/registry/new-york/ui/use-toast"
 
 const appearanceFormSchema = z.object({
   theme: z.enum(["light", "dark"], {

apps/www/app/examples/forms/appearance/page.tsx

@@ -1,4 +1,4 @@
-import { Separator } from "@/components/ui/separator"
+import { Separator } from "@/registry/new-york/ui/separator"
 import { AppearanceForm } from "@/app/examples/forms/appearance/appearance-form"
 
 export default function SettingsAppearancePage() {

apps/www/app/examples/forms/components/sidebar-nav.tsx

@@ -4,7 +4,7 @@ import Link from "next/link"
 import { usePathname } from "next/navigation"
 
 import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
+import { buttonVariants } from "@/registry/new-york/ui/button"
 
 interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
   items: {

apps/www/app/examples/forms/display/display-form.tsx

@@ -4,9 +4,8 @@ import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
 import * as z from "zod"
 
-import { Button } from "@/components/ui/button"
-import { Checkbox } from "@/components/ui/checkbox"
-import { toast } from "@/components/ui/use-toast"
+import { Button } from "@/registry/new-york/ui/button"
+import { Checkbox } from "@/registry/new-york/ui/checkbox"
 import {
   Form,
   FormControl,
@@ -15,7 +14,8 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@/components/react-hook-form/form"
+} from "@/registry/new-york/ui/form"
+import { toast } from "@/registry/new-york/ui/use-toast"
 
 const items = [
   {

apps/www/app/examples/forms/display/page.tsx

@@ -1,4 +1,4 @@
-import { Separator } from "@/components/ui/separator"
+import { Separator } from "@/registry/new-york/ui/separator"
 import { DisplayForm } from "@/app/examples/forms/display/display-form"
 
 export default function SettingsDisplayPage() {

apps/www/app/examples/forms/layout.tsx

@@ -1,7 +1,7 @@
 import { Metadata } from "next"
 import Image from "next/image"
 
-import { Separator } from "@/components/ui/separator"
+import { Separator } from "@/registry/new-york/ui/separator"
 import { SidebarNav } from "@/app/examples/forms/components/sidebar-nav"
 
 export const metadata: Metadata = {

apps/www/app/examples/forms/notifications/notifications-form.tsx

@@ -5,11 +5,8 @@ import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
 import * as z from "zod"
 
-import { Button } from "@/components/ui/button"
-import { Checkbox } from "@/components/ui/checkbox"
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
-import { Switch } from "@/components/ui/switch"
-import { toast } from "@/components/ui/use-toast"
+import { Button } from "@/registry/new-york/ui/button"
+import { Checkbox } from "@/registry/new-york/ui/checkbox"
 import {
   Form,
   FormControl,
@@ -18,7 +15,10 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@/components/react-hook-form/form"
+} from "@/registry/new-york/ui/form"
+import { RadioGroup, RadioGroupItem } from "@/registry/new-york/ui/radio-group"
+import { Switch } from "@/registry/new-york/ui/switch"
+import { toast } from "@/registry/new-york/ui/use-toast"
 
 const notificationsFormSchema = z.object({
   type: z.enum(["all", "mentions", "none"], {

apps/www/app/examples/forms/notifications/page.tsx

@@ -1,4 +1,4 @@
-import { Separator } from "@/components/ui/separator"
+import { Separator } from "@/registry/new-york/ui/separator"
 import { AccountForm } from "@/app/examples/forms/account/account-form"
 import { NotificationsForm } from "@/app/examples/forms/notifications/notifications-form"
 

apps/www/app/examples/forms/page.tsx

@@ -1,4 +1,4 @@
-import { Separator } from "@/components/ui/separator"
+import { Separator } from "@/registry/new-york/ui/separator"
 import { ProfileForm } from "@/app/examples/forms/profile-form"
 
 export default function SettingsProfilePage() {

apps/www/app/examples/forms/profile-form.tsx

@@ -6,17 +6,7 @@ import { useFieldArray, useForm } from "react-hook-form"
 import * as z from "zod"
 
 import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
-import { Textarea } from "@/components/ui/textarea"
-import { toast } from "@/components/ui/use-toast"
+import { Button } from "@/registry/new-york/ui/button"
 import {
   Form,
   FormControl,
@@ -25,7 +15,17 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@/components/react-hook-form/form"
+} from "@/registry/new-york/ui/form"
+import { Input } from "@/registry/new-york/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york/ui/select"
+import { Textarea } from "@/registry/new-york/ui/textarea"
+import { toast } from "@/registry/new-york/ui/use-toast"
 
 const profileFormSchema = z.object({
   username: z
@@ -176,9 +176,9 @@ export function ProfileForm() {
           ))}
           <Button
             type="button"
-            variant="link"
+            variant="outline"
             size="sm"
-            className="mt-1"
+            className="mt-2"
             onClick={() => append({ value: "" })}
           >
             Add URL

apps/www/app/examples/layout.tsx

@@ -3,14 +3,14 @@ import Link from "next/link"
 import { ChevronRight } from "lucide-react"
 
 import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
-import { Separator } from "@/components/ui/separator"
 import { ExamplesNav } from "@/components/examples-nav"
 import {
   PageHeader,
   PageHeaderDescription,
   PageHeaderHeading,
 } from "@/components/page-header"
+import { buttonVariants } from "@/registry/new-york/ui/button"
+import { Separator } from "@/registry/new-york/ui/separator"
 
 export const metadata: Metadata = {
   title: "Examples",
@@ -24,14 +24,17 @@ interface ExamplesLayoutProps {
 export default function ExamplesLayout({ children }: ExamplesLayoutProps) {
   return (
     <>
-      <div className="container relative pb-10">
-        <PageHeader className="page-header">
+      <div className="container relative">
+        <PageHeader className="page-header pb-8">
           <Link
-            href="/docs/forms/react-hook-form"
+            href="/docs/changelog"
             className="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium"
           >
             🎉 <Separator className="mx-2 h-4" orientation="vertical" />{" "}
-            Building forms with React Hook Form and Zod
+            <span className="sm:hidden">Style, a new CLI and more.</span>
+            <span className="hidden sm:inline">
+              Introducing Style, a new CLI and more.
+            </span>
             <ChevronRight className="ml-1 h-4 w-4" />
           </Link>
           <PageHeaderHeading className="hidden md:block">
@@ -62,7 +65,7 @@ export default function ExamplesLayout({ children }: ExamplesLayoutProps) {
         </PageHeader>
         <section>
           <ExamplesNav />
-          <div className="overflow-hidden rounded-[0.5rem] border bg-background shadow-xl">
+          <div className="overflow-hidden rounded-[0.5rem] border bg-background shadow">
             {children}
           </div>
         </section>

apps/www/app/examples/music/components/album-artwork.tsx

@@ -2,7 +2,7 @@ import Image from "next/image"
 import { ListMusic, PlusCircle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
-import { AspectRatio } from "@/components/ui/aspect-ratio"
+import { AspectRatio } from "@/registry/new-york/ui/aspect-ratio"
 import {
   ContextMenu,
   ContextMenuContent,
@@ -12,7 +12,7 @@ import {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuTrigger,
-} from "@/components/ui/context-menu"
+} from "@/registry/new-york/ui/context-menu"
 
 import { Album } from "../data/albums"
 import { playlists } from "../data/playlists"

apps/www/app/examples/music/components/menu.tsx

@@ -15,7 +15,7 @@ import {
   MenubarSubContent,
   MenubarSubTrigger,
   MenubarTrigger,
-} from "@/components/ui/menubar"
+} from "@/registry/new-york/ui/menubar"
 
 export function Menu() {
   return (

apps/www/app/examples/music/components/podcast-empty-placeholder.tsx

@@ -1,6 +1,6 @@
 import { Plus, Podcast } from "lucide-react"
 
-import { Button } from "@/components/ui/button"
+import { Button } from "@/registry/new-york/ui/button"
 import {
   Dialog,
   DialogContent,
@@ -9,9 +9,9 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
+} from "@/registry/new-york/ui/dialog"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
 
 export function PodcastEmptyPlaceholder() {
   return (

apps/www/app/examples/music/components/sidebar.tsx

@@ -11,8 +11,8 @@ import {
 } from "lucide-react"
 
 import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { ScrollArea } from "@/components/ui/scroll-area"
+import { Button } from "@/registry/new-york/ui/button"
+import { ScrollArea } from "@/registry/new-york/ui/scroll-area"
 
 import { Playlist } from "../data/playlists"
 
@@ -24,67 +24,62 @@ export function Sidebar({ className, playlists }: SidebarProps) {
   return (
     <div className={cn("pb-12", className)}>
       <div className="space-y-4 py-4">
-        <div className="px-4 py-2">
-          <h2 className="mb-2 px-2 text-lg font-semibold tracking-tight">
+        <div className="px-3 py-2">
+          <h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">
             Discover
           </h2>
           <div className="space-y-1">
-            <Button
-              variant="secondary"
-              size="sm"
-              className="w-full justify-start"
-            >
+            <Button variant="secondary" className="w-full justify-start">
               <PlayCircle className="mr-2 h-4 w-4" />
               Listen Now
             </Button>
-            <Button variant="ghost" size="sm" className="w-full justify-start">
+            <Button variant="ghost" className="w-full justify-start">
               <LayoutGrid className="mr-2 h-4 w-4" />
               Browse
             </Button>
-            <Button variant="ghost" size="sm" className="w-full justify-start">
+            <Button variant="ghost" className="w-full justify-start">
               <Radio className="mr-2 h-4 w-4" />
               Radio
             </Button>
           </div>
         </div>
-        <div className="px-4 py-2">
-          <h2 className="mb-2 px-2 text-lg font-semibold tracking-tight">
+        <div className="px-3 py-2">
+          <h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">
             Library
           </h2>
           <div className="space-y-1">
-            <Button variant="ghost" size="sm" className="w-full justify-start">
+            <Button variant="ghost" className="w-full justify-start">
               <ListMusic className="mr-2 h-4 w-4" />
               Playlists
             </Button>
-            <Button variant="ghost" size="sm" className="w-full justify-start">
+            <Button variant="ghost" className="w-full justify-start">
               <Music2 className="mr-2 h-4 w-4" />
               Songs
             </Button>
-            <Button variant="ghost" size="sm" className="w-full justify-start">
+            <Button variant="ghost" className="w-full justify-start">
               <User className="mr-2 h-4 w-4" />
               Made for You
             </Button>
-            <Button variant="ghost" size="sm" className="w-full justify-start">
+            <Button variant="ghost" className="w-full justify-start">
               <Mic2 className="mr-2 h-4 w-4" />
               Artists
             </Button>
-            <Button variant="ghost" size="sm" className="w-full justify-start">
+            <Button variant="ghost" className="w-full justify-start">
               <Library className="mr-2 h-4 w-4" />
               Albums
             </Button>
           </div>
         </div>
         <div className="py-2">
-          <h2 className="relative px-6 text-lg font-semibold tracking-tight">
+          <h2 className="relative px-7 text-lg font-semibold tracking-tight">
             Playlists
           </h2>
-          <ScrollArea className="h-[300px] px-2">
+          <ScrollArea className="h-[300px] px-1">
             <div className="space-y-1 p-2">
               {playlists?.map((playlist, i) => (
                 <Button
                   key={`${playlist}-${i}`}
                   variant="ghost"
-                  size="sm"
                   className="w-full justify-start font-normal"
                 >
                   <ListMusic className="mr-2 h-4 w-4" />

apps/www/app/examples/music/page.tsx

@@ -1,8 +1,13 @@
 import { Metadata } from "next"
 
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
-import { Separator } from "@/components/ui/separator"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { ScrollArea, ScrollBar } from "@/registry/new-york/ui/scroll-area"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/new-york/ui/tabs"
 
 import { AlbumArtwork } from "./components/album-artwork"
 import { Menu } from "./components/menu"
@@ -14,7 +19,7 @@ import "./styles.css"
 import Image from "next/image"
 import { PlusCircle } from "lucide-react"
 
-import { Button } from "@/components/ui/button"
+import { Button } from "@/registry/new-york/ui/button"
 
 export const metadata: Metadata = {
   title: "Music App",

apps/www/app/examples/playground/components/code-viewer.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@/components/ui/button"
+import { Button } from "@/registry/new-york/ui/button"
 import {
   Dialog,
   DialogContent,
@@ -6,7 +6,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@/components/ui/dialog"
+} from "@/registry/new-york/ui/dialog"
 
 export function CodeViewer() {
   return (

apps/www/app/examples/playground/components/maxlength-selector.tsx

@@ -7,9 +7,9 @@ import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
-} from "@/components/ui/hover-card"
-import { Label } from "@/components/ui/label"
-import { Slider } from "@/components/ui/slider"
+} from "@/registry/new-york/ui/hover-card"
+import { Label } from "@/registry/new-york/ui/label"
+import { Slider } from "@/registry/new-york/ui/slider"
 
 interface MaxLengthSelectorProps {
   defaultValue: SliderProps["defaultValue"]

apps/www/app/examples/playground/components/model-selector.tsx

@@ -6,7 +6,7 @@ import { Check, ChevronsUpDown } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { useMutationObserver } from "@/hooks/use-mutation-observer"
-import { Button } from "@/components/ui/button"
+import { Button } from "@/registry/new-york/ui/button"
 import {
   Command,
   CommandEmpty,
@@ -14,18 +14,18 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-} from "@/components/ui/command"
+} from "@/registry/new-york/ui/command"
 import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
-} from "@/components/ui/hover-card"
-import { Label } from "@/components/ui/label"
+} from "@/registry/new-york/ui/hover-card"
+import { Label } from "@/registry/new-york/ui/label"
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/components/ui/popover"
+} from "@/registry/new-york/ui/popover"
 
 import { Model, ModelType } from "../data/models"
 

apps/www/app/examples/playground/components/preset-actions.tsx

@@ -12,25 +12,25 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "@/components/ui/alert-dialog"
-import { Button } from "@/components/ui/button"
+} from "@/registry/new-york/ui/alert-dialog"
+import { Button } from "@/registry/new-york/ui/button"
 import {
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog"
+} from "@/registry/new-york/ui/dialog"
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Label } from "@/components/ui/label"
-import { Switch } from "@/components/ui/switch"
-import { toast } from "@/components/ui/use-toast"
+} from "@/registry/new-york/ui/dropdown-menu"
+import { Label } from "@/registry/new-york/ui/label"
+import { Switch } from "@/registry/new-york/ui/switch"
+import { toast } from "@/registry/new-york/ui/use-toast"
 
 export function PresetActions() {
   const [open, setIsOpen] = React.useState(false)

apps/www/app/examples/playground/components/preset-save.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@/components/ui/button"
+import { Button } from "@/registry/new-york/ui/button"
 import {
   Dialog,
   DialogContent,
@@ -7,9 +7,9 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
+} from "@/registry/new-york/ui/dialog"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
 
 export function PresetSave() {
   return (

apps/www/app/examples/playground/components/preset-selector.tsx

@@ -6,19 +6,19 @@ import { PopoverProps } from "@radix-ui/react-popover"
 import { Check, ChevronsUpDown } from "lucide-react"
 
 import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
+import { Button } from "@/registry/new-york/ui/button"
 import {
   Command,
   CommandEmpty,
   CommandGroup,
   CommandInput,
   CommandItem,
-} from "@/components/ui/command"
+} from "@/registry/new-york/ui/command"
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/components/ui/popover"
+} from "@/registry/new-york/ui/popover"
 
 import { Preset } from "../data/presets"
 

apps/www/app/examples/playground/components/preset-share.tsx

@@ -1,13 +1,13 @@
 import { Copy } from "lucide-react"
 
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
+import { Button } from "@/registry/new-york/ui/button"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/components/ui/popover"
+} from "@/registry/new-york/ui/popover"
 
 export function PresetShare() {
   return (

apps/www/app/examples/playground/components/temperature-selector.tsx

@@ -7,9 +7,9 @@ import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
-} from "@/components/ui/hover-card"
-import { Label } from "@/components/ui/label"
-import { Slider } from "@/components/ui/slider"
+} from "@/registry/new-york/ui/hover-card"
+import { Label } from "@/registry/new-york/ui/label"
+import { Slider } from "@/registry/new-york/ui/slider"
 
 interface TemperatureSelectorProps {
   defaultValue: SliderProps["defaultValue"]

apps/www/app/examples/playground/components/top-p-selector.tsx

@@ -7,9 +7,9 @@ import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
-} from "@/components/ui/hover-card"
-import { Label } from "@/components/ui/label"
-import { Slider } from "@/components/ui/slider"
+} from "@/registry/new-york/ui/hover-card"
+import { Label } from "@/registry/new-york/ui/label"
+import { Slider } from "@/registry/new-york/ui/slider"
 
 interface TopPSelectorProps {
   defaultValue: SliderProps["defaultValue"]

apps/www/app/examples/playground/page.tsx

@@ -1,16 +1,21 @@
 import { Metadata } from "next"
 import { History } from "lucide-react"
 
-import { Button } from "@/components/ui/button"
+import { Button } from "@/registry/new-york/ui/button"
 import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
-} from "@/components/ui/hover-card"
-import { Label } from "@/components/ui/label"
-import { Separator } from "@/components/ui/separator"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { Textarea } from "@/components/ui/textarea"
+} from "@/registry/new-york/ui/hover-card"
+import { Label } from "@/registry/new-york/ui/label"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/new-york/ui/tabs"
+import { Textarea } from "@/registry/new-york/ui/textarea"
 
 import { CodeViewer } from "./components/code-viewer"
 import { Icons } from "./components/icons"

apps/www/app/examples/tasks/components/columns.tsx

@@ -2,8 +2,8 @@
 
 import { ColumnDef } from "@tanstack/react-table"
 
-import { Badge } from "@/components/ui/badge"
-import { Checkbox } from "@/components/ui/checkbox"
+import { Badge } from "@/registry/new-york/ui/badge"
+import { Checkbox } from "@/registry/new-york/ui/checkbox"
 
 import { labels, priorities, statuses } from "../data/data"
 import { Task } from "../data/schema"

apps/www/app/examples/tasks/components/data-table-column-header.tsx

@@ -2,14 +2,14 @@ import { Column } from "@tanstack/react-table"
 import { ChevronsUpDown, EyeOff, SortAsc, SortDesc } from "lucide-react"
 
 import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
+import { Button } from "@/registry/new-york/ui/button"
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from "@/registry/new-york/ui/dropdown-menu"
 
 interface DataTableColumnHeaderProps<TData, TValue>
   extends React.HTMLAttributes<HTMLDivElement> {

apps/www/app/examples/tasks/components/data-table-faceted-filter.tsx

@@ -3,8 +3,8 @@ import { Column } from "@tanstack/react-table"
 import { Check, LucideIcon, PlusCircle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
+import { Badge } from "@/registry/new-york/ui/badge"
+import { Button } from "@/registry/new-york/ui/button"
 import {
   Command,
   CommandEmpty,
@@ -13,13 +13,13 @@ import {
   CommandItem,
   CommandList,
   CommandSeparator,
-} from "@/components/ui/command"
+} from "@/registry/new-york/ui/command"
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/components/ui/popover"
-import { Separator } from "@/components/ui/separator"
+} from "@/registry/new-york/ui/popover"
+import { Separator } from "@/registry/new-york/ui/separator"
 
 interface DataTableFacetedFilter<TData, TValue> {
   column?: Column<TData, TValue>

apps/www/app/examples/tasks/components/data-table-pagination.tsx

@@ -6,14 +6,14 @@ import {
   ChevronsRight,
 } from "lucide-react"
 
-import { Button } from "@/components/ui/button"
+import { Button } from "@/registry/new-york/ui/button"
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select"
+} from "@/registry/new-york/ui/select"
 
 interface DataTablePaginationProps<TData> {
   table: Table<TData>

apps/www/app/examples/tasks/components/data-table-row-actions.tsx

@@ -3,7 +3,7 @@
 import { Row } from "@tanstack/react-table"
 import { Copy, MoreHorizontal, Pen, Star, Tags, Trash } from "lucide-react"
 
-import { Button } from "@/components/ui/button"
+import { Button } from "@/registry/new-york/ui/button"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -16,7 +16,7 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from "@/registry/new-york/ui/dropdown-menu"
 
 import { labels } from "../data/data"
 import { taskSchema } from "../data/schema"

apps/www/app/examples/tasks/components/data-table-toolbar.tsx

@@ -3,8 +3,8 @@
 import { Table } from "@tanstack/react-table"
 import { X } from "lucide-react"
 
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
+import { Button } from "@/registry/new-york/ui/button"
+import { Input } from "@/registry/new-york/ui/input"
 import { DataTableViewOptions } from "@/app/examples/tasks/components/data-table-view-options"
 
 import { priorities, statuses } from "../data/data"

apps/www/app/examples/tasks/components/data-table-view-options.tsx

@@ -4,14 +4,14 @@ import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu"
 import { Table } from "@tanstack/react-table"
 import { SlidersHorizontal } from "lucide-react"
 
-import { Button } from "@/components/ui/button"
+import { Button } from "@/registry/new-york/ui/button"
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuLabel,
   DropdownMenuSeparator,
-} from "@/components/ui/dropdown-menu"
+} from "@/registry/new-york/ui/dropdown-menu"
 
 interface DataTableViewOptionsProps<TData> {
   table: Table<TData>

apps/www/app/examples/tasks/components/data-table.tsx

@@ -23,7 +23,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table"
+} from "@/registry/new-york/ui/table"
 
 import { DataTablePagination } from "../components/data-table-pagination"
 import { DataTableToolbar } from "../components/data-table-toolbar"

apps/www/app/examples/tasks/components/user-nav.tsx

@@ -1,7 +1,11 @@
 import { CreditCard, LogOut, PlusCircle, Settings, User } from "lucide-react"
 
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Button } from "@/components/ui/button"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+import { Button } from "@/registry/new-york/ui/button"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -11,7 +15,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from "@/registry/new-york/ui/dropdown-menu"
 
 export function UserNav() {
   return (

apps/www/app/layout.tsx

@@ -4,13 +4,13 @@ import { Metadata } from "next"
 import { siteConfig } from "@/config/site"
 import { fontSans } from "@/lib/fonts"
 import { cn } from "@/lib/utils"
-import { Toaster } from "@/components/ui/toaster"
 import { Analytics } from "@/components/analytics"
+import { ThemeProvider } from "@/components/providers"
 import { SiteFooter } from "@/components/site-footer"
 import { SiteHeader } from "@/components/site-header"
-import { StyleSwitcher } from "@/components/style-switcher"
 import { TailwindIndicator } from "@/components/tailwind-indicator"
-import { ThemeProvider } from "@/components/theme-provider"
+import { Toaster as DefaultToaster } from "@/registry/default/ui/toaster"
+import { Toaster as NewYorkToaster } from "@/registry/new-york/ui/toaster"
 
 export const metadata: Metadata = {
   title: {
@@ -90,9 +90,9 @@ export default function RootLayout({ children }: RootLayoutProps) {
             </div>
             <TailwindIndicator />
           </ThemeProvider>
-          <StyleSwitcher />
           <Analytics />
-          <Toaster />
+          <NewYorkToaster />
+          <DefaultToaster />
         </body>
       </html>
     </>

apps/www/app/page.tsx

@@ -4,8 +4,6 @@ import { ChevronRight } from "lucide-react"
 
 import { siteConfig } from "@/config/site"
 import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
-import { Separator } from "@/components/ui/separator"
 import { ExamplesNav } from "@/components/examples-nav"
 import { Icons } from "@/components/icons"
 import {
@@ -13,20 +11,23 @@ import {
   PageHeaderDescription,
   PageHeaderHeading,
 } from "@/components/page-header"
-import { StyleSwitcher } from "@/components/style-switcher"
+import { buttonVariants } from "@/registry/new-york/ui/button"
+import { Separator } from "@/registry/new-york/ui/separator"
 import DashboardPage from "@/app/examples/dashboard/page"
 
 export default function IndexPage() {
   return (
-    <div className="container relative pb-10">
-      <StyleSwitcher />
-      <PageHeader>
+    <div className="container relative">
+      <PageHeader className="pb-8">
         <Link
-          href="/docs/forms/react-hook-form"
+          href="/docs/changelog"
           className="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium"
         >
-          🎉 <Separator className="mx-2 h-4" orientation="vertical" /> Building
-          forms with React Hook Form and Zod
+          🎉 <Separator className="mx-2 h-4" orientation="vertical" />{" "}
+          <span className="sm:hidden">Style, a new CLI and more.</span>
+          <span className="hidden sm:inline">
+            Introducing Style, a new CLI and more.
+          </span>
           <ChevronRight className="ml-1 h-4 w-4" />
         </Link>
         <PageHeaderHeading>Build your component library.</PageHeaderHeading>
@@ -67,7 +68,7 @@ export default function IndexPage() {
         />
       </section>
       <section className="hidden md:block">
-        <div className="overflow-hidden rounded-lg border bg-background shadow-xl">
+        <div className="overflow-hidden rounded-lg border bg-background shadow">
           <DashboardPage />
         </div>
       </section>

apps/www/app/sink/layout.tsx

@@ -0,0 +1,27 @@
+import Link from "next/link"
+
+import { ThemeWrapper } from "@/components/theme-wrapper"
+import { styles } from "@/registry/styles"
+
+interface SinkLayoutProps {
+  children: React.ReactNode
+}
+
+export default function SinkLayout({ children }: SinkLayoutProps) {
+  return (
+    <div className="flex flex-col">
+      <div className="container">
+        <div className="flex space-x-2 px-2 py-4">
+          {styles.map((style) => (
+            <Link href={`/sink/${style.name}`} key={style.name}>
+              {style.label}
+            </Link>
+          ))}
+        </div>
+      </div>
+      <div className="flex-1">
+        <ThemeWrapper>{children}</ThemeWrapper>
+      </div>
+    </div>
+  )
+}

apps/www/app/sink/new-york/page.tsx

@@ -0,0 +1,206 @@
+import * as React from "react"
+import Link from "next/link"
+
+import { cn } from "@/lib/utils"
+import AccordionDemo from "@/registry/new-york/example/accordion-demo"
+import AlertDialogDemo from "@/registry/new-york/example/alert-dialog-demo"
+import AspectRatioDemo from "@/registry/new-york/example/aspect-ratio-demo"
+import AvatarDemo from "@/registry/new-york/example/avatar-demo"
+import BadgeDemo from "@/registry/new-york/example/badge-demo"
+import BadgeDestructive from "@/registry/new-york/example/badge-destructive"
+import BadgeOutline from "@/registry/new-york/example/badge-outline"
+import BadgeSecondary from "@/registry/new-york/example/badge-secondary"
+import ButtonDemo from "@/registry/new-york/example/button-demo"
+import ButtonDestructive from "@/registry/new-york/example/button-destructive"
+import ButtonGhost from "@/registry/new-york/example/button-ghost"
+import ButtonLink from "@/registry/new-york/example/button-link"
+import ButtonLoading from "@/registry/new-york/example/button-loading"
+import ButtonOutline from "@/registry/new-york/example/button-outline"
+import ButtonSecondary from "@/registry/new-york/example/button-secondary"
+import ButtonWithIcon from "@/registry/new-york/example/button-with-icon"
+import CardDemo from "@/registry/new-york/example/card-demo"
+import CheckboxDemo from "@/registry/new-york/example/checkbox-demo"
+import CollapsibleDemo from "@/registry/new-york/example/collapsible-demo"
+import CommandDemo from "@/registry/new-york/example/command-demo"
+import ContextMenuDemo from "@/registry/new-york/example/context-menu-demo"
+import DatePickerDemo from "@/registry/new-york/example/date-picker-demo"
+import DialogDemo from "@/registry/new-york/example/dialog-demo"
+import DropdownMenuDemo from "@/registry/new-york/example/dropdown-menu-demo"
+import HoverCardDemo from "@/registry/new-york/example/hover-card-demo"
+import MenubarDemo from "@/registry/new-york/example/menubar-demo"
+import NavigationMenuDemo from "@/registry/new-york/example/navigation-menu-demo"
+import PopoverDemo from "@/registry/new-york/example/popover-demo"
+import ProgressDemo from "@/registry/new-york/example/progress-demo"
+import RadioGroupDemo from "@/registry/new-york/example/radio-group-demo"
+import ScrollAreaDemo from "@/registry/new-york/example/scroll-area-demo"
+import SelectDemo from "@/registry/new-york/example/select-demo"
+import SeparatorDemo from "@/registry/new-york/example/separator-demo"
+import SheetDemo from "@/registry/new-york/example/sheet-demo"
+import SkeletonDemo from "@/registry/new-york/example/skeleton-demo"
+import SliderDemo from "@/registry/new-york/example/slider-demo"
+import SwitchDemo from "@/registry/new-york/example/switch-demo"
+import TabsDemo from "@/registry/new-york/example/tabs-demo"
+import ToastDemo from "@/registry/new-york/example/toast-demo"
+import ToggleDemo from "@/registry/new-york/example/toggle-demo"
+import ToggleDisabled from "@/registry/new-york/example/toggle-disabled"
+import ToggleOutline from "@/registry/new-york/example/toggle-outline"
+import ToggleWithText from "@/registry/new-york/example/toggle-with-text"
+import TooltipDemo from "@/registry/new-york/example/tooltip-demo"
+import { Button } from "@/registry/new-york/ui/button"
+
+export default function KitchenSinkPage() {
+  return (
+    <div className="container">
+      <div className="grid gap-4">
+        <div className="grid grid-cols-3 items-start gap-4">
+          <div className="grid gap-4">
+            <ComponentWrapper>
+              <CardDemo className="w-full" />
+            </ComponentWrapper>
+            <ComponentWrapper>
+              <SliderDemo className="w-full" />
+            </ComponentWrapper>
+            <ComponentWrapper
+              className="spa flex-col items-start space-x-0
+				space-y-2"
+            >
+              <p className="text-sm text-muted-foreground">Documentation</p>
+              <p className="text-sm font-medium leading-none">
+                You can customize the theme using{" "}
+                <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold text-foreground">
+                  CSS variables
+                </code>
+                .{" "}
+                <Link
+                  href="#"
+                  className="font-medium text-primary underline underline-offset-4"
+                >
+                  Click here
+                </Link>{" "}
+                to learn more.
+              </p>
+            </ComponentWrapper>
+            <ComponentWrapper>
+              <CheckboxDemo />
+              <HoverCardDemo />
+            </ComponentWrapper>
+            <ComponentWrapper className="[&>div]:w-full">
+              <TabsDemo />
+            </ComponentWrapper>
+          </div>
+          <div className="grid gap-4">
+            <ComponentWrapper>
+              <MenubarDemo />
+              <AvatarDemo />
+            </ComponentWrapper>
+            <ComponentWrapper className="flex-col items-start space-x-0 space-y-2">
+              <div className="flex space-x-2">
+                <ButtonDemo />
+                <ButtonSecondary />
+                <ButtonDestructive />
+              </div>
+              <div className="flex space-x-2">
+                <ButtonOutline />
+                <ButtonLink />
+                <ButtonGhost />
+              </div>
+              <div className="flex space-x-2">
+                <ButtonWithIcon />
+                <ButtonLoading />
+              </div>
+              <div className="flex space-x-2">
+                <Button size="lg">Large</Button>
+                <Button size="sm">Small</Button>
+              </div>
+            </ComponentWrapper>
+            <ComponentWrapper>
+              <DatePickerDemo />
+            </ComponentWrapper>
+            <ComponentWrapper>
+              <AccordionDemo />
+            </ComponentWrapper>
+            <ComponentWrapper className="[&_ul>li:last-child]:hidden">
+              <NavigationMenuDemo />
+            </ComponentWrapper>
+            <ComponentWrapper className="justify-between">
+              <SwitchDemo />
+              <SelectDemo />
+            </ComponentWrapper>
+            <ComponentWrapper>
+              <SeparatorDemo />
+            </ComponentWrapper>
+            <ComponentWrapper>
+              <AspectRatioDemo />
+            </ComponentWrapper>
+            <ComponentWrapper>
+              <PopoverDemo />
+              <ToastDemo />
+            </ComponentWrapper>
+          </div>
+          <div className="grid gap-4">
+            <ComponentWrapper>
+              <TooltipDemo />
+              <SheetDemo />
+              <ProgressDemo />
+            </ComponentWrapper>
+            <ComponentWrapper>
+              <CommandDemo />
+            </ComponentWrapper>
+            <ComponentWrapper className="[&>span]:h-[80px] [&>span]:w-[200px]">
+              <RadioGroupDemo />
+              <ContextMenuDemo />
+            </ComponentWrapper>
+            <ComponentWrapper>
+              <div className="flex space-x-2">
+                <DropdownMenuDemo />
+                <AlertDialogDemo />
+                <DialogDemo />
+              </div>
+            </ComponentWrapper>
+            <ComponentWrapper>
+              <div className="flex space-x-2">
+                <BadgeDemo />
+                <BadgeSecondary />
+                <BadgeDestructive />
+                <BadgeOutline />
+              </div>
+            </ComponentWrapper>
+            <ComponentWrapper>
+              <SkeletonDemo />
+            </ComponentWrapper>
+            <ComponentWrapper className="[&>div]:w-full">
+              <CollapsibleDemo />
+            </ComponentWrapper>
+            <ComponentWrapper>
+              <div className="flex space-x-2">
+                <ToggleDemo />
+                <ToggleOutline />
+                <ToggleDisabled />
+                <ToggleWithText />
+              </div>
+            </ComponentWrapper>
+            <ComponentWrapper>
+              <ScrollAreaDemo />
+            </ComponentWrapper>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function ComponentWrapper({
+  className,
+  children,
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-between space-x-4 rounded-md p-4",
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}

apps/www/app/sink/page.tsx

@@ -2,55 +2,56 @@ import * as React from "react"
 import Link from "next/link"
 
 import { cn } from "@/lib/utils"
-import { AccordionDemo } from "@/components/examples/accordion/demo"
-import { AlertDialogDemo } from "@/components/examples/alert-dialog/demo"
-import { AspectRatioDemo } from "@/components/examples/aspect-ratio/demo"
-import { AvatarDemo } from "@/components/examples/avatar/demo"
-import { BadgeDemo } from "@/components/examples/badge/demo"
-import { BadgeDestructive } from "@/components/examples/badge/destructive"
-import { BadgeOutline } from "@/components/examples/badge/outline"
-import { BadgeSecondary } from "@/components/examples/badge/secondary"
-import { ButtonDemo } from "@/components/examples/button/demo"
-import { ButtonDestructive } from "@/components/examples/button/destructive"
-import { ButtonGhost } from "@/components/examples/button/ghost"
-import { ButtonLink } from "@/components/examples/button/link"
-import { ButtonLoading } from "@/components/examples/button/loading"
-import { ButtonOutline } from "@/components/examples/button/outline"
-import { ButtonSecondary } from "@/components/examples/button/secondary"
-import { ButtonWithIcon } from "@/components/examples/button/with-icon"
-import { CardDemo } from "@/components/examples/card/demo"
-import { CheckboxDemo } from "@/components/examples/checkbox/demo"
-import { CollapsibleDemo } from "@/components/examples/collapsible/demo"
-import { CommandDemo } from "@/components/examples/command/demo"
-import { ContextMenuDemo } from "@/components/examples/context-menu/demo"
-import { DatePickerDemo } from "@/components/examples/date-picker/demo"
-import { DialogDemo } from "@/components/examples/dialog/demo"
-import { DropdownMenuDemo } from "@/components/examples/dropdown-menu/demo"
-import { HoverCardDemo } from "@/components/examples/hover-card/demo"
-import { MenubarDemo } from "@/components/examples/menubar/demo"
-import { NavigationMenuDemo } from "@/components/examples/navigation-menu/demo"
-import { PopoverDemo } from "@/components/examples/popover/demo"
-import { ProgressDemo } from "@/components/examples/progress/demo"
-import { RadioGroupDemo } from "@/components/examples/radio-group/demo"
-import { ScrollAreaDemo } from "@/components/examples/scroll-area/demo"
-import { SelectDemo } from "@/components/examples/select/demo"
-import { SeparatorDemo } from "@/components/examples/separator/demo"
-import { SheetDemo } from "@/components/examples/sheet/demo"
-import { SkeletonDemo } from "@/components/examples/skeleton/demo"
-import { SliderDemo } from "@/components/examples/slider/demo"
-import { SwitchDemo } from "@/components/examples/switch/demo"
-import { TabsDemo } from "@/components/examples/tabs/demo"
-import { ToastDemo } from "@/components/examples/toast/demo"
-import { ToggleDemo } from "@/components/examples/toggle/demo"
-import { ToggleDisabled } from "@/components/examples/toggle/disabled"
-import { ToggleOutline } from "@/components/examples/toggle/outline"
-import { ToggleWithText } from "@/components/examples/toggle/with-text"
-import { TooltipDemo } from "@/components/examples/tooltip/demo"
+import AccordionDemo from "@/registry/default/example/accordion-demo"
+import AlertDialogDemo from "@/registry/default/example/alert-dialog-demo"
+import AspectRatioDemo from "@/registry/default/example/aspect-ratio-demo"
+import AvatarDemo from "@/registry/default/example/avatar-demo"
+import BadgeDemo from "@/registry/default/example/badge-demo"
+import BadgeDestructive from "@/registry/default/example/badge-destructive"
+import BadgeOutline from "@/registry/default/example/badge-outline"
+import BadgeSecondary from "@/registry/default/example/badge-secondary"
+import ButtonDemo from "@/registry/default/example/button-demo"
+import ButtonDestructive from "@/registry/default/example/button-destructive"
+import ButtonGhost from "@/registry/default/example/button-ghost"
+import ButtonLink from "@/registry/default/example/button-link"
+import ButtonLoading from "@/registry/default/example/button-loading"
+import ButtonOutline from "@/registry/default/example/button-outline"
+import ButtonSecondary from "@/registry/default/example/button-secondary"
+import ButtonWithIcon from "@/registry/default/example/button-with-icon"
+import CardDemo from "@/registry/default/example/card-demo"
+import CheckboxDemo from "@/registry/default/example/checkbox-demo"
+import CollapsibleDemo from "@/registry/default/example/collapsible-demo"
+import CommandDemo from "@/registry/default/example/command-demo"
+import ContextMenuDemo from "@/registry/default/example/context-menu-demo"
+import DatePickerDemo from "@/registry/default/example/date-picker-demo"
+import DialogDemo from "@/registry/default/example/dialog-demo"
+import DropdownMenuDemo from "@/registry/default/example/dropdown-menu-demo"
+import HoverCardDemo from "@/registry/default/example/hover-card-demo"
+import MenubarDemo from "@/registry/default/example/menubar-demo"
+import NavigationMenuDemo from "@/registry/default/example/navigation-menu-demo"
+import PopoverDemo from "@/registry/default/example/popover-demo"
+import ProgressDemo from "@/registry/default/example/progress-demo"
+import RadioGroupDemo from "@/registry/default/example/radio-group-demo"
+import ScrollAreaDemo from "@/registry/default/example/scroll-area-demo"
+import SelectDemo from "@/registry/default/example/select-demo"
+import SeparatorDemo from "@/registry/default/example/separator-demo"
+import SheetDemo from "@/registry/default/example/sheet-demo"
+import SkeletonDemo from "@/registry/default/example/skeleton-demo"
+import SliderDemo from "@/registry/default/example/slider-demo"
+import SwitchDemo from "@/registry/default/example/switch-demo"
+import TabsDemo from "@/registry/default/example/tabs-demo"
+import ToastDemo from "@/registry/default/example/toast-demo"
+import ToggleDemo from "@/registry/default/example/toggle-demo"
+import ToggleDisabled from "@/registry/default/example/toggle-disabled"
+import ToggleOutline from "@/registry/default/example/toggle-outline"
+import ToggleWithText from "@/registry/default/example/toggle-with-text"
+import TooltipDemo from "@/registry/default/example/tooltip-demo"
+import { Button } from "@/registry/default/ui/button"
 
 export default function KitchenSinkPage() {
   return (
     <div className="container">
-      <div className="grid gap-4 py-10">
+      <div className="grid gap-4">
         <div className="grid grid-cols-3 items-start gap-4">
           <div className="grid gap-4">
             <ComponentWrapper>
@@ -107,6 +108,10 @@ export default function KitchenSinkPage() {
                 <ButtonWithIcon />
                 <ButtonLoading />
               </div>
+              <div className="flex space-x-2">
+                <Button size="lg">Large</Button>
+                <Button size="sm">Small</Button>
+              </div>
             </ComponentWrapper>
             <ComponentWrapper>
               <DatePickerDemo />
@@ -191,7 +196,7 @@ function ComponentWrapper({
   return (
     <div
       className={cn(
-        "flex items-center justify-between space-x-4 rounded-md border p-4",
+        "flex items-center justify-between space-x-4 rounded-md p-4",
         className
       )}
     >

apps/www/components/callout.tsx

@@ -1,5 +1,9 @@
 import { cn } from "@/lib/utils"
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/registry/new-york/ui/alert"
 
 interface CalloutProps {
   icon?: string

apps/www/components/code-block-wrapper.tsx

@@ -3,12 +3,12 @@
 import * as React from "react"
 
 import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
+import { Button } from "@/registry/new-york/ui/button"
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from "@/components/ui/collapsible"
+} from "@/registry/new-york/ui/collapsible"
 
 interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {
   expandButtonTitle?: string

apps/www/components/command-menu.tsx

@@ -8,7 +8,7 @@ import { useTheme } from "next-themes"
 
 import { docsConfig } from "@/config/docs"
 import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
+import { Button } from "@/registry/new-york/ui/button"
 import {
   CommandDialog,
   CommandEmpty,
@@ -17,7 +17,7 @@ import {
   CommandItem,
   CommandList,
   CommandSeparator,
-} from "@/components/ui/command"
+} from "@/registry/new-york/ui/command"
 
 export function CommandMenu({ ...props }: DialogProps) {
   const router = useRouter()
@@ -46,14 +46,14 @@ export function CommandMenu({ ...props }: DialogProps) {
       <Button
         variant="outline"
         className={cn(
-          "relative h-9 w-full justify-start rounded-[0.5rem] text-sm text-muted-foreground sm:pr-12 md:w-40 lg:w-64"
+          "relative w-full justify-start text-sm text-muted-foreground sm:pr-12 md:w-40 lg:w-64"
         )}
         onClick={() => setOpen(true)}
         {...props}
       >
         <span className="hidden lg:inline-flex">Search documentation...</span>
         <span className="inline-flex lg:hidden">Search...</span>
-        <kbd className="pointer-events-none absolute right-1.5 top-2 hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
+        <kbd className="pointer-events-none absolute right-1.5 top-1.5 hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
           <span className="text-xs">⌘</span>K
         </kbd>
       </Button>

apps/www/components/component-card.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 
 import { cn } from "@/lib/utils"
-import { AspectRatio } from "@/components/ui/aspect-ratio"
+import { AspectRatio } from "@/registry/new-york/ui/aspect-ratio"
 
 export function ComponentCard({
   className,

apps/www/components/component-example.tsx

@@ -3,8 +3,13 @@
 import * as React from "react"
 
 import { cn } from "@/lib/utils"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { CopyButton, CopyWithClassNames } from "@/components/copy-button"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/new-york/ui/tabs"
 
 interface ComponentExampleProps extends React.HTMLAttributes<HTMLDivElement> {
   extractClassname?: boolean

apps/www/components/component-preview.tsx

@@ -0,0 +1,139 @@
+"use client"
+
+import * as React from "react"
+import { Index } from "@/__registry__"
+import { Loader2 } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { useConfig } from "@/hooks/use-config"
+import { CopyButton, CopyWithClassNames } from "@/components/copy-button"
+import { StyleSwitcher } from "@/components/style-switcher"
+import { ThemeWrapper } from "@/components/theme-wrapper"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/new-york/ui/tabs"
+import { styles } from "@/registry/styles"
+
+interface ComponentPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
+  name: string
+  extractClassname?: boolean
+  extractedClassNames?: string
+  align?: "center" | "start" | "end"
+}
+
+export function ComponentPreview({
+  name,
+  children,
+  className,
+  extractClassname,
+  extractedClassNames,
+  align = "center",
+  ...props
+}: ComponentPreviewProps) {
+  const [config] = useConfig()
+  const index = styles.findIndex((style) => style.name === config.style)
+
+  const Codes = React.Children.toArray(children) as React.ReactElement[]
+  const Code = Codes[index]
+
+  const Preview = React.useMemo(() => {
+    const Component = Index[config.style][name]?.component
+
+    if (!Component) {
+      return (
+        <p className="text-sm text-muted-foreground">
+          Component{" "}
+          <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">
+            {name}
+          </code>{" "}
+          not found in registry.
+        </p>
+      )
+    }
+
+    return <Component />
+  }, [name, config.style])
+
+  const codeString = React.useMemo(() => {
+    if (
+      typeof Code?.props["data-rehype-pretty-code-fragment"] !== "undefined"
+    ) {
+      const [, Button] = React.Children.toArray(
+        Code.props.children
+      ) as React.ReactElement[]
+      return Button?.props?.value || Button?.props?.__rawString__ || null
+    }
+  }, [Code])
+
+  return (
+    <div
+      className={cn("group relative my-4 flex flex-col space-y-2", className)}
+      {...props}
+    >
+      <Tabs defaultValue="preview" className="relative mr-auto w-full">
+        <div className="flex items-center justify-between pb-3">
+          <TabsList className="w-full justify-start rounded-none border-b bg-transparent p-0">
+            <TabsTrigger
+              value="preview"
+              className="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
+            >
+              Preview
+            </TabsTrigger>
+            <TabsTrigger
+              value="code"
+              className="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
+            >
+              Code
+            </TabsTrigger>
+          </TabsList>
+        </div>
+        <TabsContent value="preview" className="relative rounded-md border">
+          <div className="flex items-center justify-between p-4">
+            <StyleSwitcher />
+            {extractedClassNames ? (
+              <CopyWithClassNames
+                value={codeString}
+                classNames={extractedClassNames}
+              />
+            ) : (
+              codeString && <CopyButton value={codeString} />
+            )}
+          </div>
+          <ThemeWrapper>
+            <div
+              className={cn(
+                "preview flex min-h-[350px] w-full justify-center p-10",
+                {
+                  "items-center": align === "center",
+                  "items-start": align === "start",
+                  "items-end": align === "end",
+                }
+              )}
+            >
+              <React.Suspense
+                fallback={
+                  <div className="flex items-center text-sm text-muted-foreground">
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Loading...
+                  </div>
+                }
+              >
+                {Preview}
+              </React.Suspense>
+            </div>
+          </ThemeWrapper>
+        </TabsContent>
+        <TabsContent value="code">
+          <div className="flex flex-col space-y-4">
+            <div className="w-full rounded-md [&_pre]:my-0 [&_pre]:max-h-[350px] [&_pre]:overflow-auto">
+              {Code}
+            </div>
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}

apps/www/components/copy-button.tsx

@@ -6,13 +6,14 @@ import { NpmCommands } from "types/unist"
 
 import { Event, trackEvent } from "@/lib/events"
 import { cn } from "@/lib/utils"
+import { Icons } from "@/components/icons"
+import { Button } from "@/registry/new-york/ui/button"
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Icons } from "@/components/icons"
+} from "@/registry/new-york/ui/dropdown-menu"
 
 interface CopyButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
   value: string
@@ -43,9 +44,11 @@ export function CopyButton({
   }, [hasCopied])
 
   return (
-    <button
+    <Button
+      size="icon"
+      variant="ghost"
       className={cn(
-        "relative z-20 inline-flex h-6 w-6 items-center justify-center rounded-md border bg-background text-sm font-medium transition-all hover:bg-muted focus:outline-none",
+        "relative z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50",
         className
       )}
       onClick={() => {
@@ -70,7 +73,7 @@ export function CopyButton({
       ) : (
         <Icons.copy className="h-3 w-3" />
       )}
-    </button>
+    </Button>
   )
 }
 
@@ -101,19 +104,22 @@ export function CopyWithClassNames({
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger
-        className={cn(
-          "relative z-20 inline-flex h-6 w-6 items-center justify-center rounded-md border bg-background text-sm font-medium transition-all hover:bg-muted focus:outline-none",
-          className
-        )}
-        {...props}
-      >
-        {hasCopied ? (
-          <Icons.check className="h-3 w-3" />
-        ) : (
-          <Icons.copy className="h-3 w-3" />
-        )}
-        <span className="sr-only">Copy</span>
+      <DropdownMenuTrigger asChild>
+        <Button
+          size="icon"
+          variant="ghost"
+          className={cn(
+            "relative z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50",
+            className
+          )}
+        >
+          {hasCopied ? (
+            <Icons.check className="h-3 w-3" />
+          ) : (
+            <Icons.copy className="h-3 w-3" />
+          )}
+          <span className="sr-only">Copy</span>
+        </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
         <DropdownMenuItem onClick={() => copyToClipboard(value)}>
@@ -162,38 +168,38 @@ export function CopyNpmCommandButton({
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger
-        className={cn(
-          "relative z-20 inline-flex h-6 w-6 items-center justify-center rounded-md border bg-background text-sm font-medium transition-all hover:bg-muted focus:outline-none",
-          className
-        )}
-        {...props}
-      >
-        {hasCopied ? (
-          <Icons.check className="h-3 w-3" />
-        ) : (
-          <Icons.copy className="h-3 w-3" />
-        )}
-        <span className="sr-only">Copy</span>
+      <DropdownMenuTrigger asChild>
+        <Button
+          size="icon"
+          variant="ghost"
+          className={cn(
+            "relative z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50",
+            className
+          )}
+        >
+          {hasCopied ? (
+            <Icons.check className="h-3 w-3" />
+          ) : (
+            <Icons.copy className="h-3 w-3" />
+          )}
+          <span className="sr-only">Copy</span>
+        </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
         <DropdownMenuItem
           onClick={() => copyCommand(commands.__npmCommand__, "npm")}
         >
-          <Icons.npm className="mr-2 h-4 w-4" />
-          <span>npm</span>
+          npm
         </DropdownMenuItem>
         <DropdownMenuItem
           onClick={() => copyCommand(commands.__yarnCommand__, "yarn")}
         >
-          <Icons.yarn className="mr-2 h-4 w-4" />
-          <span>yarn</span>
+          yarn
         </DropdownMenuItem>
         <DropdownMenuItem
           onClick={() => copyCommand(commands.__pnpmCommand__, "pnpm")}
         >
-          <Icons.pnpm className="mr-2 h-4 w-4" />
-          <span>pnpm</span>
+          pnpm
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>

apps/www/components/examples-nav.tsx

@@ -5,7 +5,7 @@ import { usePathname } from "next/navigation"
 import { ArrowRight } from "lucide-react"
 
 import { cn } from "@/lib/utils"
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
+import { ScrollArea, ScrollBar } from "@/registry/new-york/ui/scroll-area"
 
 const examples = [
   {
@@ -21,7 +21,6 @@ const examples = [
   {
     name: "Tasks",
     href: "/examples/tasks",
-    label: "New",
     code: "https://github.com/shadcn/ui/tree/main/apps/www/app/examples/tasks",
   },
   {
@@ -32,7 +31,6 @@ const examples = [
   {
     name: "Forms",
     href: "/examples/forms",
-    label: "New",
     code: "https://github.com/shadcn/ui/tree/main/apps/www/app/examples/forms",
   },
   {
@@ -67,12 +65,7 @@ export function ExamplesNav({ className, ...props }: ExamplesNavProps) {
                   : "font-medium text-muted-foreground"
               )}
             >
-              {example.name}{" "}
-              {example.label && (
-                <span className="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs font-medium leading-none text-[#000000] no-underline group-hover:no-underline">
-                  {example.label}
-                </span>
-              )}
+              {example.name}
             </Link>
           ))}
         </div>

apps/www/components/examples/badge/demo.tsx

@@ -1,5 +0,0 @@
-import { Badge } from "@/components/ui/badge"
-
-export function BadgeDemo() {
-  return <Badge>Badge</Badge>
-}

apps/www/components/examples/badge/destructive.tsx

@@ -1,5 +0,0 @@
-import { Badge } from "@/components/ui/badge"
-
-export function BadgeDestructive() {
-  return <Badge variant="destructive">Destructive</Badge>
-}

apps/www/components/examples/badge/outline.tsx

@@ -1,5 +0,0 @@
-import { Badge } from "@/components/ui/badge"
-
-export function BadgeOutline() {
-  return <Badge variant="outline">Outline</Badge>
-}

apps/www/components/examples/badge/secondary.tsx

@@ -1,5 +0,0 @@
-import { Badge } from "@/components/ui/badge"
-
-export function BadgeSecondary() {
-  return <Badge variant="secondary">Secondary</Badge>
-}

apps/www/components/examples/button/demo.tsx

@@ -1,5 +0,0 @@
-import { Button } from "@/components/ui/button"
-
-export function ButtonDemo() {
-  return <Button>Button</Button>
-}

apps/www/components/examples/button/destructive.tsx

@@ -1,5 +0,0 @@
-import { Button } from "@/components/ui/button"
-
-export function ButtonDestructive() {
-  return <Button variant="destructive">Destructive</Button>
-}

apps/www/components/examples/button/ghost.tsx

@@ -1,5 +0,0 @@
-import { Button } from "@/components/ui/button"
-
-export function ButtonGhost() {
-  return <Button variant="ghost">Ghost</Button>
-}

apps/www/components/examples/button/link.tsx

@@ -1,5 +0,0 @@
-import { Button } from "@/components/ui/button"
-
-export function ButtonLink() {
-  return <Button variant="link">Link</Button>
-}

apps/www/components/examples/button/outline.tsx

@@ -1,5 +0,0 @@
-import { Button } from "@/components/ui/button"
-
-export function ButtonOutline() {
-  return <Button variant="outline">Outline</Button>
-}

apps/www/components/examples/button/secondary.tsx

@@ -1,5 +0,0 @@
-import { Button } from "@/components/ui/button"
-
-export function ButtonSecondary() {
-  return <Button variant="secondary">Secondary</Button>
-}

apps/www/components/examples/data-table/columns.tsx

@@ -1,110 +0,0 @@
-"use client"
-
-import { ColumnDef } from "@tanstack/react-table"
-import { ArrowUpDown, MoreHorizontal } from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import { Checkbox } from "@/components/ui/checkbox"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-
-export type Payment = {
-  id: string
-  amount: number
-  status: "pending" | "processing" | "success" | "failed"
-  email: string
-}
-
-export const columns: ColumnDef<Payment>[] = [
-  {
-    id: "select",
-    header: ({ table }) => (
-      <Checkbox
-        checked={table.getIsAllPageRowsSelected()}
-        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-        aria-label="Select all"
-      />
-    ),
-    cell: ({ row }) => (
-      <Checkbox
-        checked={row.getIsSelected()}
-        onCheckedChange={(value) => row.toggleSelected(!!value)}
-        aria-label="Select row"
-      />
-    ),
-    enableSorting: false,
-    enableHiding: false,
-  },
-  {
-    accessorKey: "status",
-    header: "Status",
-    cell: ({ row }) => (
-      <div className="capitalize">{row.getValue("status")}</div>
-    ),
-  },
-  {
-    accessorKey: "email",
-    header: ({ column }) => {
-      return (
-        <Button
-          variant="ghost"
-          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
-        >
-          Email
-          <ArrowUpDown className="ml-2 h-4 w-4" />
-        </Button>
-      )
-    },
-    cell: ({ row }) => <div className="lowercase">{row.getValue("email")}</div>,
-  },
-  {
-    accessorKey: "amount",
-    header: () => <div className="text-right">Amount</div>,
-    cell: ({ row }) => {
-      const amount = parseFloat(row.getValue("amount"))
-
-      // Format the amount as a dollar amount
-      const formatted = new Intl.NumberFormat("en-US", {
-        style: "currency",
-        currency: "USD",
-      }).format(amount)
-
-      return <div className="text-right font-medium">{formatted}</div>
-    },
-  },
-  {
-    id: "actions",
-    enableHiding: false,
-    cell: ({ row }) => {
-      const payment = row.original
-
-      return (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" className="h-8 w-8 p-0">
-              <span className="sr-only">Open menu</span>
-              <MoreHorizontal className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuLabel>Actions</DropdownMenuLabel>
-            <DropdownMenuItem
-              onClick={() => navigator.clipboard.writeText(payment.id)}
-            >
-              Copy payment ID
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem>View customer</DropdownMenuItem>
-            <DropdownMenuItem>View payment details</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      )
-    },
-  },
-]

apps/www/components/examples/data-table/demo.tsx

@@ -1,41 +0,0 @@
-import { faker } from "@faker-js/faker"
-
-import { Payment, columns } from "@/components/examples/data-table/columns"
-import { DataTable } from "@/components/examples/data-table/data-table"
-
-const data: Payment[] = [
-  {
-    id: "m5gr84i9",
-    amount: 316,
-    status: "success",
-    email: "ken99@yahoo.com",
-  },
-  {
-    id: "3u1reuv4",
-    amount: 242,
-    status: "success",
-    email: "Abe45@gmail.com",
-  },
-  {
-    id: "derv1ws0",
-    amount: 837,
-    status: "processing",
-    email: "Monserrat44@gmail.com",
-  },
-  {
-    id: "5kma53ae",
-    amount: 874,
-    status: "success",
-    email: "Silas22@gmail.com",
-  },
-  {
-    id: "bhqecj4p",
-    amount: 721,
-    status: "failed",
-    email: "carmella@hotmail.com",
-  },
-]
-
-export function DataTableDemo() {
-  return <DataTable columns={columns} data={data} />
-}

apps/www/components/examples/index.tsx

@@ -1,213 +0,0 @@
-import { AccordionDemo } from "@/components/examples/accordion/demo"
-import { AlertDialogDemo } from "@/components/examples/alert-dialog/demo"
-import { AlertDemo } from "@/components/examples/alert/demo"
-import { AlertDestructive } from "@/components/examples/alert/destructive"
-import { AspectRatioDemo } from "@/components/examples/aspect-ratio/demo"
-import { AvatarDemo } from "@/components/examples/avatar/demo"
-import { BadgeDemo } from "@/components/examples/badge/demo"
-import { BadgeDestructive } from "@/components/examples/badge/destructive"
-import { BadgeOutline } from "@/components/examples/badge/outline"
-import { BadgeSecondary } from "@/components/examples/badge/secondary"
-import { ButtonAsChild } from "@/components/examples/button/as-child"
-import { ButtonDemo } from "@/components/examples/button/demo"
-import { ButtonDestructive } from "@/components/examples/button/destructive"
-import { ButtonGhost } from "@/components/examples/button/ghost"
-import { ButtonLink } from "@/components/examples/button/link"
-import { ButtonLoading } from "@/components/examples/button/loading"
-import { ButtonOutline } from "@/components/examples/button/outline"
-import { ButtonSecondary } from "@/components/examples/button/secondary"
-import { ButtonWithIcon } from "@/components/examples/button/with-icon"
-import { CalendarDemo } from "@/components/examples/calendar/demo"
-import { CalendarReactHookForm } from "@/components/examples/calendar/react-hook-form"
-import { CardDemo } from "@/components/examples/card/demo"
-import { CardWithForm } from "@/components/examples/card/with-form"
-import { CheckboxDemo } from "@/components/examples/checkbox/demo"
-import { CheckboxDisabled } from "@/components/examples/checkbox/disabled"
-import { CheckboxReactHookFormMultiple } from "@/components/examples/checkbox/react-hook-form-multiple"
-import { CheckboxReactHookFormSingle } from "@/components/examples/checkbox/react-hook-form-single"
-import { CheckboxWithText } from "@/components/examples/checkbox/with-text"
-import { CollapsibleDemo } from "@/components/examples/collapsible/demo"
-import { ComboboxDemo } from "@/components/examples/combobox/demo"
-import { ComboboxDropdownMenu } from "@/components/examples/combobox/dropdown-menu"
-import { ComboboxPopover } from "@/components/examples/combobox/popover"
-import { ComboboxReactHookForm } from "@/components/examples/combobox/react-hook-form"
-import { CommandDemo } from "@/components/examples/command/demo"
-import { CommandDialogDemo } from "@/components/examples/command/dialog"
-import { ContextMenuDemo } from "@/components/examples/context-menu/demo"
-import { DataTableDemo } from "@/components/examples/data-table/demo"
-import { DatePickerDemo } from "@/components/examples/date-picker/demo"
-import { DatePickerReactHookForm } from "@/components/examples/date-picker/react-hook-form"
-import { DatePickerWithPresets } from "@/components/examples/date-picker/with-presets"
-import { DatePickerWithRange } from "@/components/examples/date-picker/with-range"
-import { DialogDemo } from "@/components/examples/dialog/demo"
-import { DropdownMenuCheckboxes } from "@/components/examples/dropdown-menu/checkboxes"
-import { DropdownMenuDemo } from "@/components/examples/dropdown-menu/demo"
-import { DropdownMenuRadioGroupDemo } from "@/components/examples/dropdown-menu/radio-group"
-import { HoverCardDemo } from "@/components/examples/hover-card/demo"
-import { InputDemo } from "@/components/examples/input/demo"
-import { InputDisabled } from "@/components/examples/input/disabled"
-import { InputFile } from "@/components/examples/input/file"
-import { InputReactHookForm } from "@/components/examples/input/react-hook-form"
-import { InputWithButton } from "@/components/examples/input/with-button"
-import { InputWithLabel } from "@/components/examples/input/with-label"
-import { InputWithText } from "@/components/examples/input/with-text"
-import { LabelDemo } from "@/components/examples/label/demo"
-import { MenubarDemo } from "@/components/examples/menubar/demo"
-import { NavigationMenuDemo } from "@/components/examples/navigation-menu/demo"
-import { PopoverDemo } from "@/components/examples/popover/demo"
-import { ProgressDemo } from "@/components/examples/progress/demo"
-import { RadioGroupDemo } from "@/components/examples/radio-group/demo"
-import { RadioGroupReactHookForm } from "@/components/examples/radio-group/react-hook-form"
-import { ScrollAreaDemo } from "@/components/examples/scroll-area/demo"
-import { SelectDemo } from "@/components/examples/select/demo"
-import { SelectReactHookForm } from "@/components/examples/select/react-hook-form"
-import { SeparatorDemo } from "@/components/examples/separator/demo"
-import { SheetDemo } from "@/components/examples/sheet/demo"
-import { SheetPosition } from "@/components/examples/sheet/position"
-import { SheetSize } from "@/components/examples/sheet/size"
-import { SkeletonDemo } from "@/components/examples/skeleton/demo"
-import { SliderDemo } from "@/components/examples/slider/demo"
-import { SwitchDemo } from "@/components/examples/switch/demo"
-import { SwitchReactHookForm } from "@/components/examples/switch/react-hook-form"
-import { TableDemo } from "@/components/examples/table/demo"
-import { TabsDemo } from "@/components/examples/tabs/demo"
-import { TextareaDemo } from "@/components/examples/textarea/demo"
-import { TextareaDisabled } from "@/components/examples/textarea/disabled"
-import { TextareaReactHookForm } from "@/components/examples/textarea/react-hook-form"
-import { TextareaWithButton } from "@/components/examples/textarea/with-button"
-import { TextareaWithLabel } from "@/components/examples/textarea/with-label"
-import { TextareaWithText } from "@/components/examples/textarea/with-text"
-import { ToastDemo } from "@/components/examples/toast/demo"
-import { ToastDestructive } from "@/components/examples/toast/destructive"
-import { ToastSimple } from "@/components/examples/toast/simple"
-import { ToastWithAction } from "@/components/examples/toast/with-action"
-import { ToastWithTitle } from "@/components/examples/toast/with-title"
-import { ToggleDemo } from "@/components/examples/toggle/demo"
-import { ToggleDisabled } from "@/components/examples/toggle/disabled"
-import { ToggleLg } from "@/components/examples/toggle/lg"
-import { ToggleOutline } from "@/components/examples/toggle/outline"
-import { ToggleSm } from "@/components/examples/toggle/sm"
-import { ToggleWithText } from "@/components/examples/toggle/with-text"
-import { TooltipDemo } from "@/components/examples/tooltip/demo"
-import { TypographyBlockquote } from "@/components/examples/typography/blockquote"
-import { TypographyDemo } from "@/components/examples/typography/demo"
-import { TypographyH1 } from "@/components/examples/typography/h1"
-import { TypographyH2 } from "@/components/examples/typography/h2"
-import { TypographyH3 } from "@/components/examples/typography/h3"
-import { TypographyH4 } from "@/components/examples/typography/h4"
-import { TypographyInlineCode } from "@/components/examples/typography/inline-code"
-import { TypographyLarge } from "@/components/examples/typography/large"
-import { TypographyLead } from "@/components/examples/typography/lead"
-import { TypographyList } from "@/components/examples/typography/list"
-import { TypographyMuted } from "@/components/examples/typography/muted"
-import { TypographyP } from "@/components/examples/typography/p"
-import { TypographySmall } from "@/components/examples/typography/small"
-import { TypographyTable } from "@/components/examples/typography/table"
-
-export const examples = {
-  AccordionDemo,
-  AlertDemo,
-  AlertDialogDemo,
-  AlertDestructive,
-  AspectRatioDemo,
-  AvatarDemo,
-  BadgeDemo,
-  BadgeDestructive,
-  BadgeOutline,
-  BadgeSecondary,
-  ButtonDemo,
-  ButtonGhost,
-  ButtonDestructive,
-  ButtonLink,
-  ButtonLoading,
-  ButtonOutline,
-  ButtonSecondary,
-  ButtonWithIcon,
-  ButtonAsChild,
-  CalendarDemo,
-  CalendarReactHookForm,
-  DataTableDemo,
-  DatePickerDemo,
-  DatePickerWithRange,
-  DatePickerWithPresets,
-  DatePickerReactHookForm,
-  CardDemo,
-  CardWithForm,
-  CheckboxDemo,
-  CheckboxDisabled,
-  CheckboxWithText,
-  CheckboxReactHookFormMultiple,
-  CheckboxReactHookFormSingle,
-  CollapsibleDemo,
-  CommandDemo,
-  CommandDialogDemo,
-  ComboboxDemo,
-  ComboboxPopover,
-  ComboboxDropdownMenu,
-  ComboboxReactHookForm,
-  ContextMenuDemo,
-  DialogDemo,
-  DropdownMenuCheckboxes,
-  DropdownMenuDemo,
-  DropdownMenuRadioGroupDemo,
-  HoverCardDemo,
-  InputDemo,
-  InputDisabled,
-  InputFile,
-  InputWithButton,
-  InputWithLabel,
-  InputWithText,
-  InputReactHookForm,
-  LabelDemo,
-  MenubarDemo,
-  NavigationMenuDemo,
-  PopoverDemo,
-  ProgressDemo,
-  RadioGroupDemo,
-  RadioGroupReactHookForm,
-  ScrollAreaDemo,
-  SelectDemo,
-  SelectReactHookForm,
-  SeparatorDemo,
-  SheetDemo,
-  SheetSize,
-  SheetPosition,
-  SkeletonDemo,
-  SliderDemo,
-  SwitchDemo,
-  SwitchReactHookForm,
-  TableDemo,
-  TabsDemo,
-  TextareaDemo,
-  TextareaDisabled,
-  TextareaWithButton,
-  TextareaWithLabel,
-  TextareaWithText,
-  TextareaReactHookForm,
-  ToastDemo,
-  ToastDestructive,
-  ToastSimple,
-  ToastWithTitle,
-  ToastWithAction,
-  TooltipDemo,
-  TypographyBlockquote,
-  TypographyDemo,
-  TypographyH1,
-  TypographyH2,
-  TypographyH3,
-  TypographyH4,
-  TypographyInlineCode,
-  TypographyLarge,
-  TypographyLead,
-  TypographyList,
-  TypographyP,
-  TypographySmall,
-  TypographyMuted,
-  TypographyTable,
-  ToggleDemo,
-  ToggleSm,
-  ToggleLg,
-  ToggleOutline,
-  ToggleDisabled,
-  ToggleWithText,
-}

apps/www/components/examples/input/demo.tsx

@@ -1,5 +0,0 @@
-import { Input } from "@/components/ui/input"
-
-export function InputDemo() {
-  return <Input type="email" placeholder="Email" />
-}

apps/www/components/examples/input/disabled.tsx

@@ -1,5 +0,0 @@
-import { Input } from "@/components/ui/input"
-
-export function InputDisabled() {
-  return <Input disabled type="email" placeholder="Email" />
-}

apps/www/components/examples/sheet/position.tsx

@@ -1,78 +0,0 @@
-"use client"
-
-import { useState } from "react"
-
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
-import {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from "@/components/ui/sheet"
-
-const SHEET_POSITIONS = ["top", "right", "bottom", "left"] as const
-
-type SheetPosition = (typeof SHEET_POSITIONS)[number]
-
-export function SheetPosition() {
-  const [position, setPosition] = useState<SheetPosition>("right")
-  return (
-    <div className="flex flex-col space-y-8">
-      <RadioGroup
-        defaultValue={position}
-        onValueChange={(value) => setPosition(value as SheetPosition)}
-      >
-        <div className="grid grid-cols-2 gap-2">
-          {SHEET_POSITIONS.map((position, index) => (
-            <div
-              key={`${position}-${index}`}
-              className="flex items-center space-x-2"
-            >
-              <RadioGroupItem value={position} id={position} />
-              <Label htmlFor={position}>{position}</Label>
-            </div>
-          ))}
-        </div>
-      </RadioGroup>
-      <Sheet>
-        <SheetTrigger asChild>
-          <Button>Open {position} sheet</Button>
-        </SheetTrigger>
-        <SheetContent position={position} size="content">
-          <SheetHeader>
-            <SheetTitle>Edit profile</SheetTitle>
-            <SheetDescription>
-              Make changes to your profile here. Click save when you're done.
-            </SheetDescription>
-          </SheetHeader>
-          <div className="grid gap-4 py-4">
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="name" className="text-right">
-                Name
-              </Label>
-              <Input id="name" value="Pedro Duarte" className="col-span-3" />
-            </div>
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="username" className="text-right">
-                Username
-              </Label>
-              <Input id="username" value="@peduarte" className="col-span-3" />
-            </div>
-          </div>
-          <SheetFooter>
-            <SheetClose asChild>
-              <Button type="submit">Save changes</Button>
-            </SheetClose>
-          </SheetFooter>
-        </SheetContent>
-      </Sheet>
-    </div>
-  )
-}

apps/www/components/examples/sheet/size.tsx

@@ -1,78 +0,0 @@
-"use client"
-
-import { useState } from "react"
-
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
-import {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from "@/components/ui/sheet"
-
-const SHEET_SIZES = ["sm", "default", "lg", "xl", "full", "content"] as const
-
-type SheetSize = (typeof SHEET_SIZES)[number]
-
-export function SheetSize() {
-  const [size, setSize] = useState<SheetSize>("default")
-  return (
-    <div className="flex flex-col space-y-8">
-      <RadioGroup
-        defaultValue={size}
-        onValueChange={(value) => setSize(value as SheetSize)}
-      >
-        <div className="grid grid-cols-2 gap-2">
-          {SHEET_SIZES.map((size, index) => (
-            <div
-              key={`${size}-${index}`}
-              className="flex items-center space-x-2"
-            >
-              <RadioGroupItem value={size} id={size} />
-              <Label htmlFor={size}>{size}</Label>
-            </div>
-          ))}
-        </div>
-      </RadioGroup>
-      <Sheet>
-        <SheetTrigger asChild>
-          <Button>Open {size} sheet</Button>
-        </SheetTrigger>
-        <SheetContent position="right" size={size}>
-          <SheetHeader>
-            <SheetTitle>Edit profile</SheetTitle>
-            <SheetDescription>
-              Make changes to your profile here. Click save when you're done.
-            </SheetDescription>
-          </SheetHeader>
-          <div className="grid gap-4 py-4">
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="name" className="text-right">
-                Name
-              </Label>
-              <Input id="name" value="Pedro Duarte" className="col-span-3" />
-            </div>
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="username" className="text-right">
-                Username
-              </Label>
-              <Input id="username" value="@peduarte" className="col-span-3" />
-            </div>
-          </div>
-          <SheetFooter>
-            <SheetClose asChild>
-              <Button type="submit">Save changes</Button>
-            </SheetClose>
-          </SheetFooter>
-        </SheetContent>
-      </Sheet>
-    </div>
-  )
-}

apps/www/components/examples/textarea/demo.tsx

@@ -1,5 +0,0 @@
-import { Textarea } from "@/components/ui/textarea"
-
-export function TextareaDemo() {
-  return <Textarea placeholder="Type your message here." />
-}