chore: Remove tsconfig paths (#49770)

This PR removes all `paths` in `tsconfig.json` for all apps and
packages. They were added previosly because some of the components had a
`_Shadcn` suffix because of an ongoing migration. How that the migration
is done, the paths can be removed.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Refactor**
* Standardized shared UI component, utility, and icon imports across
design-system examples and application screens.
  * Simplified shared component access and project configuration.
  * Added shared access to anchor-link helpers and animation styles.

* **Compatibility**
* Updated component exports and imports without changing existing
behavior.
  * No changes to user-facing workflows, screens, or functionality.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

apps/design-system/app/(app)/page.tsx

@@ -1,4 +1,4 @@
-import { Auth, Database, Realtime } from 'icons/src/icons'
+import { Auth, Database, Realtime } from 'icons'
 import { Paintbrush } from 'lucide-react'
 import Link from 'next/link'
 

apps/design-system/components/colors.tsx

@@ -1,9 +1,10 @@
 import { useState } from 'react'
-import { cn } from 'ui'
-import color from 'ui/src/lib/tailwind-demo-classes'
+import { cn, colors } from 'ui'
 
 import { Grid, GridItem } from './grid'
 
+const color = colors['default']
+
 const Colors = ({
   definition,
 }: {

apps/design-system/content/docs/components/alert.mdx

@@ -18,7 +18,7 @@ Use [Collapsible Alert](../fragments/collapsible-alert) when a callout also need
 ## Usage
 
 ```tsx
-import { Alert, AlertDescription, AlertTitle } from 'ui/src/components/shadcn/ui/alert'
+import { Alert, AlertDescription, AlertTitle } from 'ui'
 ```
 
 ```tsx
@@ -36,5 +36,5 @@ import { Alert, AlertDescription, AlertTitle } from 'ui/src/components/shadcn/ui
 Use `alertVariants` when building shared wrappers around the primitive.
 
 ```tsx
-import { alertVariants } from 'ui/src/components/shadcn/ui/alert'
+import { alertVariants } from 'ui'
 ```

apps/design-system/content/docs/components/collapsible.mdx

@@ -13,11 +13,7 @@ Use Collapsible for generic disclosure behaviour: rows, sections, menus, tool de
 ## Usage
 
 ```tsx
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from 'ui/src/components/shadcn/ui/collapsible'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from 'ui'
 ```
 
 ```tsx

apps/design-system/registry/default/example/commandmenu-badge.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@ui/components/shadcn/ui/button'
+import { Button } from 'ui'
 import {
   BadgeExperimental,
   CommandMenu,

apps/design-system/registry/default/example/commandmenu-conditional.tsx

@@ -1,5 +1,5 @@
-import { Button } from '@ui/components/shadcn/ui/button'
 import { useMemo, useState } from 'react'
+import { Button } from 'ui'
 import {
   CommandMenu,
   CommandMenuInput,

apps/design-system/registry/default/example/commandmenu-demo.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@ui/components/shadcn/ui/button'
+import { Button } from 'ui'
 import {
   CommandMenu,
   CommandMenuInput,

apps/design-system/registry/default/example/commandmenu-force.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@ui/components/shadcn/ui/button'
+import { Button } from 'ui'
 import {
   CommandMenu,
   CommandMenuInput,

apps/design-system/registry/default/example/commandmenu-hidden.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@ui/components/shadcn/ui/button'
+import { Button } from 'ui'
 import {
   CommandMenu,
   CommandMenuInput,

apps/design-system/registry/default/example/commandmenu-icon.tsx

@@ -1,5 +1,5 @@
-import { Button } from '@ui/components/shadcn/ui/button'
 import { Github } from 'lucide-react'
+import { Button } from 'ui'
 import {
   CommandMenu,
   CommandMenuInput,

apps/design-system/registry/default/example/commandmenu-subpage-custom.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@ui/components/shadcn/ui/button'
+import { Button } from 'ui'
 import {
   Breadcrumb,
   CommandMenu,

apps/design-system/registry/default/example/commandmenu-subpage.tsx

@@ -1,5 +1,5 @@
-import { Button } from '@ui/components/shadcn/ui/button'
 import { useMemo } from 'react'
+import { Button } from 'ui'
 import {
   CommandMenu,
   CommandMenuInput,

apps/design-system/registry/default/example/field-checkbox.tsx

@@ -1,5 +1,5 @@
-import { Checkbox } from 'ui'
 import {
+  Checkbox,
   Field,
   FieldContent,
   FieldDescription,
@@ -8,7 +8,7 @@ import {
   FieldLegend,
   FieldSeparator,
   FieldSet,
-} from 'ui/src/components/shadcn/ui/field'
+} from 'ui'
 
 export default function FieldCheckbox() {
   return (

apps/design-system/registry/default/example/field-choice-card.tsx

@@ -6,8 +6,9 @@ import {
   FieldLabel,
   FieldSet,
   FieldTitle,
-} from 'ui/src/components/shadcn/ui/field'
-import { RadioGroup, RadioGroupItem } from 'ui/src/components/shadcn/ui/radio-group'
+  RadioGroup,
+  RadioGroupItem,
+} from 'ui'
 
 export default function FieldChoiceCard() {
   return (

apps/design-system/registry/default/example/field-demo.tsx

@@ -1,5 +1,6 @@
-import { Button, Checkbox, Input, Textarea } from 'ui'
 import {
+  Button,
+  Checkbox,
   Field,
   FieldDescription,
   FieldGroup,
@@ -7,14 +8,14 @@ import {
   FieldLegend,
   FieldSeparator,
   FieldSet,
-} from 'ui/src/components/shadcn/ui/field'
-import {
+  Input,
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from 'ui/src/components/shadcn/ui/select'
+  Textarea,
+} from 'ui'
 
 export default function FieldDemo() {
   return (

apps/design-system/registry/default/example/field-fieldset.tsx

@@ -1,12 +1,4 @@
-import { Input } from 'ui'
-import {
-  Field,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSet,
-} from 'ui/src/components/shadcn/ui/field'
+import { Field, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSet, Input } from 'ui'
 
 export default function FieldFieldset() {
   return (

apps/design-system/registry/default/example/field-group.tsx

@@ -1,12 +1,12 @@
-import { Checkbox } from 'ui'
 import {
+  Checkbox,
   Field,
   FieldDescription,
   FieldGroup,
   FieldLabel,
   FieldSeparator,
   FieldSet,
-} from 'ui/src/components/shadcn/ui/field'
+} from 'ui'
 
 export default function FieldGroupExample() {
   return (

apps/design-system/registry/default/example/field-hear.tsx

@@ -1,5 +1,7 @@
-import { Card, CardContent, Checkbox } from 'ui'
 import {
+  Card,
+  CardContent,
+  Checkbox,
   Field,
   FieldDescription,
   FieldGroup,
@@ -7,7 +9,7 @@ import {
   FieldLegend,
   FieldSet,
   FieldTitle,
-} from 'ui/src/components/shadcn/ui/field'
+} from 'ui'
 
 const options = [
   {

apps/design-system/registry/default/example/field-input.tsx

@@ -1,11 +1,4 @@
-import { Input } from 'ui'
-import {
-  Field,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldSet,
-} from 'ui/src/components/shadcn/ui/field'
+import { Field, FieldDescription, FieldGroup, FieldLabel, FieldSet, Input } from 'ui'
 
 export default function FieldInput() {
   return (

apps/design-system/registry/default/example/field-radio.tsx

@@ -1,5 +1,4 @@
-import { Field, FieldDescription, FieldLabel, FieldSet } from 'ui/src/components/shadcn/ui/field'
-import { RadioGroup, RadioGroupItem } from 'ui/src/components/shadcn/ui/radio-group'
+import { Field, FieldDescription, FieldLabel, FieldSet, RadioGroup, RadioGroupItem } from 'ui'
 
 export default function FieldRadio() {
   return (

apps/design-system/registry/default/example/field-responsive.tsx

@@ -1,5 +1,5 @@
-import { Button, Input, Textarea } from 'ui'
 import {
+  Button,
   Field,
   FieldContent,
   FieldDescription,
@@ -8,7 +8,9 @@ import {
   FieldLegend,
   FieldSeparator,
   FieldSet,
-} from 'ui/src/components/shadcn/ui/field'
+  Input,
+  Textarea,
+} from 'ui'
 
 export default function FieldResponsive() {
   return (

apps/design-system/registry/default/example/field-select.tsx

@@ -1,11 +1,13 @@
-import { Field, FieldDescription, FieldLabel } from 'ui/src/components/shadcn/ui/field'
 import {
+  Field,
+  FieldDescription,
+  FieldLabel,
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from 'ui/src/components/shadcn/ui/select'
+} from 'ui'
 
 export default function FieldSelect() {
   return (

apps/design-system/registry/default/example/field-slider.tsx

@@ -1,8 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import { Slider } from 'ui'
-import { Field, FieldDescription, FieldTitle } from 'ui/src/components/shadcn/ui/field'
+import { Field, FieldDescription, FieldTitle, Slider } from 'ui'
 
 export default function FieldSlider() {
   const [value, setValue] = useState([200, 800])

apps/design-system/registry/default/example/field-switch.tsx

@@ -1,10 +1,4 @@
-import { Switch } from 'ui'
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldLabel,
-} from 'ui/src/components/shadcn/ui/field'
+import { Field, FieldContent, FieldDescription, FieldLabel, Switch } from 'ui'
 
 export default function FieldSwitch() {
   return (

apps/design-system/registry/default/example/field-textarea.tsx

@@ -1,11 +1,4 @@
-import { Textarea } from 'ui'
-import {
-  Field,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldSet,
-} from 'ui/src/components/shadcn/ui/field'
+import { Field, FieldDescription, FieldGroup, FieldLabel, FieldSet, Textarea } from 'ui'
 
 export default function FieldTextarea() {
   return (

apps/design-system/tsconfig.json

@@ -6,7 +6,6 @@
     "lib": ["dom", "dom.iterable", "esnext"],
     "paths": {
       "@/*": ["./*"],
-      "@ui/*": ["./../../packages/ui/src/*"], // handle ui package paths
       "contentlayer/generated": ["./.contentlayer/generated"],
       "icons/*": ["./../../packages/icons/*"]
     },

apps/docs/app/guides/getting-started/ai-skills/AiSkillsIndex.tsx

@@ -1,5 +1,5 @@
+import { Heading } from 'ui'
 import { CodeBlock } from 'ui-patterns/CodeBlock'
-import Heading from 'ui/src/components/CustomHTMLElements/Heading'
 
 import { getAiSkills } from './AiSkills.utils'
 

apps/docs/app/guides/local-development/cli/config/page.tsx

@@ -4,8 +4,8 @@ import { genGuideMeta } from '~/features/docs/GuidesMdx.utils'
 import type { Parameter } from '~/lib/refGenerator/refTypes'
 import specFile from '~/spec/cli_v1_config.yaml' with { type: 'yml' }
 import ReactMarkdown from 'react-markdown'
+import { Heading } from 'ui'
 import { CodeBlock } from 'ui-patterns/CodeBlock'
-import { Heading } from 'ui/src/components/CustomHTMLElements'
 
 const meta = {
   title: 'Supabase CLI config',

apps/docs/components/ContentListings/ContentListings.client.tsx

@@ -11,9 +11,8 @@ import { useSendTelemetryEvent } from '~/lib/telemetry'
 import Link from 'next/link'
 import { useCallback, useMemo } from 'react'
 import ReactMarkdown from 'react-markdown'
-import { Badge } from 'ui'
+import { Badge, Heading } from 'ui'
 import { GlassPanel } from 'ui-patterns/GlassPanel'
-import { Heading } from 'ui/src/components/CustomHTMLElements'
 
 import { resolveContentListingIcon } from './iconChip'
 

apps/docs/features/docs/MdxBase.shared.tsx

@@ -33,11 +33,10 @@ import { TabPanel, Tabs } from '~/features/ui/Tabs'
 import { ArrowDown, Check, X } from 'lucide-react'
 import Link from 'next/link'
 import { type ComponentPropsWithoutRef } from 'react'
-import { Badge, Button } from 'ui'
+import { Badge, Button, Heading } from 'ui'
 import { Admonition, type AdmonitionProps } from 'ui-patterns/Admonition'
 import { GlassPanel } from 'ui-patterns/GlassPanel'
 import SqlToRest from 'ui-patterns/SqlToRest'
-import { Heading } from 'ui/src/components/CustomHTMLElements'
 
 import { AgentPluginsPanel } from '../ui/AgentPluginsPanel'
 import { AiPrompt } from '../ui/AiPrompt'

apps/docs/layouts/ref/RefSubLayout.tsx

@@ -1,12 +1,11 @@
-import { useInView } from 'react-intersection-observer'
-import { FC, PropsWithChildren } from 'react'
-import { highlightSelectedNavItem } from 'ui/src/components/CustomHTMLElements/CustomHTMLElements.utils'
-import { useRouter } from 'next/compat/router'
 import { useNavigationMenuContext } from '~/components/Navigation/NavigationMenu/NavigationMenu.Context'
 import { menuState } from '~/hooks/useMenuState'
-import Image from 'next/legacy/image'
-import { cn } from 'ui'
 import { safeHistoryReplaceState } from '~/lib/historyUtils'
+import { useRouter } from 'next/compat/router'
+import Image from 'next/legacy/image'
+import { FC, PropsWithChildren } from 'react'
+import { useInView } from 'react-intersection-observer'
+import { cn, highlightSelectedNavItem } from 'ui'
 
 interface ISectionContainer {
   id: string

apps/docs/layouts/ref/RefSubLayoutNonFunc.tsx

@@ -1,10 +1,10 @@
-import { useInView } from 'react-intersection-observer'
-import { FC, PropsWithChildren } from 'react'
-import { highlightSelectedNavItem } from 'ui/src/components/CustomHTMLElements/CustomHTMLElements.utils'
-import { useRouter } from 'next/compat/router'
 import { useNavigationMenuContext } from '~/components/Navigation/NavigationMenu/NavigationMenu.Context'
 import { menuState } from '~/hooks/useMenuState'
 import { safeHistoryReplaceState } from '~/lib/historyUtils'
+import { useRouter } from 'next/compat/router'
+import { FC, PropsWithChildren } from 'react'
+import { useInView } from 'react-intersection-observer'
+import { highlightSelectedNavItem } from 'ui'
 
 interface ISectionContainer {
   id: string

apps/learn/tsconfig.json

@@ -6,7 +6,6 @@
       // @deprecated: Don't import directly without suffix. Use @/ always.
       "*": ["./*"],
       "@/*": ["./*"],
-      "@ui/*": ["./../../packages/ui/src/*"], // handle ui package paths
       "contentlayer/generated": ["./.contentlayer/generated"]
     },
     "plugins": [{ "name": "next" }],

apps/studio/components/interfaces/APIKeys/ApiKeyPill.tsx

@@ -1,10 +1,9 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { InputVariants } from '@ui/components/shadcn/ui/input'
 import { useParams } from 'common'
 import { Eye, EyeOff } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { toast } from 'sonner'
-import { Button, cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
+import { Button, cn, InputVariants, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
 
 import { useRevealedSecret } from './useRevealedSecret'
 import CopyButton from '@/components/ui/CopyButton'

apps/studio/components/interfaces/APIKeys/SecretAPIKeys.tsx

@@ -3,15 +3,8 @@ import { IS_PLATFORM, useParams } from 'common'
 import { parseAsString, useQueryState } from 'nuqs'
 import { useEffect, useMemo } from 'react'
 import { toast } from 'sonner'
-import { Card } from 'ui'
+import { Card, Table, TableBody, TableHead, TableHeader, TableRow } from 'ui'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
-import {
-  Table,
-  TableBody,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from 'ui/src/components/shadcn/ui/table'
 
 import { APIKeyRow } from './APIKeyRow'
 import { CreateSecretAPIKeyDialog } from './CreateSecretAPIKeyDialog'

apps/studio/components/interfaces/Account/AccessTokens/AccessTokenList.tsx

@@ -8,9 +8,10 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
+  TableCell,
+  TableRow,
 } from 'ui'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
-import { TableCell, TableRow } from 'ui/src/components/shadcn/ui/table'
 
 import {
   ACCESS_TOKEN_SORT_VALUES,

apps/studio/components/interfaces/Account/AccessTokens/AccessTokenTable/RowLoading.tsx

@@ -1,5 +1,4 @@
-import { Skeleton } from 'ui'
-import { TableCell, TableRow } from 'ui/src/components/shadcn/ui/table'
+import { Skeleton, TableCell, TableRow } from 'ui'
 
 export const RowLoading = () => (
   <TableRow>

apps/studio/components/interfaces/Account/AccessTokens/AccessTokenTable/TableContainer.tsx

@@ -1,12 +1,14 @@
-import { Card, CardContent, cn } from 'ui'
 import {
+  Card,
+  CardContent,
+  cn,
   Table,
   TableBody,
   TableHead,
   TableHeader,
   TableHeadSort,
   TableRow,
-} from 'ui/src/components/shadcn/ui/table'
+} from 'ui'
 
 import { AccessTokenSort, AccessTokenSortColumn } from '../AccessToken.types'
 

apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx

@@ -20,16 +20,14 @@ import {
   DialogSectionSeparator,
   DialogTitle,
   ScrollArea,
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from 'ui'
-import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
-} from 'ui/src/components/shadcn/ui/select'
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from 'ui'
 
 import { AdvisorRulesPreview } from './AdvisorRulesPreview'
 import { CLSPreview } from './CLSPreview'

apps/studio/components/interfaces/Auth/RedirectUrls/AddNewURLModal.tsx

@@ -1,5 +1,4 @@
 import { zodResolver } from '@hookform/resolvers/zod'
-import { Label } from '@ui/components/shadcn/ui/label'
 import { useParams } from 'common'
 import { useEffect } from 'react'
 import { useForm, useWatch } from 'react-hook-form'
@@ -16,6 +15,7 @@ import {
   DialogSectionSeparator,
   DialogTitle,
   Form,
+  Label,
   ScrollArea,
 } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'

apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx

@@ -11,7 +11,6 @@ import {
   StripeAddressElementOptions,
   type SetupIntent,
 } from '@stripe/stripe-js'
-import { Form } from '@ui/components/shadcn/ui/form'
 import { Check, ChevronsUpDown, HelpCircle } from 'lucide-react'
 import { forwardRef, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from 'react'
 import { useForm, useWatch } from 'react-hook-form'
@@ -26,6 +25,7 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
+  Form,
   FormControl,
   FormField,
   FormItem,

apps/studio/components/interfaces/Database/Policies/PolicyEditorPanel/QueryError.tsx

@@ -1,4 +1,3 @@
-import styles from '@ui/layout/ai-icon-animation/ai-icon-animation-style.module.css'
 import { initial, last } from 'lodash'
 import { Dispatch, SetStateAction } from 'react'
 import {
@@ -9,6 +8,7 @@ import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
+  aiIconAnimationStyles as styles,
 } from 'ui'
 
 import { QueryResponseError } from '@/data/sql/execute-sql-mutation'

apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.utils.tsx

@@ -1,4 +1,4 @@
-import { getAnchor } from '@ui/components/CustomHTMLElements/CustomHTMLElements.utils'
+import { getAnchor } from 'ui'
 
 import { EdgeFunction } from '@/data/edge-functions/edge-function-query'
 import { DOCS_URL } from '@/lib/constants'

apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CreateCronJobSheet.tsx

@@ -1,6 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { useWatch } from '@ui/components/shadcn/ui/form'
 import { useParams } from 'common'
 import { parseAsString, useQueryState } from 'nuqs'
 import { useEffect, useState } from 'react'
@@ -21,6 +20,7 @@ import {
   SheetHeader,
   SheetSection,
   SheetTitle,
+  useWatch,
   WarningIcon,
 } from 'ui'
 import { Admonition } from 'ui-patterns/Admonition'

apps/studio/components/interfaces/Integrations/Wrappers/InputField.tsx

@@ -1,8 +1,7 @@
-import { InputVariants } from '@ui/components/shadcn/ui/input'
 import { HelpCircle } from 'lucide-react'
 import Link from 'next/link'
 import type { Control, FieldPath, FieldValues } from 'react-hook-form'
-import { cn, FormControl, FormField, Input, Textarea } from 'ui'
+import { cn, FormControl, FormField, Input, InputVariants, Textarea } from 'ui'
 import { Input as PasswordInput } from 'ui-patterns/DataInputs/Input'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 

apps/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx

@@ -1,12 +1,11 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { Form, FormControl, FormField } from '@ui/components/shadcn/ui/form'
 import { useParams } from 'common'
 import { useEffect } from 'react'
 import { useForm, useWatch } from 'react-hook-form'
 import { useInView } from 'react-intersection-observer'
 import { toast } from 'sonner'
-import { FormMessage, Input } from 'ui'
+import { Form, FormControl, FormField, FormMessage, Input } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { InfoTooltip } from 'ui-patterns/info-tooltip'
 import {

apps/studio/components/interfaces/Organization/CloudMarketplace/NewAwsMarketplaceOrgModal.tsx

@@ -1,4 +1,7 @@
+import { SubmitHandler } from 'react-hook-form'
+import { toast } from 'sonner'
 import {
+  Button,
   Dialog,
   DialogContent,
   DialogDescription,
@@ -7,10 +10,7 @@ import {
   DialogSection,
   DialogSectionSeparator,
   DialogTitle,
-} from '@ui/components/shadcn/ui/dialog'
-import { SubmitHandler } from 'react-hook-form'
-import { toast } from 'sonner'
-import { Button } from 'ui'
+} from 'ui'
 
 import {
   CREATE_AWS_MANAGED_ORG_FORM_ID,

apps/studio/components/interfaces/QueryPerformance/QueryIndexes.tsx

@@ -1,10 +1,10 @@
-import { AccordionTrigger } from '@ui/components/shadcn/ui/accordion'
 import { Check, Lightbulb, Table2 } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
+  AccordionTrigger,
   Alert,
   AlertDescription,
   AlertTitle,

apps/studio/components/interfaces/Reports/ReportFilterBar.tsx

@@ -1,4 +1,3 @@
-import { Popover, PopoverContent, PopoverTrigger } from '@ui/components/shadcn/ui/popover'
 import { useParams } from 'common'
 import { Auth, Realtime, Storage } from 'icons'
 import { ChevronDown, Database, Network, Plus, RefreshCw, X } from 'lucide-react'
@@ -13,6 +12,9 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
   Input,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
   Select,
   SelectContent,
   SelectGroup,

apps/studio/components/interfaces/Reports/v2/ReportsNumericFilter.tsx

@@ -1,15 +1,18 @@
-import { Label } from '@ui/components/shadcn/ui/label'
-import { Popover, PopoverContent, PopoverTrigger } from '@ui/components/shadcn/ui/popover'
+import { ChevronDown } from 'lucide-react'
+import { useEffect, useState } from 'react'
 import {
+  Button,
+  cn,
+  Label,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@ui/components/shadcn/ui/select'
-import { ChevronDown } from 'lucide-react'
-import { useEffect, useState } from 'react'
-import { Button, cn } from 'ui'
+} from 'ui'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import { z } from 'zod'
 

apps/studio/components/interfaces/Reports/v2/ReportsSelectFilter.tsx

@@ -1,10 +1,20 @@
-import { Checkbox } from '@ui/components/shadcn/ui/checkbox'
-import { CommandGroup } from '@ui/components/shadcn/ui/command'
-import { Label } from '@ui/components/shadcn/ui/label'
-import { Popover, PopoverContent, PopoverTrigger } from '@ui/components/shadcn/ui/popover'
 import { ChevronDown } from 'lucide-react'
 import { useEffect, useState } from 'react'
-import { Button, cn, Command, CommandEmpty, CommandInput, CommandItem, CommandList } from 'ui'
+import {
+  Button,
+  Checkbox,
+  cn,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  Label,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from 'ui'
 import { z } from 'zod'
 
 export interface ReportSelectOption {

apps/studio/components/interfaces/Settings/Logs/LogTable.tsx

@@ -1,5 +1,4 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { ContextMenuContent } from '@ui/components/shadcn/ui/context-menu'
 import { IS_PLATFORM, useParams } from 'common'
 import { Copy, Eye, EyeOff, Play } from 'lucide-react'
 import { Key, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
@@ -10,6 +9,7 @@ import {
   Checkbox,
   cn,
   ContextMenu,
+  ContextMenuContent,
   ContextMenuItem,
   ContextMenuTrigger,
   copyToClipboard,

apps/studio/components/interfaces/Settings/Logs/Logs.DatePickers.tsx

@@ -1,5 +1,3 @@
-import { Label } from '@ui/components/shadcn/ui/label'
-import { RadioGroup, RadioGroupItem } from '@ui/components/shadcn/ui/radio-group'
 import dayjs from 'dayjs'
 import { Clock, HistoryIcon, Lock } from 'lucide-react'
 import type { PropsWithChildren } from 'react'
@@ -11,9 +9,12 @@ import {
   cn,
   copyToClipboard,
   Input,
+  Label,
   Popover,
   PopoverContent,
   PopoverTrigger,
+  RadioGroup,
+  RadioGroupItem,
 } from 'ui'
 
 import { LOGS_LARGE_DATE_RANGE_DAYS_THRESHOLD } from './Logs.constants'

apps/studio/components/interfaces/Settings/Logs/LogsFilterPopover.tsx

@@ -1,8 +1,5 @@
-import { Checkbox } from '@ui/components/shadcn/ui/checkbox'
-import { Label } from '@ui/components/shadcn/ui/label'
-import { Popover, PopoverContent, PopoverTrigger } from '@ui/components/shadcn/ui/popover'
 import { useEffect, useMemo, useState } from 'react'
-import { Button, cn } from 'ui'
+import { Button, Checkbox, cn, Label, Popover, PopoverContent, PopoverTrigger } from 'ui'
 
 import type { Filters, FilterSet } from './Logs.types'
 

apps/studio/components/interfaces/Storage/StorageSettings/S3Connection.tsx

@@ -1,6 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { AlertTitle } from '@ui/components/shadcn/ui/alert'
 import { useParams } from 'common'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
@@ -9,6 +8,7 @@ import { toast } from 'sonner'
 import {
   Alert,
   AlertDescription,
+  AlertTitle,
   Button,
   Card,
   CardContent,

apps/studio/components/ui/AIAssistantPanel/AssistantChatForm.tsx

@@ -1,8 +1,7 @@
 import { useBreakpoint } from 'common'
 import { ArrowUp, Loader2, Square } from 'lucide-react'
 import { ChangeEvent, FormEvent, forwardRef, KeyboardEvent, memo, useRef } from 'react'
-import { ExpandingTextArea } from 'ui'
-import { cn } from 'ui/src/lib/utils'
+import { cn, ExpandingTextArea } from 'ui'
 
 import { ButtonTooltip } from '../ButtonTooltip'
 import { formatAttachedSnippets } from './AIAssistant.utils'

apps/studio/components/ui/DatePicker/index.tsx

@@ -4,13 +4,13 @@ import { ArrowRight, Calendar } from 'lucide-react'
 import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
 import {
   Button,
+  ButtonProps,
   Calendar as CalendarPicker,
   Popover,
   PopoverContent,
   PopoverSeparator,
   PopoverTrigger,
 } from 'ui'
-import { ButtonProps } from 'ui/src/components/Button/Button'
 
 import { TimeSplitInput } from './TimeSplitInput'
 import type { DatePickerToFrom } from '@/components/interfaces/Settings/Logs/Logs.types'

apps/studio/components/ui/Shortcut.tsx

@@ -1,5 +1,5 @@
-import { TooltipContentProps } from '@ui/components/shadcn/ui/tooltip'
 import type { ReactNode } from 'react'
+import { TooltipContentProps } from 'ui'
 
 import { ShortcutTooltip } from './ShortcutTooltip'
 import type { ShortcutId } from '@/state/shortcuts/registry'

apps/studio/components/ui/ShortcutTooltip.tsx

@@ -1,7 +1,6 @@
 import { HotkeySequence } from '@tanstack/react-hotkeys'
-import { TooltipContentProps } from '@ui/components/shadcn/ui/tooltip'
 import { Fragment, useState, type ReactNode } from 'react'
-import { KeyboardShortcut, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
+import { KeyboardShortcut, Tooltip, TooltipContent, TooltipContentProps, TooltipTrigger } from 'ui'
 
 import { hotkeyToKeys } from '@/state/shortcuts/formatShortcut'
 import { SHORTCUT_DEFINITIONS, type ShortcutId } from '@/state/shortcuts/registry'

apps/studio/tsconfig.json

@@ -7,8 +7,7 @@
     "noUnusedParameters": true,
     "lib": ["dom", "dom.iterable", "esnext"],
     "paths": {
-      "@/*": ["./*"],
-      "@ui/*": ["./../../packages/ui/src/*"] // handle ui package paths
+      "@/*": ["./*"]
     },
     "plugins": [{ "name": "next" }],
     "jsx": "react-jsx",

apps/www/components/Forms/ApplyToSupaSquadForm.tsx

@@ -7,6 +7,15 @@ import { AlertCircle } from 'lucide-react'
 import { FC, memo, useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import {
+  Alert,
+  AlertDescription,
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
   Button,
   Form,
   FormControl,
@@ -26,16 +35,6 @@ import {
   MultiSelectorList,
   MultiSelectorTrigger,
 } from 'ui-patterns/multi-select'
-import { Alert, AlertDescription } from 'ui/src/components/shadcn/ui/alert'
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from 'ui/src/components/shadcn/ui/alert-dialog'
 
 import { CountrySelector } from '../Supasquad/CountrySelector'
 

apps/www/components/Forms/RequestADemoForm.tsx

@@ -2,8 +2,7 @@ import { useSendTelemetryEvent } from '~/lib/telemetry'
 import { CircleAlert } from 'lucide-react'
 import Link from 'next/link'
 import { FC, useEffect, useState } from 'react'
-import { Button, cn, Input, Label, Separator, TextArea } from 'ui'
-import { Alert } from 'ui/src/components/shadcn/ui/alert'
+import { Alert, Button, cn, Input, Label, Separator, TextArea } from 'ui'
 
 interface FormData {
   firstName: string

apps/www/components/Forms/TalkToPartnershipTeamForm.tsx

@@ -2,8 +2,7 @@ import { useSendTelemetryEvent } from '~/lib/telemetry'
 import { CircleAlert } from 'lucide-react'
 import Link from 'next/link'
 import { FC, useEffect, useState } from 'react'
-import { Button, cn, Input, Label, Separator, TextArea } from 'ui'
-import { Alert } from 'ui/src/components/shadcn/ui/alert'
+import { Alert, Button, cn, Input, Label, Separator, TextArea } from 'ui'
 
 interface FormData {
   firstName: string

apps/www/components/Nav/index.tsx

@@ -9,17 +9,19 @@ import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import React, { useState } from 'react'
 import { useWindowSize } from 'react-use'
-import { Button, buttonVariants, cn } from 'ui'
-import { AuthenticatedDropdownMenu } from 'ui-patterns/AuthenticatedDropdownMenu'
-import { AnnouncementBanner } from 'ui-patterns/Banners/AnnouncementBanner'
 import {
+  Button,
+  buttonVariants,
+  cn,
   NavigationMenu,
   NavigationMenuContent,
   NavigationMenuItem,
   NavigationMenuLink,
   NavigationMenuList,
   NavigationMenuTrigger,
-} from 'ui/src/components/shadcn/ui/navigation-menu'
+} from 'ui'
+import { AuthenticatedDropdownMenu } from 'ui-patterns/AuthenticatedDropdownMenu'
+import { AnnouncementBanner } from 'ui-patterns/Banners/AnnouncementBanner'
 
 import GitHubButton from './GitHubButton'
 import HamburgerButton from './HamburgerMenu'

apps/www/components/Pricing/ComputePricingCalculator.tsx

@@ -2,10 +2,9 @@ import pricingAddOn from '~/data/PricingAddOnTable.json'
 import { Plus, Trash2 } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { plans as allPlans } from 'shared-data/plans'
-import { Button, cn, Slider } from 'ui'
+import { Button, cn, Slider, ToggleGroup, ToggleGroupItem } from 'ui'
 import { ComputeBadge } from 'ui-patterns/ComputeBadge'
 import { InfoTooltip } from 'ui-patterns/info-tooltip'
-import { ToggleGroup, ToggleGroupItem } from 'ui/src/components/shadcn/ui/toggle-group'
 
 const STANDALONE_PLANS = allPlans
   .filter((plan) => plan.planId === 'pro' || plan.planId === 'team')

apps/www/components/Pricing/PricingComputeSection.tsx

@@ -5,8 +5,7 @@ import Link from 'next/link'
 import React, { useEffect, useRef, useState } from 'react'
 import { useWindowSize } from 'react-use'
 import { plans as allPlans } from 'shared-data/plans'
-import { Button, cn } from 'ui'
-import { ToggleGroup, ToggleGroupItem } from 'ui/src/components/shadcn/ui/toggle-group'
+import { Button, cn, ToggleGroup, ToggleGroupItem } from 'ui'
 
 import Panel from '../Panel'
 import ComputePricingCalculator from './ComputePricingCalculator'

packages/ui-patterns/src/AssistantChat/AssistantChatForm.tsx

@@ -3,8 +3,7 @@
 import { useBreakpoint } from 'common'
 import { Loader2 } from 'lucide-react'
 import React, { ChangeEvent, memo, useRef } from 'react'
-import { ExpandingTextArea } from 'ui'
-import { cn } from 'ui/src/lib/utils'
+import { cn, ExpandingTextArea } from 'ui'
 
 export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
   /* The ref for the textarea, optional. Exposed for the CommandsPopover to attach events. */

packages/ui-patterns/src/AssistantChat/AssistantCommandsPopover.tsx

@@ -12,6 +12,7 @@ import {
   useRef,
 } from 'react'
 import {
+  cn,
   Command,
   CommandEmpty,
   CommandGroup,
@@ -19,9 +20,10 @@ import {
   CommandItem,
   CommandList,
   CommandSeparator,
-} from 'ui/src/components/shadcn/ui/command'
-import { Popover, PopoverAnchor, PopoverContent } from 'ui/src/components/shadcn/ui/popover'
-import { cn } from 'ui/src/lib/utils/cn'
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+} from 'ui'
 
 const AssistantCommandsPopover = forwardRef<
   ComponentRef<typeof Popover>,

packages/ui-patterns/src/Banners/LW15Banner.tsx

@@ -3,7 +3,7 @@
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { useEffect, useRef } from 'react'
-import { Button } from 'ui/src/components/Button'
+import { Button } from 'ui'
 
 import announcement from '../Banners/data.json'
 

packages/ui-patterns/src/CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx

@@ -5,9 +5,8 @@ import { User } from 'lucide-react'
 import { Fragment, useCallback, useEffect, useRef, useState } from 'react'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
-import { AiIconAnimation, Button, cn, CommandGroup, CommandItem, CommandList } from 'ui'
+import { AiIconAnimation, Button, cn, CommandGroup, CommandItem, CommandList, StatusIcon } from 'ui'
 import { markdownComponents } from 'ui-patterns/Markdown'
-import { StatusIcon } from 'ui/src/components/StatusIcon'
 
 import {
   Breadcrumb,

packages/ui-patterns/src/CommandMenu/prepackaged/DocsSearch/DocsSearchPage.tsx

@@ -8,8 +8,7 @@ import {
 } from 'common'
 import { Book, ChevronRight, Github, Hash, Loader2, MessageSquare, Search } from 'lucide-react'
 import { useCallback, useEffect, useRef } from 'react'
-import { Button, cn, CommandGroup, CommandItem, CommandList } from 'ui'
-import { StatusIcon } from 'ui/src/components/StatusIcon'
+import { Button, cn, CommandGroup, CommandItem, CommandList, StatusIcon } from 'ui'
 
 import {
   Breadcrumb,

packages/ui-patterns/src/CountdownWidget/index.tsx

@@ -1,4 +1,4 @@
-import { cn } from 'ui/src/lib/utils'
+import { cn } from 'ui'
 
 import CountdownStep from './CountdownStep'
 

packages/ui-patterns/src/Dialogs/ConfirmationModal.tsx

@@ -10,11 +10,12 @@ import {
   cn,
   Dialog,
   DialogContent,
+  DialogDescription,
+  DialogHeader,
   DialogSection,
   DialogSectionSeparator,
   DialogTitle,
 } from 'ui'
-import { DialogDescription, DialogHeader } from 'ui/src/components/shadcn/ui/dialog'
 
 import { Admonition } from '../Admonition'
 

packages/ui-patterns/src/Dialogs/TextConfirmModal.tsx

@@ -14,6 +14,7 @@ import {
   copyToClipboard,
   Dialog,
   DialogContent,
+  DialogHeader,
   DialogSection,
   DialogSectionSeparator,
   DialogTitle,
@@ -26,7 +27,6 @@ import {
   FormMessage,
   Input,
 } from 'ui'
-import { DialogHeader } from 'ui/src/components/shadcn/ui/dialog'
 import { z } from 'zod'
 
 import { Admonition } from '../Admonition'

packages/ui-patterns/src/Markdown/index.tsx

@@ -3,8 +3,7 @@
 import React from 'react'
 import ReactMarkdown, { type Components, type Options } from 'react-markdown'
 import remarkGfm from 'remark-gfm'
-import { cn } from 'ui'
-import { Heading } from 'ui/src/components/CustomHTMLElements'
+import { cn, Heading } from 'ui'
 
 import {
   Avatar,

packages/ui-patterns/src/McpUrlBuilder/components/McpConfigurationOptions.tsx

@@ -1,7 +1,6 @@
 'use client'
 
-import { cn, Switch } from 'ui'
-import { Label } from 'ui/src/components/shadcn/ui/label'
+import { cn, Label, Switch } from 'ui'
 
 import { InfoTooltip } from '../../info-tooltip'
 import {

packages/ui-patterns/src/MobileSheetNav/MobileSheetNav.tsx

@@ -4,8 +4,7 @@ import { useRouter } from 'next/router'
 import { ComponentProps, useEffect } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
 import { useWindowSize } from 'react-use'
-import { CommandEmpty, Sheet, SheetContent } from 'ui'
-import { cn } from 'ui/src/lib/utils'
+import { cn, CommandEmpty, Sheet, SheetContent } from 'ui'
 
 const MobileSheetNav: React.FC<{
   children: React.ReactNode

packages/ui-patterns/src/PromoToast/PromoBg.tsx

@@ -1,4 +1,4 @@
-import { cn } from 'ui/src/lib/utils/cn'
+import { cn } from 'ui'
 
 interface Props {
   className?: string

packages/ui-patterns/src/PromoToast/PromoToast.tsx

@@ -3,8 +3,7 @@
 import { hasConsented, LOCAL_STORAGE_KEYS } from 'common'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
-import { Button } from 'ui/src/components/Button/Button'
-import { cn } from 'ui/src/lib/utils/cn'
+import { Button, cn } from 'ui'
 
 import announcement from '../Banners/data.json'
 

packages/ui-patterns/src/SqlToRest/base-url-dialog.tsx

@@ -1,14 +1,14 @@
 import { useState } from 'react'
-import { Alert } from 'ui/src/components/shadcn/ui/alert'
-import { Button } from 'ui/src/components/shadcn/ui/button'
 import {
+  Alert,
+  Button,
   Dialog,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from 'ui/src/components/shadcn/ui/dialog'
+} from 'ui'
 
 import { Input } from '../DataInputs/Input'
 

packages/ui-patterns/src/Toc/toc.tsx

@@ -1,8 +1,7 @@
 'use client'
 
 import { Fragment, useRef, type ComponentProps, type HTMLAttributes, type ReactNode } from 'react'
-import { cn, ScrollArea, ScrollViewport } from 'ui'
-import { removeAnchor } from 'ui/src/components/CustomHTMLElements/CustomHTMLElements.utils'
+import { cn, removeAnchor, ScrollArea, ScrollViewport } from 'ui'
 
 import type { TOCItemType } from './server/get-toc'
 import * as Primitive from './toc-primitive'

packages/ui-patterns/src/TweetCard/index.tsx

@@ -1,5 +1,5 @@
 import Image from 'next/image'
-import { cn } from 'ui/src/lib/utils'
+import { cn } from 'ui'
 
 interface TweetCard {
   handle: string

packages/ui-patterns/src/collapsible-alert.tsx

@@ -3,13 +3,7 @@
 import { type VariantProps } from 'class-variance-authority'
 import { ChevronDown } from 'lucide-react'
 import * as React from 'react'
-import { Button, cn } from 'ui'
-import { alertVariants } from 'ui/src/components/shadcn/ui/alert'
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from 'ui/src/components/shadcn/ui/collapsible'
+import { alertVariants, Button, cn, Collapsible, CollapsibleContent, CollapsibleTrigger } from 'ui'
 
 export interface CollapsibleAlertProps
   extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>, VariantProps<typeof alertVariants> {

packages/ui-patterns/src/form/Layout/FormLayout.tsx

@@ -1,7 +1,6 @@
 import { cva } from 'class-variance-authority'
 import React from 'react'
-import { cn, FormDescription, FormLabel, FormMessage, Label } from 'ui'
-import { SIZE } from 'ui/src/lib/constants'
+import { cn, FormDescription, FormLabel, FormMessage, Label, SIZE } from 'ui'
 
 type Props = {
   align?: 'left' | 'right'

packages/ui-patterns/src/multi-select/multi-select.tsx

@@ -17,8 +17,9 @@ import {
   PopoverAnchor,
   PopoverContent,
   PopoverContentProps,
+  SIZE_VARIANTS,
+  SIZE_VARIANTS_DEFAULT,
 } from 'ui'
-import { SIZE_VARIANTS, SIZE_VARIANTS_DEFAULT } from 'ui/src/lib/constants'
 
 interface MultiSelectContextProps {
   id: string

packages/ui/index.tsx

@@ -14,7 +14,12 @@ export * from './src/components/SidePanel'
 
 // HTML
 
-export { Heading } from './src/components/CustomHTMLElements'
+export {
+  Heading,
+  getAnchor,
+  removeAnchor,
+  highlightSelectedNavItem,
+} from './src/components/CustomHTMLElements'
 
 // UTILITIES
 
@@ -31,6 +36,7 @@ export * from './src/components/LoadingLine'
 
 // ai icon
 export * from './src/layout/ai-icon-animation'
+export { default as aiIconAnimationStyles } from './src/layout/ai-icon-animation/ai-icon-animation-style.module.css'
 
 // theme switcher
 export * from './src/components/ThemeProvider/singleThemes'
@@ -160,3 +166,6 @@ export * from './src/lib/Hooks'
 export * from './src/components/hooks/use-mobile'
 
 export * from './src/components/KeyboardShortcut/KeyboardShortcut'
+
+export * as colors from './src/lib/tailwind-demo-classes'
+export * from './src/lib/constants'

packages/ui/src/components/CustomHTMLElements/index.tsx

@@ -1,5 +1,4 @@
 import Heading from './Heading'
 
 export { Heading }
-
-export default Heading
+export { getAnchor, removeAnchor, highlightSelectedNavItem } from './CustomHTMLElements.utils'