chore: move all ui components from apps/docs to packages/ui

Author: nelsonlaidev

apps/docs/eslint.config.ts

@@ -1,24 +1,10 @@
 import { defineConfig } from '@nelsonlaidev/eslint-config'
 
-export default defineConfig(
-  {
-    tailwindEntryPoint: './src/styles/globals.css',
-    overrides: {
-      tailwindcss: {
-        'better-tailwindcss/no-unregistered-classes': ['error', { ignore: ['not-prose', 'toaster'] }]
-      }
-    }
-  },
-  {
-    files: ['src/components/ui/**/*.tsx'],
-    rules: {
-      // They are OK in UI components
-      'jsx-a11y/prefer-tag-over-role': 'off',
-      'jsx-a11y/anchor-has-content': 'off',
-      'jsx-a11y/no-noninteractive-element-interactions': 'off',
-      'jsx-a11y/click-events-have-key-events': 'off',
-      'sonarjs/table-header': 'off',
-      '@eslint-react/hooks-extra/no-direct-set-state-in-use-effect': 'off'
+export default defineConfig({
+  tailwindEntryPoint: './src/styles/globals.css',
+  overrides: {
+    tailwindcss: {
+      'better-tailwindcss/no-unregistered-classes': ['error', { ignore: ['not-prose'] }]
     }
   }
-)
+})

apps/docs/package.json

@@ -25,21 +25,14 @@
   "dependencies": {
     "@repo/ui": "workspace:*",
     "cmdk": "1.1.1",
-    "cva": "1.0.0-beta.4",
-    "embla-carousel-react": "8.6.0",
     "fumadocs-core": "16.0.6",
     "fumadocs-mdx": "13.0.3",
     "fumadocs-ui": "16.0.6",
     "hast-util-to-jsx-runtime": "2.3.6",
-    "input-otp": "1.4.2",
     "lucide-react": "0.548.0",
     "next": "16.0.1",
-    "next-themes": "0.4.6",
-    "radix-ui": "1.4.3",
     "react": "19.2.0",
-    "react-day-picker": "9.11.1",
     "react-dom": "19.2.0",
-    "react-resizable-panels": "3.0.6",
     "recharts": "2.15.4",
     "shiki": "3.14.0",
     "sonner": "2.0.7",

apps/docs/src/app/layout.tsx

@@ -2,12 +2,11 @@ import type { Metadata } from 'next'
 
 import '@/styles/globals.css'
 
+import { Toaster } from '@repo/ui/components/sonner'
 import { cn } from '@repo/ui/utils/cn'
 import { RootProvider } from 'fumadocs-ui/provider/next'
 import { Geist, Geist_Mono } from 'next/font/google'
 
-import { Toaster } from '@/components/ui/sonner'
-
 const geistSans = Geist({
   variable: '--font-geist-sans',
   subsets: ['latin']

apps/docs/src/components/component-preview-tabs.tsx

@@ -1,12 +1,11 @@
 'use client'
 
+import { Button } from '@repo/ui/components/button'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@repo/ui/components/tabs'
 import { CodeBlock } from 'fumadocs-ui/components/codeblock'
 import { RotateCcwIcon } from 'lucide-react'
 import { useState } from 'react'
 
-import { Button } from './ui/button'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs'
-
 type ComponentPreviewTabs = {
   preview: React.ReactNode
   source: React.ReactNode

apps/docs/src/components/demos/accordion.tsx

@@ -1,4 +1,4 @@
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../ui/accordion'
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@repo/ui/components/accordion'
 
 const AccordionDemo = () => {
   return (

apps/docs/src/components/demos/alert-dialog.tsx

@@ -8,8 +8,8 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
   AlertDialogTrigger
-} from '../ui/alert-dialog'
-import { Button } from '../ui/button'
+} from '@repo/ui/components/alert-dialog'
+import { Button } from '@repo/ui/components/button'
 
 const AlertDialogDemo = () => {
   return (

apps/docs/src/components/demos/alert.tsx

@@ -1,7 +1,6 @@
+import { Alert, AlertDescription, AlertTitle } from '@repo/ui/components/alert'
 import { AlertCircleIcon, CheckCircle2Icon, PopcornIcon } from 'lucide-react'
 
-import { Alert, AlertDescription, AlertTitle } from '../ui/alert'
-
 const AlertDemo = () => {
   return (
     <div className='grid w-full max-w-xl items-start gap-4'>

apps/docs/src/components/demos/aspect-ratio.tsx

@@ -1,7 +1,6 @@
+import { AspectRatio } from '@repo/ui/components/aspect-ratio'
 import Image from 'next/image'
 
-import { AspectRatio } from '../ui/aspect-ratio'
-
 const AspectRatioDemo = () => {
   return (
     <AspectRatio ratio={16 / 9} className='rounded-lg bg-muted'>

apps/docs/src/components/demos/avatar.tsx

@@ -1,4 +1,4 @@
-import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'
+import { Avatar, AvatarFallback, AvatarImage } from '@repo/ui/components/avatar'
 
 const AvatarDemo = () => {
   return (

apps/docs/src/components/demos/badge.tsx

@@ -1,7 +1,6 @@
+import { Badge } from '@repo/ui/components/badge'
 import { BadgeCheckIcon } from 'lucide-react'
 
-import { Badge } from '../ui/badge'
-
 const BadgeDemo = () => {
   return (
     <div className='flex flex-col items-center gap-2'>