Merge branch 'main' into shadcn/v4

# Conflicts: # apps/v4/app/(create)/components/customizer.tsx # apps/v4/app/(create)/components/item-picker.tsx # apps/v4/app/(create)/components/lock-button.tsx # apps/v4/app/(create)/components/picker.tsx # apps/v4/app/(create)/components/preview-controls.tsx # apps/v4/app/(create)/components/preview.tsx # apps/v4/app/(create)/components/random-button.tsx # apps/v4/app/(create)/components/reset-button.tsx # apps/v4/app/(create)/components/toolbar-controls.tsx # apps/v4/app/(create)/create/page.tsx # apps/v4/components/docs-sidebar.tsx # apps/v4/components/site-header.tsx # apps/v4/examples/base/ui-rtl/tooltip.tsx # apps/v4/examples/base/ui/tooltip.tsx # apps/v4/examples/radix/ui-rtl/tooltip.tsx # apps/v4/examples/radix/ui/tooltip.tsx # apps/v4/package.json # apps/v4/public/r/styles/base-lyra/chatgpt.json # apps/v4/public/r/styles/base-lyra/elevenlabs.json # apps/v4/public/r/styles/base-lyra/github.json # apps/v4/public/r/styles/base-lyra/input-group.json # apps/v4/public/r/styles/base-lyra/preview.json # apps/v4/public/r/styles/base-lyra/tooltip-example.json # apps/v4/public/r/styles/base-lyra/tooltip.json # apps/v4/public/r/styles/base-lyra/vercel.json # apps/v4/public/r/styles/base-maia/chatgpt.json # apps/v4/public/r/styles/base-maia/elevenlabs.json # apps/v4/public/r/styles/base-maia/github.json # apps/v4/public/r/styles/base-maia/preview.json # apps/v4/public/r/styles/base-maia/tooltip-example.json # apps/v4/public/r/styles/base-maia/tooltip.json # apps/v4/public/r/styles/base-maia/vercel.json # apps/v4/public/r/styles/base-mira/chatgpt.json # apps/v4/public/r/styles/base-mira/elevenlabs.json # apps/v4/public/r/styles/base-mira/github.json # apps/v4/public/r/styles/base-mira/input-group.json # apps/v4/public/r/styles/base-mira/preview.json # apps/v4/public/r/styles/base-mira/tooltip-example.json # apps/v4/public/r/styles/base-mira/tooltip.json # apps/v4/public/r/styles/base-mira/vercel.json # apps/v4/public/r/styles/base-nova/chatgpt.json # apps/v4/public/r/styles/base-nova/elevenlabs.json # apps/v4/public/r/styles/base-nova/github.json # apps/v4/public/r/styles/base-nova/preview.json # apps/v4/public/r/styles/base-nova/tooltip-example.json # apps/v4/public/r/styles/base-nova/tooltip.json # apps/v4/public/r/styles/base-nova/vercel.json # apps/v4/public/r/styles/base-vega/chatgpt.json # apps/v4/public/r/styles/base-vega/elevenlabs.json # apps/v4/public/r/styles/base-vega/github.json # apps/v4/public/r/styles/base-vega/preview.json # apps/v4/public/r/styles/base-vega/tooltip-example.json # apps/v4/public/r/styles/base-vega/tooltip.json # apps/v4/public/r/styles/base-vega/vercel.json # apps/v4/public/r/styles/radix-lyra/chatgpt.json # apps/v4/public/r/styles/radix-lyra/elevenlabs.json # apps/v4/public/r/styles/radix-lyra/github.json # apps/v4/public/r/styles/radix-lyra/input-group.json # apps/v4/public/r/styles/radix-lyra/preview.json # apps/v4/public/r/styles/radix-lyra/tooltip-example.json # apps/v4/public/r/styles/radix-lyra/tooltip.json # apps/v4/public/r/styles/radix-lyra/vercel.json # apps/v4/public/r/styles/radix-maia/chatgpt.json # apps/v4/public/r/styles/radix-maia/elevenlabs.json # apps/v4/public/r/styles/radix-maia/github.json # apps/v4/public/r/styles/radix-maia/preview.json # apps/v4/public/r/styles/radix-maia/tooltip-example.json # apps/v4/public/r/styles/radix-maia/tooltip.json # apps/v4/public/r/styles/radix-maia/vercel.json # apps/v4/public/r/styles/radix-mira/chatgpt.json # apps/v4/public/r/styles/radix-mira/elevenlabs.json # apps/v4/public/r/styles/radix-mira/github.json # apps/v4/public/r/styles/radix-mira/input-group.json # apps/v4/public/r/styles/radix-mira/preview.json # apps/v4/public/r/styles/radix-mira/tooltip-example.json # apps/v4/public/r/styles/radix-mira/tooltip.json # apps/v4/public/r/styles/radix-mira/vercel.json # apps/v4/public/r/styles/radix-nova/chatgpt.json # apps/v4/public/r/styles/radix-nova/elevenlabs.json # apps/v4/public/r/styles/radix-nova/github.json # apps/v4/public/r/styles/radix-nova/preview.json # apps/v4/public/r/styles/radix-nova/tooltip-example.json # apps/v4/public/r/styles/radix-nova/tooltip.json # apps/v4/public/r/styles/radix-nova/vercel.json # apps/v4/public/r/styles/radix-vega/chatgpt.json # apps/v4/public/r/styles/radix-vega/elevenlabs.json # apps/v4/public/r/styles/radix-vega/github.json # apps/v4/public/r/styles/radix-vega/preview.json # apps/v4/public/r/styles/radix-vega/tooltip-example.json # apps/v4/public/r/styles/radix-vega/tooltip.json # apps/v4/public/r/styles/radix-vega/vercel.json # apps/v4/registry/bases/base/blocks/chatgpt.tsx # apps/v4/registry/bases/base/blocks/elevenlabs.tsx # apps/v4/registry/bases/base/blocks/github.tsx # apps/v4/registry/bases/base/blocks/preview.tsx # apps/v4/registry/bases/base/blocks/vercel.tsx # apps/v4/registry/bases/radix/blocks/chatgpt.tsx # apps/v4/registry/bases/radix/blocks/elevenlabs.tsx # apps/v4/registry/bases/radix/blocks/github.tsx # apps/v4/registry/bases/radix/blocks/preview.tsx # apps/v4/registry/bases/radix/blocks/vercel.tsx
2026-07-03 01:18:38 +00:00 · 2026-03-02 14:00:50 +04:00
parent 4d89b13e6f 7d9689ba01
commit 3d8837bddb
2067 changed files with 4371 additions and 4337 deletions
--- a/.github/workflows/code-check.yml
+++ b/.github/workflows/code-check.yml
@@ -77,6 +77,9 @@ jobs:
      - name: Install dependencies
        run: pnpm install

+      - name: Build packages
+        run: pnpm --filter=shadcn build
+
      - run: pnpm format:check

  tsc:
--- a/.prettierignore
+++ b/.prettierignore
@@ -5,3 +5,4 @@ build
 .contentlayer
 **/fixtures
 deprecated
+packages
--- a/apps/v4/app/(app)/(root)/components/appearance-settings.tsx
+++ b/apps/v4/app/(app)/(root)/components/appearance-settings.tsx
@@ -93,7 +93,7 @@ export function AppearanceSettings() {
              value={gpuCount}
              onChange={handleGpuInputChange}
              size={3}
-              className="h-7 !w-14 font-mono"
+              className="h-7 w-14! font-mono"
              maxLength={3}
            />
            <Button
--- a/apps/v4/app/(app)/(root)/components/field-hear.tsx
+++ b/apps/v4/app/(app)/(root)/components/field-hear.tsx
@@ -46,7 +46,7 @@ export function FieldHear() {
                  <FieldLabel
                    htmlFor={option.value}
                    key={option.value}
-                    className="!w-fit"
+                    className="w-fit!"
                  >
                    <Field
                      orientation="horizontal"
--- a/apps/v4/app/(app)/(root)/components/index.tsx
+++ b/apps/v4/app/(app)/(root)/components/index.tsx
@@ -19,7 +19,7 @@ import { SpinnerEmpty } from "./spinner-empty"

 export function RootComponents() {
  return (
-    <div className="theme-container mx-auto grid gap-8 py-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-6 2xl:gap-8">
+    <div className="mx-auto grid gap-8 py-1 theme-container md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-6 2xl:gap-8">
      <div className="flex flex-col gap-6 *:[div]:w-full *:[div]:max-w-full">
        <FieldDemo />
      </div>
--- a/apps/v4/app/(app)/(root)/components/input-group-button.tsx
+++ b/apps/v4/app/(app)/(root)/components/input-group-button.tsx
@@ -24,7 +24,7 @@ export function InputGroupButtonExample() {
        Input Secure
      </Label>
      <InputGroup className="[--radius:9999px]">
-        <InputGroupInput id="input-secure-19" className="!pl-0.5" />
+        <InputGroupInput id="input-secure-19" className="pl-0.5!" />
        <Popover>
          <PopoverTrigger asChild>
            <InputGroupAddon>
@@ -46,7 +46,7 @@ export function InputGroupButtonExample() {
            <p>You should not enter any sensitive information on this site.</p>
          </PopoverContent>
        </Popover>
-        <InputGroupAddon className="text-muted-foreground !pl-1">
+        <InputGroupAddon className="pl-1! text-muted-foreground">
          https://
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
--- a/apps/v4/app/(app)/(root)/components/input-group-demo.tsx
+++ b/apps/v4/app/(app)/(root)/components/input-group-demo.tsx
@@ -32,7 +32,7 @@ export function InputGroupDemo() {
        <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
      </InputGroup>
      <InputGroup>
-        <InputGroupInput placeholder="example.com" className="!pl-1" />
+        <InputGroupInput placeholder="example.com" className="pl-1!" />
        <InputGroupAddon>
          <InputGroupText>https://</InputGroupText>
        </InputGroupAddon>
@@ -73,7 +73,7 @@ export function InputGroupDemo() {
            </DropdownMenuContent>
          </DropdownMenu>
          <InputGroupText className="ml-auto">52% used</InputGroupText>
-          <Separator orientation="vertical" className="!h-4" />
+          <Separator orientation="vertical" className="h-4!" />
          <InputGroupButton
            variant="default"
            className="rounded-full"
@@ -87,7 +87,7 @@ export function InputGroupDemo() {
      <InputGroup>
        <InputGroupInput placeholder="@shadcn" />
        <InputGroupAddon align="inline-end">
-          <div className="bg-primary text-foreground flex size-4 items-center justify-center rounded-full">
+          <div className="flex size-4 items-center justify-center rounded-full bg-primary text-foreground">
            <IconCheck className="size-3 text-white" />
          </div>
        </InputGroupAddon>
--- a/apps/v4/app/(app)/(root)/components/item-avatar.tsx
+++ b/apps/v4/app/(app)/(root)/components/item-avatar.tsx
@@ -42,7 +42,7 @@ export function ItemAvatar() {
      </Item>
      <Item variant="outline">
        <ItemMedia>
-          <div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
+          <div className="flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale">
            <Avatar className="hidden sm:flex">
              <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
              <AvatarFallback>CN</AvatarFallback>
--- a/apps/v4/app/(app)/(root)/components/notion-prompt-form.tsx
+++ b/apps/v4/app/(app)/(root)/components/notion-prompt-form.tsx
@@ -247,7 +247,7 @@ export function NotionPromptForm() {
                </Command>
              </PopoverContent>
            </Popover>
-            <div className="no-scrollbar -m-1.5 flex gap-1 overflow-y-auto p-1.5">
+            <div className="-m-1.5 no-scrollbar flex gap-1 overflow-y-auto p-1.5">
              {mentions.map((mention) => {
                const item = SAMPLE_DATA.mentionable.find(
                  (item) => item.title === mention
@@ -262,7 +262,7 @@ export function NotionPromptForm() {
                    key={mention}
                    size="sm"
                    variant="secondary"
-                    className="rounded-full !pl-2"
+                    className="rounded-full pl-2!"
                    onClick={() => {
                      setMentions((prev) => prev.filter((m) => m !== mention))
                    }}
@@ -308,7 +308,7 @@ export function NotionPromptForm() {
                className="min-w-48"
              >
                <DropdownMenuGroup>
-                  <DropdownMenuLabel className="text-muted-foreground text-xs">
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">
                    Select Agent Mode
                  </DropdownMenuLabel>
                  {SAMPLE_DATA.models.map((model) => (
@@ -426,7 +426,7 @@ export function NotionPromptForm() {
                  <DropdownMenuItem>
                    <IconPlus /> Connect Apps
                  </DropdownMenuItem>
-                  <DropdownMenuLabel className="text-muted-foreground text-xs">
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">
                    We&apos;ll only search in the sources selected here.
                  </DropdownMenuLabel>
                </DropdownMenuGroup>
--- a/apps/v4/app/(app)/(root)/page.tsx
+++ b/apps/v4/app/(app)/(root)/page.tsx
@@ -64,12 +64,12 @@ export default function IndexPage() {
        </PageActions>
      </PageHeader>
      <PageNav className="hidden md:flex">
-        <ExamplesNav className="[&>a:first-child]:text-primary flex-1 overflow-hidden" />
+        <ExamplesNav className="flex-1 overflow-hidden [&>a:first-child]:text-primary" />
        <ThemeSelector className="mr-4 hidden md:flex" />
      </PageNav>
-      <div className="container-wrapper section-soft flex-1 pb-6">
+      <div className="container-wrapper flex-1 section-soft pb-6">
        <div className="container overflow-hidden">
-          <section className="border-border/50 -mx-4 w-[160vw] overflow-hidden rounded-lg border md:hidden md:w-[150vw]">
+          <section className="-mx-4 w-[160vw] overflow-hidden rounded-lg border border-border/50 md:hidden md:w-[150vw]">
            <Image
              src="/r/styles/new-york-v4/dashboard-01-light.png"
              width={1400}
@@ -87,7 +87,7 @@ export default function IndexPage() {
              priority
            />
          </section>
-          <section className="theme-container hidden md:block">
+          <section className="hidden theme-container md:block">
            <RootComponents />
          </section>
        </div>
--- a/apps/v4/app/(app)/blocks/layout.tsx
+++ b/apps/v4/app/(app)/blocks/layout.tsx
@@ -71,7 +71,7 @@ export default function BlocksLayout({
          <Link href="/blocks/sidebar">Browse all blocks</Link>
        </Button>
      </PageNav>
-      <div className="container-wrapper section-soft flex-1 md:py-12">
+      <div className="container-wrapper flex-1 section-soft md:py-12">
        <div className="container">{children}</div>
      </div>
    </>
--- a/apps/v4/app/(app)/colors/layout.tsx
+++ b/apps/v4/app/(app)/colors/layout.tsx
@@ -62,7 +62,7 @@ export default function ColorsLayout({
      <div className="hidden">
        <div className="container-wrapper">
          <div className="container flex items-center justify-between gap-8 py-4">
-            <ColorsNav className="[&>a:first-child]:text-primary flex-1 overflow-hidden" />
+            <ColorsNav className="flex-1 overflow-hidden [&>a:first-child]:text-primary" />
          </div>
        </div>
      </div>
--- a/apps/v4/app/(app)/docs/[[...slug]]/page.tsx
+++ b/apps/v4/app/(app)/docs/[[...slug]]/page.tsx
@@ -134,7 +134,7 @@ export default async function Page(props: {
                </div>
              </div>
              {doc.description && (
-                <p className="text-muted-foreground text-[1.05rem] sm:text-base sm:text-balance md:max-w-[80%]">
+                <p className="text-[1.05rem] text-muted-foreground sm:text-base sm:text-balance md:max-w-[80%]">
                  {doc.description}
                </p>
              )}
--- a/apps/v4/app/(app)/docs/changelog/page.tsx
+++ b/apps/v4/app/(app)/docs/changelog/page.tsx
@@ -57,7 +57,7 @@ export default function ChangelogPage() {
                </a>
              </Button>
            </div>
-            <p className="text-muted-foreground text-[1.05rem] sm:text-base sm:text-balance md:max-w-[80%]">
+            <p className="text-[1.05rem] text-muted-foreground sm:text-base sm:text-balance md:max-w-[80%]">
              Latest updates and announcements.
            </p>
          </div>
@@ -91,9 +91,9 @@ export default function ChangelogPage() {
                      <Link
                        key={page.url}
                        href={page.url}
-                        className="bg-surface text-surface-foreground hover:bg-surface/80 flex w-full flex-col rounded-xl px-4 py-3 transition-colors"
+                        className="flex w-full flex-col rounded-xl bg-surface px-4 py-3 text-surface-foreground transition-colors hover:bg-surface/80"
                      >
-                        <span className="text-muted-foreground text-xs">
+                        <span className="text-xs text-muted-foreground">
                          {date}
                        </span>
                        <span className="text-sm font-medium">{title}</span>
@@ -110,7 +110,7 @@ export default function ChangelogPage() {
        <div className="h-(--top-spacing) shrink-0"></div>
        <div className="no-scrollbar flex flex-col gap-8 overflow-y-auto px-8">
          <div className="flex flex-col gap-2 p-4 pt-0 text-sm">
-            <p className="text-muted-foreground bg-background sticky top-0 h-6 text-xs font-medium">
+            <p className="sticky top-0 h-6 bg-background text-xs font-medium text-muted-foreground">
              On This Page
            </p>
            {latestPages.map((page) => {
@@ -119,7 +119,7 @@ export default function ChangelogPage() {
                <Link
                  key={page.url}
                  href={page.url}
-                  className="text-muted-foreground hover:text-foreground text-[0.8rem] no-underline transition-colors"
+                  className="text-[0.8rem] text-muted-foreground no-underline transition-colors hover:text-foreground"
                >
                  {data.title}
                </Link>
@@ -128,7 +128,7 @@ export default function ChangelogPage() {
            {olderPages.length > 0 && (
              <a
                href="#more-updates"
-                className="text-muted-foreground hover:text-foreground text-[0.8rem] no-underline transition-colors"
+                className="text-[0.8rem] text-muted-foreground no-underline transition-colors hover:text-foreground"
              >
                More Updates
              </a>
--- a/apps/v4/app/(app)/docs/layout.tsx
+++ b/apps/v4/app/(app)/docs/layout.tsx
@@ -10,7 +10,7 @@ export default function DocsLayout({
  return (
    <div className="container-wrapper flex flex-1 flex-col px-2">
      <SidebarProvider
-        className="3xl:fixed:container 3xl:fixed:px-3 min-h-min flex-1 items-start px-0 [--top-spacing:0] lg:grid lg:grid-cols-[var(--sidebar-width)_minmax(0,1fr)] lg:[--top-spacing:calc(var(--spacing)*4)]"
+        className="min-h-min flex-1 items-start px-0 [--top-spacing:0] lg:grid lg:grid-cols-[var(--sidebar-width)_minmax(0,1fr)] lg:[--top-spacing:calc(var(--spacing)*4)] 3xl:fixed:container 3xl:fixed:px-3"
        style={
          {
            "--sidebar-width": "calc(var(--spacing) * 72)",
--- a/apps/v4/app/(app)/examples/authentication/page.tsx
+++ b/apps/v4/app/(app)/examples/authentication/page.tsx
@@ -43,8 +43,8 @@ export default function AuthenticationPage() {
        >
          Login
        </Link>
-        <div className="text-primary relative hidden h-full flex-col p-10 lg:flex dark:border-r">
-          <div className="bg-primary/5 absolute inset-0" />
+        <div className="relative hidden h-full flex-col p-10 text-primary lg:flex dark:border-r">
+          <div className="absolute inset-0 bg-primary/5" />
          <div className="relative z-20 flex items-center text-lg font-medium">
            <svg
              xmlns="http://www.w3.org/2000/svg"
@@ -74,7 +74,7 @@ export default function AuthenticationPage() {
              <h1 className="text-2xl font-semibold tracking-tight">
                Create an account
              </h1>
-              <p className="text-muted-foreground text-sm">
+              <p className="text-sm text-muted-foreground">
                Enter your email below to create your account
              </p>
            </div>
--- a/apps/v4/app/(app)/examples/dashboard/components/app-sidebar.tsx
+++ b/apps/v4/app/(app)/examples/dashboard/components/app-sidebar.tsx
@@ -159,10 +159,10 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
          <SidebarMenuItem>
            <SidebarMenuButton
              asChild
-              className="data-[slot=sidebar-menu-button]:!p-1.5"
+              className="data-[slot=sidebar-menu-button]:p-1.5!"
            >
              <Link href="#">
-                <IconInnerShadowTop className="!size-5" />
+                <IconInnerShadowTop className="size-5!" />
                <span className="text-base font-semibold">Acme Inc.</span>
              </Link>
            </SidebarMenuButton>
--- a/apps/v4/app/(app)/examples/dashboard/components/chart-area-interactive.tsx
+++ b/apps/v4/app/(app)/examples/dashboard/components/chart-area-interactive.tsx
@@ -174,7 +174,7 @@ export function ChartAreaInteractive() {
            value={timeRange}
            onValueChange={setTimeRange}
            variant="outline"
-            className="hidden *:data-[slot=toggle-group-item]:!px-4 @[767px]/card:flex"
+            className="hidden *:data-[slot=toggle-group-item]:px-4! @[767px]/card:flex"
          >
            <ToggleGroupItem value="90d">Last 3 months</ToggleGroupItem>
            <ToggleGroupItem value="30d">Last 30 days</ToggleGroupItem>
--- a/apps/v4/app/(app)/examples/dashboard/components/data-table.tsx
+++ b/apps/v4/app/(app)/examples/dashboard/components/data-table.tsx
@@ -128,9 +128,9 @@ function DragHandle({ id }: { id: number }) {
      {...listeners}
      variant="ghost"
      size="icon"
-      className="text-muted-foreground size-7 hover:bg-transparent"
+      className="size-7 text-muted-foreground hover:bg-transparent"
    >
-      <IconGripVertical className="text-muted-foreground size-3" />
+      <IconGripVertical className="size-3 text-muted-foreground" />
      <span className="sr-only">Drag to reorder</span>
    </Button>
  )
@@ -181,7 +181,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
    header: "Section Type",
    cell: ({ row }) => (
      <div className="w-32">
-        <Badge variant="outline" className="text-muted-foreground px-1.5">
+        <Badge variant="outline" className="px-1.5 text-muted-foreground">
          {row.original.type}
        </Badge>
      </div>
@@ -191,7 +191,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
    accessorKey: "status",
    header: "Status",
    cell: ({ row }) => (
-      <Badge variant="outline" className="text-muted-foreground px-1.5">
+      <Badge variant="outline" className="px-1.5 text-muted-foreground">
        {row.original.status === "Done" ? (
          <IconCircleCheckFilled className="fill-green-500 dark:fill-green-400" />
        ) : (
@@ -219,7 +219,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
          Target
        </Label>
        <Input
-          className="hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent"
+          className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30"
          defaultValue={row.original.target}
          id={`${row.original.id}-target`}
        />
@@ -244,7 +244,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
          Limit
        </Label>
        <Input
-          className="hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent"
+          className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30"
          defaultValue={row.original.limit}
          id={`${row.original.id}-limit`}
        />
@@ -292,7 +292,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
        <DropdownMenuTrigger asChild>
          <Button
            variant="ghost"
-            className="data-[state=open]:bg-muted text-muted-foreground flex size-8"
+            className="flex size-8 text-muted-foreground data-[state=open]:bg-muted"
            size="icon"
          >
            <IconDotsVertical />
@@ -425,7 +425,7 @@ export function DataTable({
            <SelectItem value="focus-documents">Focus Documents</SelectItem>
          </SelectContent>
        </Select>
-        <TabsList className="**:data-[slot=badge]:bg-muted-foreground/30 hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:px-1 @4xl/main:flex">
+        <TabsList className="hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:bg-muted-foreground/30 **:data-[slot=badge]:px-1 @4xl/main:flex">
          <TabsTrigger value="outline">Outline</TabsTrigger>
          <TabsTrigger value="past-performance">
            Past Performance <Badge variant="secondary">3</Badge>
@@ -488,7 +488,7 @@ export function DataTable({
            id={sortableId}
          >
            <Table>
-              <TableHeader className="bg-muted sticky top-0 z-10">
+              <TableHeader className="sticky top-0 z-10 bg-muted">
                {table.getHeaderGroups().map((headerGroup) => (
                  <TableRow key={headerGroup.id}>
                    {headerGroup.headers.map((header) => {
@@ -531,7 +531,7 @@ export function DataTable({
          </DndContext>
        </div>
        <div className="flex items-center justify-between px-4">
-          <div className="text-muted-foreground hidden flex-1 text-sm lg:flex">
+          <div className="hidden flex-1 text-sm text-muted-foreground lg:flex">
            {table.getFilteredSelectedRowModel().rows.length} of{" "}
            {table.getFilteredRowModel().rows.length} row(s) selected.
          </div>
@@ -653,7 +653,7 @@ function TableCellViewer({ item }: { item: z.infer<typeof schema> }) {
  return (
    <Drawer direction={isMobile ? "bottom" : "right"}>
      <DrawerTrigger asChild>
-        <Button variant="link" className="text-foreground w-fit px-0 text-left">
+        <Button variant="link" className="w-fit px-0 text-left text-foreground">
          {item.header}
        </Button>
      </DrawerTrigger>
--- a/apps/v4/app/(app)/examples/dashboard/components/nav-documents.tsx
+++ b/apps/v4/app/(app)/examples/dashboard/components/nav-documents.tsx
@@ -52,7 +52,7 @@ export function NavDocuments({
              <DropdownMenuTrigger asChild>
                <SidebarMenuAction
                  showOnHover
-                  className="data-[state=open]:bg-accent rounded-sm"
+                  className="rounded-sm data-[state=open]:bg-accent"
                >
                  <IconDots />
                  <span className="sr-only">More</span>
--- a/apps/v4/app/(app)/examples/dashboard/components/nav-user.tsx
+++ b/apps/v4/app/(app)/examples/dashboard/components/nav-user.tsx
@@ -55,7 +55,7 @@ export function NavUser({
              </Avatar>
              <div className="grid flex-1 text-left text-sm leading-tight">
                <span className="truncate font-medium">{user.name}</span>
-                <span className="text-muted-foreground truncate text-xs">
+                <span className="truncate text-xs text-muted-foreground">
                  {user.email}
                </span>
              </div>
@@ -76,7 +76,7 @@ export function NavUser({
                </Avatar>
                <div className="grid flex-1 text-left text-sm leading-tight">
                  <span className="truncate font-medium">{user.name}</span>
-                  <span className="text-muted-foreground truncate text-xs">
+                  <span className="truncate text-xs text-muted-foreground">
                    {user.email}
                  </span>
                </div>
--- a/apps/v4/app/(app)/examples/dashboard/components/site-header.tsx
+++ b/apps/v4/app/(app)/examples/dashboard/components/site-header.tsx
@@ -4,7 +4,7 @@ import { Button } from "@/registry/new-york-v4/ui/button"

 export function SiteHeader() {
  return (
-    <header className="bg-background/90 sticky top-0 z-10 flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
+    <header className="sticky top-0 z-10 flex h-(--header-height) shrink-0 items-center gap-2 border-b bg-background/90 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
      <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
        <h1 className="text-base font-medium">Documents</h1>
        <div className="ml-auto flex items-center gap-2">
--- a/apps/v4/app/(app)/examples/layout.tsx
+++ b/apps/v4/app/(app)/examples/layout.tsx
@@ -65,12 +65,12 @@ export default function ExamplesLayout({
        </PageActions>
      </PageHeader>
      <PageNav id="examples" className="hidden md:flex">
-        <ExamplesNav className="[&>a:first-child]:text-primary flex-1 overflow-hidden" />
+        <ExamplesNav className="flex-1 overflow-hidden [&>a:first-child]:text-primary" />
        <ThemeSelector className="mr-4 hidden md:flex" />
      </PageNav>
-      <div className="container-wrapper section-soft flex flex-1 flex-col pb-6">
-        <div className="theme-container container flex flex-1 scroll-mt-20 flex-col">
-          <div className="bg-background flex flex-col overflow-hidden rounded-lg border bg-clip-padding has-[[data-slot=rtl-components]]:overflow-visible has-[[data-slot=rtl-components]]:border-0 has-[[data-slot=rtl-components]]:bg-transparent md:flex-1 xl:rounded-xl">
+      <div className="container-wrapper flex flex-1 flex-col section-soft pb-6">
+        <div className="container flex flex-1 scroll-mt-20 flex-col theme-container">
+          <div className="flex flex-col overflow-hidden rounded-lg border bg-background bg-clip-padding has-[[data-slot=rtl-components]]:overflow-visible has-[[data-slot=rtl-components]]:border-0 has-[[data-slot=rtl-components]]:bg-transparent md:flex-1 xl:rounded-xl">
            {children}
          </div>
        </div>
--- a/apps/v4/app/(app)/examples/playground/components/code-viewer.tsx
+++ b/apps/v4/app/(app)/examples/playground/components/code-viewer.tsx
@@ -76,7 +76,7 @@ export function CodeViewer() {
            </pre>
          </div>
          <div>
-            <p className="text-muted-foreground text-sm">
+            <p className="text-sm text-muted-foreground">
              Your API Key can be found here. You should use environment
              variables or a secret management tool to expose your key to your
              applications.
--- a/apps/v4/app/(app)/examples/playground/components/maxlength-selector.tsx
+++ b/apps/v4/app/(app)/examples/playground/components/maxlength-selector.tsx
@@ -27,7 +27,7 @@ export function MaxLengthSelector({ defaultValue }: MaxLengthSelectorProps) {
          <div className="grid gap-4">
            <div className="flex items-center justify-between">
              <Label htmlFor="maxlength">Maximum Length</Label>
-              <span className="text-muted-foreground hover:border-border w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm">
+              <span className="w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm text-muted-foreground hover:border-border">
                {value}
              </span>
            </div>
--- a/apps/v4/app/(app)/examples/playground/components/model-selector.tsx
+++ b/apps/v4/app/(app)/examples/playground/components/model-selector.tsx
@@ -78,7 +78,7 @@ export function ModelSelector({ models, types, ...props }: ModelSelectorProps) {
            >
              <div className="grid gap-2">
                <h4 className="leading-none font-medium">{peekedModel.name}</h4>
-                <div className="text-muted-foreground text-sm">
+                <div className="text-sm text-muted-foreground">
                  {peekedModel.description}
                </div>
                {peekedModel.strengths ? (
@@ -86,7 +86,7 @@ export function ModelSelector({ models, types, ...props }: ModelSelectorProps) {
                    <h5 className="text-sm leading-none font-medium">
                      Strengths
                    </h5>
-                    <ul className="text-muted-foreground text-sm">
+                    <ul className="text-sm text-muted-foreground">
                      {peekedModel.strengths}
                    </ul>
                  </div>
--- a/apps/v4/app/(app)/examples/playground/components/preset-actions.tsx
+++ b/apps/v4/app/(app)/examples/playground/components/preset-actions.tsx
@@ -70,7 +70,7 @@ export function PresetActions() {
            </DialogDescription>
          </DialogHeader>
          <div className="py-6">
-            <h4 className="text-muted-foreground text-sm">
+            <h4 className="text-sm text-muted-foreground">
              Playground Warnings
            </h4>
            <div className="flex items-start justify-between gap-4 pt-3">
@@ -79,7 +79,7 @@ export function PresetActions() {
                <span className="font-semibold">
                  Show a warning when content is flagged
                </span>
-                <span className="text-muted-foreground text-sm">
+                <span className="text-sm text-muted-foreground">
                  A warning will be shown when sexual, hateful, violent or
                  self-harm content is detected.
                </span>
--- a/apps/v4/app/(app)/examples/playground/components/preset-share.tsx
+++ b/apps/v4/app/(app)/examples/playground/components/preset-share.tsx
@@ -18,7 +18,7 @@ export function PresetShare() {
      <PopoverContent align="end" className="flex w-[520px] flex-col gap-4">
        <div className="flex flex-col gap-1 text-center sm:text-left">
          <h3 className="text-lg font-semibold">Share preset</h3>
-          <p className="text-muted-foreground text-sm">
+          <p className="text-sm text-muted-foreground">
            Anyone who has this link and an OpenAI account will be able to view
            this.
          </p>
--- a/apps/v4/app/(app)/examples/playground/components/temperature-selector.tsx
+++ b/apps/v4/app/(app)/examples/playground/components/temperature-selector.tsx
@@ -29,7 +29,7 @@ export function TemperatureSelector({
          <div className="grid gap-4">
            <div className="flex items-center justify-between">
              <Label htmlFor="temperature">Temperature</Label>
-              <span className="text-muted-foreground hover:border-border w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm">
+              <span className="w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm text-muted-foreground hover:border-border">
                {value}
              </span>
            </div>
--- a/apps/v4/app/(app)/examples/playground/components/top-p-selector.tsx
+++ b/apps/v4/app/(app)/examples/playground/components/top-p-selector.tsx
@@ -27,7 +27,7 @@ export function TopPSelector({ defaultValue }: TopPSelectorProps) {
          <div className="grid gap-4">
            <div className="flex items-center justify-between">
              <Label htmlFor="top-p">Top P</Label>
-              <span className="text-muted-foreground hover:border-border w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm">
+              <span className="w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm text-muted-foreground hover:border-border">
                {value}
              </span>
            </div>
--- a/apps/v4/app/(app)/examples/playground/page.tsx
+++ b/apps/v4/app/(app)/examples/playground/page.tsx
@@ -278,7 +278,7 @@ export default function PlaygroundPage() {
                      placeholder="We're writing to [inset]. Congrats from OpenAI!"
                      className="h-full min-h-[300px] p-4 lg:min-h-[700px] xl:min-h-[700px]"
                    />
-                    <div className="bg-muted rounded-md border"></div>
+                    <div className="rounded-md border bg-muted"></div>
                  </div>
                  <div className="flex items-center gap-2">
                    <Button>Submit</Button>
@@ -312,7 +312,7 @@ export default function PlaygroundPage() {
                        />
                      </div>
                    </div>
-                    <div className="bg-muted min-h-[400px] rounded-md border lg:min-h-[700px]" />
+                    <div className="min-h-[400px] rounded-md border bg-muted lg:min-h-[700px]" />
                  </div>
                  <div className="flex items-center gap-2">
                    <Button>Submit</Button>
--- a/apps/v4/app/(app)/examples/rtl/components/appearance-settings.tsx
+++ b/apps/v4/app/(app)/examples/rtl/components/appearance-settings.tsx
@@ -128,7 +128,7 @@ export function AppearanceSettings() {
                value={gpuCount}
                onChange={handleGpuInputChange}
                size={3}
-                className="h-7 !w-14 font-mono"
+                className="h-7 w-14! font-mono"
                maxLength={3}
              />
              <Button
--- a/apps/v4/app/(app)/examples/rtl/components/field-hear.tsx
+++ b/apps/v4/app/(app)/examples/rtl/components/field-hear.tsx
@@ -63,7 +63,7 @@ export function FieldHear() {
                    <FieldLabel
                      htmlFor={`rtl-${option.value}`}
                      key={option.value}
-                      className="!w-fit"
+                      className="w-fit!"
                    >
                      <Field
                        orientation="horizontal"
--- a/apps/v4/app/(app)/examples/rtl/components/input-group-button.tsx
+++ b/apps/v4/app/(app)/examples/rtl/components/input-group-button.tsx
@@ -50,7 +50,7 @@ export function InputGroupButtonExample() {
        {t.inputLabel}
      </Label>
      <InputGroup className="[--radius:9999px]">
-        <InputGroupInput id="input-secure-rtl" className="!pr-0.5" />
+        <InputGroupInput id="input-secure-rtl" className="pr-0.5!" />
        <InputGroupAddon>
          <Popover>
            <PopoverTrigger
--- a/apps/v4/app/(app)/examples/rtl/components/input-group-demo.tsx
+++ b/apps/v4/app/(app)/examples/rtl/components/input-group-demo.tsx
@@ -116,7 +116,7 @@ export function InputGroupDemo() {
            </DropdownMenuContent>
          </DropdownMenu>
          <InputGroupText className="ms-auto">{t.used}</InputGroupText>
-          <Separator orientation="vertical" className="!h-4" />
+          <Separator orientation="vertical" className="h-4!" />
          <InputGroupButton
            variant="default"
            className="rounded-full"
@@ -130,7 +130,7 @@ export function InputGroupDemo() {
      <InputGroup>
        <InputGroupInput placeholder="shadcn" />
        <InputGroupAddon align="inline-end">
-          <div className="bg-primary text-foreground flex size-4 items-center justify-center rounded-full">
+          <div className="flex size-4 items-center justify-center rounded-full bg-primary text-foreground">
            <IconCheck className="size-3 text-white" />
          </div>
        </InputGroupAddon>
--- a/apps/v4/app/(app)/examples/rtl/components/notion-prompt-form.tsx
+++ b/apps/v4/app/(app)/examples/rtl/components/notion-prompt-form.tsx
@@ -288,7 +288,7 @@ export function NotionPromptForm() {
                  </Command>
                </PopoverContent>
              </Popover>
-              <div className="no-scrollbar -m-1.5 flex gap-1 overflow-y-auto p-1.5">
+              <div className="-m-1.5 no-scrollbar flex gap-1 overflow-y-auto p-1.5">
                {mentions.map((mention) => {
                  const item = SAMPLE_DATA.mentionable.find(
                    (item) => item.title === mention
@@ -303,7 +303,7 @@ export function NotionPromptForm() {
                      key={mention}
                      size="sm"
                      variant="secondary"
-                      className="rounded-full !pr-2"
+                      className="rounded-full pr-2!"
                      onClick={() => {
                        setMentions((prev) => prev.filter((m) => m !== mention))
                      }}
@@ -352,7 +352,7 @@ export function NotionPromptForm() {
                  dir={t.dir}
                >
                  <DropdownMenuGroup className="w-48">
-                    <DropdownMenuLabel className="text-muted-foreground text-xs">
+                    <DropdownMenuLabel className="text-xs text-muted-foreground">
                      {t.selectAgentMode}
                    </DropdownMenuLabel>
                    {SAMPLE_DATA.models.map((model) => (
@@ -493,7 +493,7 @@ export function NotionPromptForm() {
                    <DropdownMenuItem>
                      <IconPlus /> {t.connectApps}
                    </DropdownMenuItem>
-                    <DropdownMenuLabel className="text-muted-foreground text-xs">
+                    <DropdownMenuLabel className="text-xs text-muted-foreground">
                      {t.searchSourcesNote}
                    </DropdownMenuLabel>
                  </DropdownMenuGroup>
--- a/apps/v4/app/(app)/examples/tasks/components/columns.tsx
+++ b/apps/v4/app/(app)/examples/tasks/components/columns.tsx
@@ -79,7 +79,7 @@ export const columns: ColumnDef<Task>[] = [
      return (
        <div className="flex w-[100px] items-center gap-2">
          {status.icon && (
-            <status.icon className="text-muted-foreground size-4" />
+            <status.icon className="size-4 text-muted-foreground" />
          )}
          <span>{status.label}</span>
        </div>
@@ -106,7 +106,7 @@ export const columns: ColumnDef<Task>[] = [
      return (
        <div className="flex items-center gap-2">
          {priority.icon && (
-            <priority.icon className="text-muted-foreground size-4" />
+            <priority.icon className="size-4 text-muted-foreground" />
          )}
          <span>{priority.label}</span>
        </div>
--- a/apps/v4/app/(app)/examples/tasks/components/data-table-column-header.tsx
+++ b/apps/v4/app/(app)/examples/tasks/components/data-table-column-header.tsx
@@ -33,7 +33,7 @@ export function DataTableColumnHeader<TData, TValue>({
          <Button
            variant="ghost"
            size="sm"
-            className="data-[state=open]:bg-accent -ml-3 h-8"
+            className="-ml-3 h-8 data-[state=open]:bg-accent"
          >
            <span>{title}</span>
            {column.getIsSorted() === "desc" ? (
--- a/apps/v4/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx
+++ b/apps/v4/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx
@@ -107,18 +107,18 @@ export function DataTableFacetedFilter<TData, TValue>({
                      className={cn(
                        "flex size-4 items-center justify-center rounded-[4px] border",
                        isSelected
-                          ? "bg-primary border-primary text-primary-foreground"
+                          ? "border-primary bg-primary text-primary-foreground"
                          : "border-input [&_svg]:invisible"
                      )}
                    >
-                      <Check className="text-primary-foreground size-3.5" />
+                      <Check className="size-3.5 text-primary-foreground" />
                    </div>
                    {option.icon && (
-                      <option.icon className="text-muted-foreground size-4" />
+                      <option.icon className="size-4 text-muted-foreground" />
                    )}
                    <span>{option.label}</span>
                    {facets?.get(option.value) && (
-                      <span className="text-muted-foreground ml-auto flex size-4 items-center justify-center font-mono text-xs">
+                      <span className="ml-auto flex size-4 items-center justify-center font-mono text-xs text-muted-foreground">
                        {facets.get(option.value)}
                      </span>
                    )}
--- a/apps/v4/app/(app)/examples/tasks/components/data-table-pagination.tsx
+++ b/apps/v4/app/(app)/examples/tasks/components/data-table-pagination.tsx
@@ -24,7 +24,7 @@ export function DataTablePagination<TData>({
 }: DataTablePaginationProps<TData>) {
  return (
    <div className="flex items-center justify-between px-2">
-      <div className="text-muted-foreground flex-1 text-sm">
+      <div className="flex-1 text-sm text-muted-foreground">
        {table.getFilteredSelectedRowModel().rows.length} of{" "}
        {table.getFilteredRowModel().rows.length} row(s) selected.
      </div>
--- a/apps/v4/app/(app)/examples/tasks/components/data-table-row-actions.tsx
+++ b/apps/v4/app/(app)/examples/tasks/components/data-table-row-actions.tsx
@@ -36,7 +36,7 @@ export function DataTableRowActions<TData>({
        <Button
          variant="ghost"
          size="icon"
-          className="data-[state=open]:bg-muted size-8"
+          className="size-8 data-[state=open]:bg-muted"
        >
          <MoreHorizontal />
          <span className="sr-only">Open menu</span>
--- a/apps/v4/app/(app)/examples/tasks/components/user-nav.tsx
+++ b/apps/v4/app/(app)/examples/tasks/components/user-nav.tsx
@@ -30,7 +30,7 @@ export function UserNav() {
        <DropdownMenuLabel className="font-normal">
          <div className="flex flex-col space-y-1">
            <p className="text-sm leading-none font-medium">shadcn</p>
-            <p className="text-muted-foreground text-xs leading-none">
+            <p className="text-xs leading-none text-muted-foreground">
              m@example.com
            </p>
          </div>
--- a/apps/v4/app/(app)/layout.tsx
+++ b/apps/v4/app/(app)/layout.tsx
@@ -5,7 +5,7 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
  return (
    <div
      data-slot="layout"
-      className="bg-background relative z-10 flex min-h-svh flex-col"
+      className="relative z-10 flex min-h-svh flex-col bg-background"
    >
      <SiteHeader />
      <main className="flex flex-1 flex-col">{children}</main>
--- a/apps/v4/app/(app)/themes/page.tsx
+++ b/apps/v4/app/(app)/themes/page.tsx
@@ -12,8 +12,8 @@ export default function ThemesPage() {
          <ThemeCustomizer />
        </div>
      </div>
-      <div className="container-wrapper section-soft flex flex-1 flex-col pb-6">
-        <div className="theme-container container flex flex-1 flex-col">
+      <div className="container-wrapper flex flex-1 flex-col section-soft pb-6">
+        <div className="container flex flex-1 flex-col theme-container">
          <CardsDemo />
        </div>
      </div>
--- a/apps/v4/app/(create)/components/accent-picker.tsx
+++ b/apps/v4/app/(create)/components/accent-picker.tsx
@@ -30,12 +30,12 @@ export function MenuAccentPicker({
      <Picker>
        <PickerTrigger>
          <div className="flex flex-col justify-start text-left">
-            <div className="text-muted-foreground text-xs">Menu Accent</div>
-            <div className="text-foreground text-sm font-medium">
+            <div className="text-xs text-muted-foreground">Menu Accent</div>
+            <div className="text-sm font-medium text-foreground">
              {currentAccent?.label}
            </div>
          </div>
-          <div className="text-foreground pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base select-none">
+          <div className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base text-foreground select-none">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="128"
@@ -51,7 +51,7 @@ export function MenuAccentPicker({
                strokeLinecap="round"
                strokeLinejoin="round"
                data-accent={currentAccent?.value}
-                className="data-[accent=bold]:fill-foreground fill-muted-foreground/30"
+                className="fill-muted-foreground/30 data-[accent=bold]:fill-foreground"
              ></path>
              <path
                d="M22 20C22 21.1046 21.1046 22 20 22C18.8954 22 18 21.1046 18 20C18 18.8954 20 17 20 17C20 17 22 18.8954 22 20Z"
@@ -60,7 +60,7 @@ export function MenuAccentPicker({
                strokeLinecap="round"
                strokeLinejoin="round"
                data-accent={currentAccent?.value}
-                className="data-[accent=bold]:fill-foreground fill-muted-foreground/30"
+                className="fill-muted-foreground/30 data-[accent=bold]:fill-foreground"
              ></path>
            </svg>
          </div>
--- a/apps/v4/app/(create)/components/base-color-picker.tsx
+++ b/apps/v4/app/(create)/components/base-color-picker.tsx
@@ -39,8 +39,8 @@ export function BaseColorPicker({
      <Picker>
        <PickerTrigger>
          <div className="flex flex-col justify-start text-left">
-            <div className="text-muted-foreground text-xs">Base Color</div>
-            <div className="text-foreground text-sm font-medium">
+            <div className="text-xs text-muted-foreground">Base Color</div>
+            <div className="text-sm font-medium text-foreground">
              {currentBaseColor?.title}
            </div>
          </div>
@@ -107,7 +107,7 @@ export function BaseColorPicker({
                  <div>
                    Switch to {resolvedTheme === "dark" ? "Light" : "Dark"} Mode
                  </div>
-                  <div className="text-muted-foreground text-xs pointer-coarse:text-sm">
+                  <div className="text-xs text-muted-foreground pointer-coarse:text-sm">
                    Base colors are easier to see in dark mode.
                  </div>
                </div>
--- a/apps/v4/app/(create)/components/base-picker.tsx
+++ b/apps/v4/app/(create)/components/base-picker.tsx
@@ -43,14 +43,14 @@ export function BasePicker({
    <Picker>
      <PickerTrigger>
        <div className="flex flex-col justify-start text-left">
-          <div className="text-muted-foreground text-xs">Component Library</div>
-          <div className="text-foreground text-sm font-medium">
+          <div className="text-xs text-muted-foreground">Component Library</div>
+          <div className="text-sm font-medium text-foreground">
            {currentBase?.title}
          </div>
        </div>
        {currentBase?.meta?.logo && (
          <div
-            className="text-foreground *:[svg]:text-foreground! pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 select-none *:[svg]:size-4"
+            className="pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 text-foreground select-none *:[svg]:size-4 *:[svg]:text-foreground!"
            dangerouslySetInnerHTML={{
              __html: currentBase.meta.logo,
            }}
@@ -71,7 +71,7 @@ export function BasePicker({
              <PickerRadioItem key={base.name} value={base.name}>
                {base.meta?.logo && (
                  <div
-                    className="text-foreground *:[svg]:text-foreground! size-4 shrink-0 [&_svg]:size-4"
+                    className="size-4 shrink-0 text-foreground [&_svg]:size-4 *:[svg]:text-foreground!"
                    dangerouslySetInnerHTML={{
                      __html: base.meta.logo,
                    }}
--- a/apps/v4/app/(create)/components/font-picker.tsx
+++ b/apps/v4/app/(create)/components/font-picker.tsx
@@ -43,13 +43,13 @@ export function FontPicker({
      <Picker>
        <PickerTrigger>
          <div className="flex flex-col justify-start text-left">
-            <div className="text-muted-foreground text-xs">Font</div>
-            <div className="text-foreground text-sm font-medium">
+            <div className="text-xs text-muted-foreground">Font</div>
+            <div className="text-sm font-medium text-foreground">
              {currentFont?.name}
            </div>
          </div>
          <div
-            className="text-foreground pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base select-none"
+            className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base text-foreground select-none"
            style={{ fontFamily: currentFont?.font.style.fontFamily }}
          >
            Aa
@@ -73,7 +73,7 @@ export function FontPicker({
                  <PickerRadioItem value={font.value}>
                    <Item size="xs">
                      <ItemContent className="gap-1">
-                        <ItemTitle className="text-muted-foreground text-xs font-medium">
+                        <ItemTitle className="text-xs font-medium text-muted-foreground">
                          {font.name}
                        </ItemTitle>
                        <ItemDescription
--- a/apps/v4/app/(create)/components/icon-library-picker.tsx
+++ b/apps/v4/app/(create)/components/icon-library-picker.tsx
@@ -248,12 +248,12 @@ export function IconLibraryPicker({
      <Picker>
        <PickerTrigger>
          <div className="flex flex-col justify-start text-left">
-            <div className="text-muted-foreground text-xs">Icon Library</div>
-            <div className="text-foreground text-sm font-medium">
+            <div className="text-xs text-muted-foreground">Icon Library</div>
+            <div className="text-sm font-medium text-foreground">
              {currentIconLibrary?.title}
            </div>
          </div>
-          <div className="text-foreground *:[svg]:text-foreground! pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base select-none">
+          <div className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base text-foreground select-none *:[svg]:text-foreground!">
            {logos[currentIconLibrary?.name as keyof typeof logos]}
          </div>
        </PickerTrigger>
@@ -306,7 +306,7 @@ function IconLibraryPickerItem({
    >
      <Item size="xs">
        <ItemContent className="gap-1">
-          <ItemTitle className="text-muted-foreground text-xs font-medium">
+          <ItemTitle className="text-xs font-medium text-muted-foreground">
            {iconLibrary.title}
          </ItemTitle>
          <IconLibraryPreview iconLibrary={iconLibrary.name} />
@@ -345,7 +345,7 @@ const IconLibraryPreview = memo(function IconLibraryPreview({
          {previewIcons.map((iconName) => (
            <div
              key={iconName}
-              className="bg-muted size-6 animate-pulse rounded"
+              className="size-6 animate-pulse rounded bg-muted"
            />
          ))}
        </div>
--- a/apps/v4/app/(create)/components/item-explorer.tsx
+++ b/apps/v4/app/(create)/components/item-explorer.tsx
@@ -51,7 +51,7 @@ export function ItemExplorer({
      className="sticky z-30 hidden h-full overscroll-none bg-transparent xl:flex"
      collapsible="none"
    >
-      <SidebarContent className="no-scrollbar -mx-1 overflow-x-hidden">
+      <SidebarContent className="-mx-1 no-scrollbar overflow-x-hidden">
        {groupedItems.map((group) => (
          <Collapsible
            key={group.type}
@@ -60,26 +60,26 @@ export function ItemExplorer({
          >
            <SidebarGroup className="px-1 py-0">
              <CollapsibleTrigger className="flex w-full items-center gap-1 py-1.5 text-[0.8rem] font-medium [&[data-state=open]>svg]:rotate-90">
-                <ChevronRightIcon className="text-muted-foreground size-3.5 transition-transform" />
+                <ChevronRightIcon className="size-3.5 text-muted-foreground transition-transform" />
                <span>{group.title}</span>
              </CollapsibleTrigger>
              <CollapsibleContent>
                <SidebarGroupContent>
-                  <SidebarMenu className="border-border/50 relative ml-1.5 border-l pl-2">
+                  <SidebarMenu className="relative ml-1.5 border-l border-border/50 pl-2">
                    {group.items.map((item, index) => (
                      <SidebarMenuItem key={item.name} className="relative">
                        <div
                          className={cn(
-                            "border-border/50 absolute top-1/2 -left-2 h-px w-2 border-t",
+                            "absolute top-1/2 -left-2 h-px w-2 border-t border-border/50",
                            index === group.items.length - 1 && "bg-sidebar"
                          )}
                        />
                        {index === group.items.length - 1 && (
-                          <div className="bg-sidebar absolute top-1/2 -bottom-1 -left-2.5 w-1" />
+                          <div className="absolute top-1/2 -bottom-1 -left-2.5 w-1 bg-sidebar" />
                        )}
                        <SidebarMenuButton
                          onClick={() => setParams({ item: item.name })}
-                          className="data-[active=true]:bg-accent data-[active=true]:border-accent 3xl:fixed:w-full 3xl:fixed:max-w-48 relative h-[26px] w-fit cursor-pointer overflow-visible border border-transparent text-[0.8rem] font-normal after:absolute after:inset-x-0 after:-inset-y-1 after:z-0 after:rounded-md"
+                          className="relative h-[26px] w-fit cursor-pointer overflow-visible border border-transparent text-[0.8rem] font-normal after:absolute after:inset-x-0 after:-inset-y-1 after:z-0 after:rounded-md data-[active=true]:border-accent data-[active=true]:bg-accent 3xl:fixed:w-full 3xl:fixed:max-w-48"
                          data-active={item.name === currentItem?.name}
                          isActive={item.name === currentItem?.name}
                        >
--- a/apps/v4/app/(create)/components/menu-picker.tsx
+++ b/apps/v4/app/(create)/components/menu-picker.tsx
@@ -123,12 +123,12 @@ export function MenuColorPicker({
      <Picker>
        <PickerTrigger disabled={mounted && resolvedTheme === "dark"}>
          <div className="flex flex-col justify-start text-left">
-            <div className="text-muted-foreground text-xs">Menu Color</div>
-            <div className="text-foreground text-sm font-medium">
+            <div className="text-xs text-muted-foreground">Menu Color</div>
+            <div className="text-sm font-medium text-foreground">
              {currentMenu?.label}
            </div>
          </div>
-          <div className="text-foreground pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base select-none">
+          <div className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base text-foreground select-none">
            {currentMenu?.icon}
          </div>
        </PickerTrigger>
--- a/apps/v4/app/(create)/components/preset-picker.tsx
+++ b/apps/v4/app/(create)/components/preset-picker.tsx
@@ -80,8 +80,8 @@ export function PresetPicker({
    <Picker>
      <PickerTrigger>
        <div className="flex flex-col justify-start text-left">
-          <div className="text-muted-foreground text-xs">Preset</div>
-          <div className="text-foreground line-clamp-1 text-sm font-medium">
+          <div className="text-xs text-muted-foreground">Preset</div>
+          <div className="line-clamp-1 text-sm font-medium text-foreground">
            {currentPreset?.description ?? "Custom"}
          </div>
        </div>
--- a/apps/v4/app/(create)/components/radius-picker.tsx
+++ b/apps/v4/app/(create)/components/radius-picker.tsx
@@ -31,12 +31,12 @@ export function RadiusPicker({
      <Picker>
        <PickerTrigger>
          <div className="flex flex-col justify-start text-left">
-            <div className="text-muted-foreground text-xs">Radius</div>
-            <div className="text-foreground text-sm font-medium">
+            <div className="text-xs text-muted-foreground">Radius</div>
+            <div className="text-sm font-medium text-foreground">
              {currentRadius?.label}
            </div>
          </div>
-          <div className="text-foreground pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 rotate-90 items-center justify-center text-base select-none">
+          <div className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 rotate-90 items-center justify-center text-base text-foreground select-none">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
@@ -74,7 +74,7 @@ export function RadiusPicker({
                >
                  <div className="flex flex-col justify-start pointer-coarse:gap-1">
                    <div>{defaultRadius.label}</div>
-                    <div className="text-muted-foreground text-xs pointer-coarse:text-sm">
+                    <div className="text-xs text-muted-foreground pointer-coarse:text-sm">
                      Use radius from style
                    </div>
                  </div>
--- a/apps/v4/app/(create)/components/style-picker.tsx
+++ b/apps/v4/app/(create)/components/style-picker.tsx
@@ -33,8 +33,8 @@ export function StylePicker({
      <Picker>
        <PickerTrigger>
          <div className="flex flex-col justify-start text-left">
-            <div className="text-muted-foreground text-xs">Style</div>
-            <div className="text-foreground text-sm font-medium">
+            <div className="text-xs text-muted-foreground">Style</div>
+            <div className="text-sm font-medium text-foreground">
              {currentStyle?.title}
            </div>
          </div>
@@ -72,7 +72,7 @@ export function StylePicker({
                      )}
                      <div className="flex flex-col justify-start pointer-coarse:gap-1">
                        <div>{style.title}</div>
-                        <div className="text-muted-foreground text-xs pointer-coarse:text-sm">
+                        <div className="text-xs text-muted-foreground pointer-coarse:text-sm">
                          {style.description}
                        </div>
                      </div>
--- a/apps/v4/app/(create)/components/template-picker.tsx
+++ b/apps/v4/app/(create)/components/template-picker.tsx
@@ -86,15 +86,15 @@ export function TemplatePicker({
    <Picker>
      <PickerTrigger className="hidden md:flex">
        <div className="flex flex-col justify-start text-left">
-          <div className="text-muted-foreground text-xs">Template</div>
-          <div className="text-foreground text-sm font-medium">
+          <div className="text-xs text-muted-foreground">Template</div>
+          <div className="text-sm font-medium text-foreground">
            {currentTemplate?.title}
            {isMonorepo ? " (Monorepo)" : ""}
          </div>
        </div>
        {currentTemplate?.logo && (
          <div
-            className="text-foreground *:[svg]:text-foreground! pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 select-none *:[svg]:size-4"
+            className="pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 text-foreground select-none *:[svg]:size-4 *:[svg]:text-foreground!"
            dangerouslySetInnerHTML={{
              __html: currentTemplate.logo,
            }}
@@ -125,7 +125,7 @@ export function TemplatePicker({
              <PickerRadioItem key={template.value} value={template.value}>
                {template.logo && (
                  <div
-                    className="text-foreground *:[svg]:text-foreground! size-4 shrink-0 [&_svg]:size-4"
+                    className="size-4 shrink-0 text-foreground [&_svg]:size-4 *:[svg]:text-foreground!"
                    dangerouslySetInnerHTML={{
                      __html: template.logo,
                    }}
--- a/apps/v4/app/(create)/components/theme-picker.tsx
+++ b/apps/v4/app/(create)/components/theme-picker.tsx
@@ -51,8 +51,8 @@ export function ThemePicker({
      <Picker>
        <PickerTrigger>
          <div className="flex flex-col justify-start text-left">
-            <div className="text-muted-foreground text-xs">Theme</div>
-            <div className="text-foreground text-sm font-medium">
+            <div className="text-xs text-muted-foreground">Theme</div>
+            <div className="text-sm font-medium text-foreground">
              {currentTheme?.title}
            </div>
          </div>
@@ -113,7 +113,7 @@ export function ThemePicker({
                        )}
                        <div className="flex flex-col justify-start pointer-coarse:gap-1">
                          <div>{theme.title}</div>
-                          <div className="text-muted-foreground text-xs pointer-coarse:text-sm">
+                          <div className="text-xs text-muted-foreground pointer-coarse:text-sm">
                            Match base color
                          </div>
                        </div>
--- a/apps/v4/app/(create)/components/welcome-dialog.tsx
+++ b/apps/v4/app/(create)/components/welcome-dialog.tsx
@@ -49,11 +49,11 @@ export function WelcomeDialog() {
          <DialogTitle className="text-left text-base">
            Build your own shadcn/ui
          </DialogTitle>
-          <DialogDescription className="text-foreground text-left leading-relaxed">
+          <DialogDescription className="text-left leading-relaxed text-foreground">
            Customize everything from the ground up. Pick your component
            library, font, color scheme, and more.
          </DialogDescription>
-          <DialogDescription className="text-foreground mt-2 text-left leading-relaxed font-medium">
+          <DialogDescription className="mt-2 text-left leading-relaxed font-medium text-foreground">
            Available for Next.js, Vite, TanStack Start, and v0.
          </DialogDescription>
        </DialogHeader>
--- a/apps/v4/app/(examples)/dashboard-03/components/chart-revenue.tsx
+++ b/apps/v4/app/(examples)/dashboard-03/components/chart-revenue.tsx
@@ -101,7 +101,7 @@ export function ChartRevenue() {
        <div className="flex gap-2 leading-none font-medium">
          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
        </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
          Showing total visitors for the last 6 months
        </div>
      </CardFooter>
--- a/apps/v4/app/(examples)/dashboard-03/components/nav-user.tsx
+++ b/apps/v4/app/(examples)/dashboard-03/components/nav-user.tsx
@@ -51,7 +51,7 @@ export function NavUser({
            </Avatar>
            <div className="grid flex-1 text-left text-sm leading-tight">
              <span className="truncate font-medium">{user.name}</span>
-              <span className="text-muted-foreground truncate text-xs">
+              <span className="truncate text-xs text-muted-foreground">
                {user.email}
              </span>
            </div>
--- a/apps/v4/app/(examples)/dashboard-03/components/products-table.tsx
+++ b/apps/v4/app/(examples)/dashboard-03/components/products-table.tsx
@@ -76,7 +76,7 @@ export function ProductsTable({
        <div className="hidden items-center gap-2 **:data-[slot=button]:size-8 **:data-[slot=select-trigger]:h-8 @3xl/page:flex">
          <Select defaultValue="all">
            <SelectTrigger>
-              <span className="text-muted-foreground text-sm">Category:</span>
+              <span className="text-sm text-muted-foreground">Category:</span>
              <SelectValue placeholder="Select a product" />
            </SelectTrigger>
            <SelectContent>
@@ -88,7 +88,7 @@ export function ProductsTable({
          </Select>
          <Select defaultValue="all">
            <SelectTrigger>
-              <span className="text-muted-foreground text-sm">Price:</span>
+              <span className="text-sm text-muted-foreground">Price:</span>
              <SelectValue placeholder="Select a product" />
            </SelectTrigger>
            <SelectContent>
@@ -100,7 +100,7 @@ export function ProductsTable({
          </Select>
          <Select defaultValue="all">
            <SelectTrigger>
-              <span className="text-muted-foreground text-sm">Status:</span>
+              <span className="text-sm text-muted-foreground">Status:</span>
              <SelectValue placeholder="Select a product" />
            </SelectTrigger>
            <SelectContent>
@@ -184,7 +184,7 @@ export function ProductsTable({
        </Table>
      </CardContent>
      <CardFooter className="flex flex-col items-center justify-between border-t pt-6 @3xl/page:flex-row">
-        <div className="text-muted-foreground hidden text-sm @3xl/page:block">
+        <div className="hidden text-sm text-muted-foreground @3xl/page:block">
          Showing 1-10 of 100 products
        </div>
        <Pagination className="mx-0 w-fit">
--- a/apps/v4/app/(examples)/dashboard-03/components/site-header.tsx
+++ b/apps/v4/app/(examples)/dashboard-03/components/site-header.tsx
@@ -38,7 +38,7 @@ export function SiteHeader() {
  return (
    <header
      data-slot="site-header"
-      className="bg-background sticky top-0 z-50 flex w-full items-center border-b"
+      className="sticky top-0 z-50 flex w-full items-center border-b bg-background"
    >
      <div className="flex h-(--header-height) w-full items-center gap-2 px-2 pr-4">
        <Button
--- a/apps/v4/app/(examples)/dashboard-03/settings/page.tsx
+++ b/apps/v4/app/(examples)/dashboard-03/settings/page.tsx
@@ -489,7 +489,7 @@ function FieldDescription({
    <p
      data-slot="field-description"
      className={cn(
-        "text-muted-foreground text-sm @3xl/field-group:col-start-1 @3xl/field-group:row-start-1 @3xl/field-group:translate-y-6",
+        "text-sm text-muted-foreground @3xl/field-group:col-start-1 @3xl/field-group:row-start-1 @3xl/field-group:translate-y-6",
        className
      )}
      {...props}
--- a/apps/v4/app/(examples)/dashboard/components/app-sidebar.tsx
+++ b/apps/v4/app/(examples)/dashboard/components/app-sidebar.tsx
@@ -158,10 +158,10 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
          <SidebarMenuItem>
            <SidebarMenuButton
              asChild
-              className="data-[slot=sidebar-menu-button]:!p-1.5"
+              className="data-[slot=sidebar-menu-button]:p-1.5!"
            >
              <a href="#">
-                <IconInnerShadowTop className="!size-5" />
+                <IconInnerShadowTop className="size-5!" />
                <span className="text-base font-semibold">Acme Inc.</span>
              </a>
            </SidebarMenuButton>
--- a/apps/v4/app/(examples)/dashboard/components/chart-area-interactive.tsx
+++ b/apps/v4/app/(examples)/dashboard/components/chart-area-interactive.tsx
@@ -180,7 +180,7 @@ export function ChartAreaInteractive() {
            value={timeRange}
            onValueChange={setTimeRange}
            variant="outline"
-            className="hidden *:data-[slot=toggle-group-item]:!px-4 @[767px]/card:flex"
+            className="hidden *:data-[slot=toggle-group-item]:px-4! @[767px]/card:flex"
          >
            <ToggleGroupItem value="90d">Last 3 months</ToggleGroupItem>
            <ToggleGroupItem value="30d">Last 30 days</ToggleGroupItem>
--- a/apps/v4/app/(examples)/dashboard/components/data-table.tsx
+++ b/apps/v4/app/(examples)/dashboard/components/data-table.tsx
@@ -128,9 +128,9 @@ function DragHandle({ id }: { id: number }) {
      {...listeners}
      variant="ghost"
      size="icon"
-      className="text-muted-foreground size-7 hover:bg-transparent"
+      className="size-7 text-muted-foreground hover:bg-transparent"
    >
-      <IconGripVertical className="text-muted-foreground size-3" />
+      <IconGripVertical className="size-3 text-muted-foreground" />
      <span className="sr-only">Drag to reorder</span>
    </Button>
  )
@@ -181,7 +181,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
    header: "Section Type",
    cell: ({ row }) => (
      <div className="w-32">
-        <Badge variant="outline" className="text-muted-foreground px-1.5">
+        <Badge variant="outline" className="px-1.5 text-muted-foreground">
          {row.original.type}
        </Badge>
      </div>
@@ -191,7 +191,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
    accessorKey: "status",
    header: "Status",
    cell: ({ row }) => (
-      <Badge variant="outline" className="text-muted-foreground px-1.5">
+      <Badge variant="outline" className="px-1.5 text-muted-foreground">
        {row.original.status === "Done" ? (
          <IconCircleCheckFilled className="fill-green-500 dark:fill-green-400" />
        ) : (
@@ -219,7 +219,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
          Target
        </Label>
        <Input
-          className="hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent"
+          className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30"
          defaultValue={row.original.target}
          id={`${row.original.id}-target`}
        />
@@ -244,7 +244,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
          Limit
        </Label>
        <Input
-          className="hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent"
+          className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30"
          defaultValue={row.original.limit}
          id={`${row.original.id}-limit`}
        />
@@ -292,7 +292,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
        <DropdownMenuTrigger asChild>
          <Button
            variant="ghost"
-            className="data-[state=open]:bg-muted text-muted-foreground flex size-8"
+            className="flex size-8 text-muted-foreground data-[state=open]:bg-muted"
            size="icon"
          >
            <IconDotsVertical />
@@ -425,7 +425,7 @@ export function DataTable({
            <SelectItem value="focus-documents">Focus Documents</SelectItem>
          </SelectContent>
        </Select>
-        <TabsList className="**:data-[slot=badge]:bg-muted-foreground/30 hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:px-1 @4xl/main:flex">
+        <TabsList className="hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:bg-muted-foreground/30 **:data-[slot=badge]:px-1 @4xl/main:flex">
          <TabsTrigger value="outline">Outline</TabsTrigger>
          <TabsTrigger value="past-performance">
            Past Performance <Badge variant="secondary">3</Badge>
@@ -488,7 +488,7 @@ export function DataTable({
            id={sortableId}
          >
            <Table>
-              <TableHeader className="bg-muted sticky top-0 z-10">
+              <TableHeader className="sticky top-0 z-10 bg-muted">
                {table.getHeaderGroups().map((headerGroup) => (
                  <TableRow key={headerGroup.id}>
                    {headerGroup.headers.map((header) => {
@@ -531,7 +531,7 @@ export function DataTable({
          </DndContext>
        </div>
        <div className="flex items-center justify-between px-4">
-          <div className="text-muted-foreground hidden flex-1 text-sm lg:flex">
+          <div className="hidden flex-1 text-sm text-muted-foreground lg:flex">
            {table.getFilteredSelectedRowModel().rows.length} of{" "}
            {table.getFilteredRowModel().rows.length} row(s) selected.
          </div>
@@ -653,7 +653,7 @@ function TableCellViewer({ item }: { item: z.infer<typeof schema> }) {
  return (
    <Drawer direction={isMobile ? "bottom" : "right"}>
      <DrawerTrigger asChild>
-        <Button variant="link" className="text-foreground w-fit px-0 text-left">
+        <Button variant="link" className="w-fit px-0 text-left text-foreground">
          {item.header}
        </Button>
      </DrawerTrigger>
--- a/apps/v4/app/(examples)/dashboard/components/nav-documents.tsx
+++ b/apps/v4/app/(examples)/dashboard/components/nav-documents.tsx
@@ -52,7 +52,7 @@ export function NavDocuments({
              <DropdownMenuTrigger asChild>
                <SidebarMenuAction
                  showOnHover
-                  className="data-[state=open]:bg-accent rounded-sm"
+                  className="rounded-sm data-[state=open]:bg-accent"
                >
                  <IconDots />
                  <span className="sr-only">More</span>
--- a/apps/v4/app/(examples)/dashboard/components/nav-main.tsx
+++ b/apps/v4/app/(examples)/dashboard/components/nav-main.tsx
@@ -27,7 +27,7 @@ export function NavMain({
          <SidebarMenuItem className="flex items-center gap-2">
            <SidebarMenuButton
              tooltip="Quick Create"
-              className="bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground min-w-8 duration-200 ease-linear"
+              className="min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground"
            >
              <IconCirclePlusFilled />
              <span>Quick Create</span>
--- a/apps/v4/app/(examples)/dashboard/components/nav-user.tsx
+++ b/apps/v4/app/(examples)/dashboard/components/nav-user.tsx
@@ -55,7 +55,7 @@ export function NavUser({
              </Avatar>
              <div className="grid flex-1 text-left text-sm leading-tight">
                <span className="truncate font-medium">{user.name}</span>
-                <span className="text-muted-foreground truncate text-xs">
+                <span className="truncate text-xs text-muted-foreground">
                  {user.email}
                </span>
              </div>
@@ -76,7 +76,7 @@ export function NavUser({
                </Avatar>
                <div className="grid flex-1 text-left text-sm leading-tight">
                  <span className="truncate font-medium">{user.name}</span>
-                  <span className="text-muted-foreground truncate text-xs">
+                  <span className="truncate text-xs text-muted-foreground">
                    {user.email}
                  </span>
                </div>
--- a/apps/v4/app/(examples)/dashboard/components/section-cards.tsx
+++ b/apps/v4/app/(examples)/dashboard/components/section-cards.tsx
@@ -12,7 +12,7 @@ import {

 export function SectionCards() {
  return (
-    <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
+    <div className="grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4 dark:*:data-[slot=card]:bg-card">
      <Card className="@container/card">
        <CardHeader>
          <CardDescription>Total Revenue</CardDescription>
--- a/apps/v4/app/(examples)/dashboard/components/theme-selector.tsx
+++ b/apps/v4/app/(examples)/dashboard/components/theme-selector.tsx
@@ -64,10 +64,10 @@ export function ThemeSelector() {
          size="sm"
          className="justify-start *:data-[slot=select-value]:w-12"
        >
-          <span className="text-muted-foreground hidden sm:block">
+          <span className="hidden text-muted-foreground sm:block">
            Select a theme:
          </span>
-          <span className="text-muted-foreground block sm:hidden">Theme</span>
+          <span className="block text-muted-foreground sm:hidden">Theme</span>
          <SelectValue placeholder="Select a theme" />
        </SelectTrigger>
        <SelectContent align="end">
--- a/apps/v4/app/(internal)/sink/(pages)/forms/appearance-settings.tsx
+++ b/apps/v4/app/(internal)/sink/(pages)/forms/appearance-settings.tsx
@@ -95,7 +95,7 @@ export function AppearanceSettings() {
                />
                <Field
                  orientation="horizontal"
-                  className="@min-[28rem]/field-group:border-t-input @min-[28rem]/field-group:border-t"
+                  className="@min-[28rem]/field-group:border-t @min-[28rem]/field-group:border-t-input"
                >
                  <FieldTitle>{mode.name}</FieldTitle>
                  <RadioGroupItem id={mode.value} value={mode.value} />
--- a/apps/v4/app/(internal)/sink/(pages)/forms/notion-prompt-form.tsx
+++ b/apps/v4/app/(internal)/sink/(pages)/forms/notion-prompt-form.tsx
@@ -202,7 +202,7 @@ export function NotionPromptForm() {
        <FieldLabel htmlFor="notion-prompt" className="sr-only">
          Prompt
        </FieldLabel>
-        <InputGroup className="bg-background dark:bg-background shadow-none">
+        <InputGroup className="bg-background shadow-none dark:bg-background">
          <InputGroupTextarea
            id="notion-prompt"
            placeholder="Ask, search, or make anything..."
@@ -255,7 +255,7 @@ export function NotionPromptForm() {
                </Command>
              </PopoverContent>
            </Popover>
-            <div className="no-scrollbar -m-1.5 flex gap-1 overflow-y-auto p-1.5">
+            <div className="-m-1.5 no-scrollbar flex gap-1 overflow-y-auto p-1.5">
              {mentions.map((mention) => {
                const item = SAMPLE_DATA.mentionable.find(
                  (item) => item.title === mention
@@ -270,7 +270,7 @@ export function NotionPromptForm() {
                    key={mention}
                    size="sm"
                    variant="secondary"
-                    className="rounded-full !pl-2"
+                    className="rounded-full pl-2!"
                    onClick={() => {
                      setMentions((prev) => prev.filter((m) => m !== mention))
                    }}
@@ -319,7 +319,7 @@ export function NotionPromptForm() {
                className="[--radius:1.2rem]"
              >
                <DropdownMenuGroup className="w-72">
-                  <DropdownMenuLabel className="text-muted-foreground text-xs">
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">
                    Get answers about your workspace
                  </DropdownMenuLabel>
                  {SAMPLE_DATA.models.map((model) => (
@@ -442,7 +442,7 @@ export function NotionPromptForm() {
                  <DropdownMenuItem>
                    <IconPlus /> Connect Apps
                  </DropdownMenuItem>
-                  <DropdownMenuLabel className="text-muted-foreground text-xs">
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">
                    We&apos;ll only search in the sources selected here.
                  </DropdownMenuLabel>
                </DropdownMenuGroup>
--- a/apps/v4/app/(internal)/sink/components/app-sidebar.tsx
+++ b/apps/v4/app/(internal)/sink/components/app-sidebar.tsx
@@ -180,7 +180,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
              <Label htmlFor="search" className="sr-only">
                Search
              </Label>
-              <InputGroup className="bg-background h-8 shadow-none">
+              <InputGroup className="h-8 bg-background shadow-none">
                <InputGroupInput
                  id="search"
                  placeholder="Search the docs..."
--- a/apps/v4/app/(internal)/sink/components/aspect-ratio-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/aspect-ratio-demo.tsx
@@ -5,7 +5,7 @@ import { AspectRatio } from "@/registry/new-york-v4/ui/aspect-ratio"
 export function AspectRatioDemo() {
  return (
    <div className="grid w-full max-w-sm items-start gap-4">
-      <AspectRatio ratio={16 / 9} className="bg-muted rounded-lg">
+      <AspectRatio ratio={16 / 9} className="rounded-lg bg-muted">
        <Image
          src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
          alt="Photo by Drew Beamer"
@@ -13,7 +13,7 @@ export function AspectRatioDemo() {
          className="h-full w-full rounded-lg object-cover dark:brightness-[0.2] dark:grayscale"
        />
      </AspectRatio>
-      <AspectRatio ratio={1 / 1} className="bg-muted rounded-lg">
+      <AspectRatio ratio={1 / 1} className="rounded-lg bg-muted">
        <Image
          src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
          alt="Photo by Drew Beamer"
--- a/apps/v4/app/(internal)/sink/components/button-group-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/button-group-demo.tsx
@@ -144,7 +144,7 @@ export function ButtonGroupDemo() {
            <Button variant="outline">Follow</Button>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
-                <Button variant="outline" className="!pl-2">
+                <Button variant="outline" className="pl-2!">
                  <ChevronDownIcon />
                </Button>
              </DropdownMenuTrigger>
@@ -377,7 +377,7 @@ export function ButtonGroupDemo() {
          <Button
            variant="outline"
            asChild
-            className="text-muted-foreground pointer-events-none px-2"
+            className="pointer-events-none px-2 text-muted-foreground"
          >
            <span>1.2K</span>
          </Button>
--- a/apps/v4/app/(internal)/sink/components/calendar-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/calendar-demo.tsx
@@ -14,7 +14,7 @@ import { Label } from "@/registry/new-york-v4/ui/label"

 export function CalendarDemo() {
  return (
-    <div className="bg-muted flex flex-1 flex-col flex-wrap justify-center gap-8 p-10 lg:flex-row">
+    <div className="flex flex-1 flex-col flex-wrap justify-center gap-8 bg-muted p-10 lg:flex-row">
      <CalendarSingle />
      <CalendarMultiple />
      <CalendarRange />
@@ -150,7 +150,7 @@ function CalendarWithTime() {
          <div className="flex w-full flex-col gap-2">
            <Label htmlFor="time-from">Start Time</Label>
            <div className="relative flex w-full items-center gap-2">
-              <Clock2Icon className="text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none" />
+              <Clock2Icon className="pointer-events-none absolute left-2.5 size-4 text-muted-foreground select-none" />
              <Input
                id="time-from"
                type="time"
@@ -163,7 +163,7 @@ function CalendarWithTime() {
          <div className="flex w-full flex-col gap-2">
            <Label htmlFor="time-to">End Time</Label>
            <div className="relative flex w-full items-center gap-2">
-              <Clock2Icon className="text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none" />
+              <Clock2Icon className="pointer-events-none absolute left-2.5 size-4 text-muted-foreground select-none" />
              <Input
                id="time-to"
                type="time"
--- a/apps/v4/app/(internal)/sink/components/card-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/card-demo.tsx
@@ -92,7 +92,7 @@ export function CardDemo() {
          </ol>
        </CardContent>
        <CardFooter>
-          <div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
+          <div className="flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale">
            <Avatar>
              <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
              <AvatarFallback>CN</AvatarFallback>
--- a/apps/v4/app/(internal)/sink/components/chart-area-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/chart-area-demo.tsx
@@ -83,7 +83,7 @@ export function ChartAreaDemo() {
            <div className="flex items-center gap-2 leading-none font-medium">
              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
            </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
              January - June 2024
            </div>
          </div>
--- a/apps/v4/app/(internal)/sink/components/chart-bar-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/chart-bar-demo.tsx
@@ -71,7 +71,7 @@ export function ChartBarDemo() {
        <div className="flex gap-2 leading-none font-medium">
          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
        </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
          Showing total visitors for the last 6 months
        </div>
      </CardFooter>
--- a/apps/v4/app/(internal)/sink/components/chart-bar-mixed.tsx
+++ b/apps/v4/app/(internal)/sink/components/chart-bar-mixed.tsx
@@ -94,7 +94,7 @@ export function ChartBarMixed() {
        <div className="flex gap-2 leading-none font-medium">
          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
        </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
          Showing total visitors for the last 6 months
        </div>
      </CardFooter>
--- a/apps/v4/app/(internal)/sink/components/chart-line-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/chart-line-demo.tsx
@@ -89,7 +89,7 @@ export function ChartLineDemo() {
            <div className="flex items-center gap-2 leading-none font-medium">
              Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
            </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
              Showing total visitors for the last 6 months
            </div>
          </div>
--- a/apps/v4/app/(internal)/sink/components/checkbox-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/checkbox-demo.tsx
@@ -14,7 +14,7 @@ export function CheckboxDemo() {
        <Checkbox id="terms-2" defaultChecked />
        <div className="grid gap-2">
          <Label htmlFor="terms-2">Accept terms and conditions</Label>
-          <p className="text-muted-foreground text-sm">
+          <p className="text-sm text-muted-foreground">
            By clicking this checkbox, you agree to the terms and conditions.
          </p>
        </div>
@@ -23,7 +23,7 @@ export function CheckboxDemo() {
        <Checkbox id="toggle" disabled />
        <Label htmlFor="toggle">Enable notifications</Label>
      </div>
-      <Label className="hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950">
+      <Label className="flex items-start gap-3 rounded-lg border p-3 hover:bg-accent/50 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950">
        <Checkbox
          id="toggle-2"
          defaultChecked
@@ -33,7 +33,7 @@ export function CheckboxDemo() {
          <p className="text-sm leading-none font-medium">
            Enable notifications
          </p>
-          <p className="text-muted-foreground text-sm">
+          <p className="text-sm text-muted-foreground">
            You can enable or disable notifications at any time.
          </p>
        </div>
--- a/apps/v4/app/(internal)/sink/components/command-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/command-demo.tsx
@@ -38,9 +38,9 @@ export function CommandDemo() {

  return (
    <>
-      <p className="text-muted-foreground text-sm">
+      <p className="text-sm text-muted-foreground">
        Press{" "}
-        <kbd className="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none">
+        <kbd className="pointer-events-none inline-flex h-5 items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100 select-none">
          <span className="text-xs">⌘</span>J
        </kbd>
      </p>
--- a/apps/v4/app/(internal)/sink/components/date-picker-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/date-picker-demo.tsx
@@ -119,7 +119,7 @@ function DataPickerWithDropdowns() {
            )}
          >
            {date ? format(date, "PPP") : <span>Pick a date</span>}
-            <CalendarIcon className="text-muted-foreground ml-auto" />
+            <CalendarIcon className="ml-auto text-muted-foreground" />
          </Button>
        </DrawerTrigger>
        <DrawerContent>
@@ -153,7 +153,7 @@ function DataPickerWithDropdowns() {
          )}
        >
          {date ? format(date, "PPP") : <span>Pick a date</span>}
-          <CalendarIcon className="text-muted-foreground ml-auto" />
+          <CalendarIcon className="ml-auto text-muted-foreground" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0" align="start">
--- a/apps/v4/app/(internal)/sink/components/drawer-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/drawer-demo.tsx
@@ -102,7 +102,7 @@ function DrawerBottom() {
                <div className="text-7xl font-bold tracking-tighter">
                  {goal}
                </div>
-                <div className="text-muted-foreground text-[0.70rem] uppercase">
+                <div className="text-[0.70rem] text-muted-foreground uppercase">
                  Calories/day
                </div>
              </div>
--- a/apps/v4/app/(internal)/sink/components/dropdown-menu-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/dropdown-menu-demo.tsx
@@ -222,7 +222,7 @@ function DropdownMenuWithAvatar() {
          </Avatar>
          <div className="grid flex-1 text-left text-sm leading-tight">
            <span className="truncate font-semibold">shadcn</span>
-            <span className="text-muted-foreground truncate text-xs">
+            <span className="truncate text-xs text-muted-foreground">
              shadcn@example.com
            </span>
          </div>
@@ -232,7 +232,7 @@ function DropdownMenuWithAvatar() {
            hugeicons="ChevronUpDownIcon"
            phosphor="CaretUpDownIcon"
            remixicon="RiExpandUpDownLine"
-            className="text-muted-foreground ml-auto"
+            className="ml-auto text-muted-foreground"
          />
        </Button>
      </DropdownMenuTrigger>
@@ -248,7 +248,7 @@ function DropdownMenuWithAvatar() {
            </Avatar>
            <div className="grid flex-1 text-left text-sm leading-tight">
              <span className="truncate font-semibold">shadcn</span>
-              <span className="text-muted-foreground truncate text-xs">
+              <span className="truncate text-xs text-muted-foreground">
                shadcn@example.com
              </span>
            </div>
@@ -348,7 +348,7 @@ function DropdownMenuAvatarOnly() {
            </Avatar>
            <div className="grid flex-1 text-left text-sm leading-tight">
              <span className="truncate font-semibold">maxleiter</span>
-              <span className="text-muted-foreground truncate text-xs">
+              <span className="truncate text-xs text-muted-foreground">
                maxleiter@example.com
              </span>
            </div>
--- a/apps/v4/app/(internal)/sink/components/empty-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/empty-demo.tsx
@@ -59,7 +59,7 @@ export function EmptyDemo() {
          </Button>
        </EmptyContent>
      </Empty>
-      <Empty className="bg-muted min-h-[80svh]">
+      <Empty className="min-h-[80svh] bg-muted">
        <EmptyHeader>
          <EmptyTitle>No results found</EmptyTitle>
          <EmptyDescription>
@@ -114,7 +114,7 @@ export function EmptyDemo() {
          </Button>
        </EmptyContent>
      </Empty>
-      <div className="bg-muted flex min-h-[800px] items-center justify-center rounded-lg p-20">
+      <div className="flex min-h-[800px] items-center justify-center rounded-lg bg-muted p-20">
        <Card className="max-w-sm">
          <CardContent>
            <Empty className="p-4">
@@ -143,7 +143,7 @@ export function EmptyDemo() {
          </CardContent>
        </Card>
      </div>
-      <div className="bg-muted flex min-h-[800px] items-center justify-center rounded-lg p-20">
+      <div className="flex min-h-[800px] items-center justify-center rounded-lg bg-muted p-20">
        <Card className="max-w-sm">
          <CardContent>
            <Empty className="p-4">
--- a/apps/v4/app/(internal)/sink/components/field-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/field-demo.tsx
@@ -91,7 +91,7 @@ import {
 export function FieldDemo() {
  return (
    <div className="@container w-full">
-      <div className="bg-muted grid gap-4 p-4 @3xl:grid-cols-2 @5xl:grid-cols-3 @[120rem]:grid-cols-4 @[140rem]:grid-cols-5">
+      <div className="grid gap-4 bg-muted p-4 @3xl:grid-cols-2 @5xl:grid-cols-3 @[120rem]:grid-cols-4 @[140rem]:grid-cols-5">
        <div className="flex flex-col gap-6">
          <BasicFields />
          <PrivacySettings />
@@ -599,8 +599,8 @@ function PrivacySettings() {
                  id="everyone-f8k"
                  className="sr-only"
                />
-                <IconCircle className="stroke-input size-5 stroke-1 group-has-data-[state=checked]/field:hidden" />
-                <IconCircleCheckFilled className="fill-primary hidden size-5 group-has-data-[state=checked]/field:block" />
+                <IconCircle className="size-5 stroke-input stroke-1 group-has-data-[state=checked]/field:hidden" />
+                <IconCircleCheckFilled className="hidden size-5 fill-primary group-has-data-[state=checked]/field:block" />
              </Field>
            </FieldLabel>
            <FieldLabel htmlFor="followers-s7m">
@@ -616,8 +616,8 @@ function PrivacySettings() {
                  id="followers-s7m"
                  className="sr-only"
                />
-                <IconCircle className="stroke-input size-5 stroke-1 group-has-data-[state=checked]/field:hidden" />
-                <IconCircleCheckFilled className="fill-primary hidden size-5 group-has-data-[state=checked]/field:block" />
+                <IconCircle className="size-5 stroke-input stroke-1 group-has-data-[state=checked]/field:hidden" />
+                <IconCircleCheckFilled className="hidden size-5 fill-primary group-has-data-[state=checked]/field:block" />
              </Field>
            </FieldLabel>
            <FieldLabel htmlFor="custom-q3r">
@@ -633,8 +633,8 @@ function PrivacySettings() {
                  id="custom-q3r"
                  className="sr-only"
                />
-                <IconCircle className="stroke-input size-5 stroke-1 group-has-data-[state=checked]/field:hidden" />
-                <IconCircleCheckFilled className="fill-primary hidden size-5 group-has-data-[state=checked]/field:block" />
+                <IconCircle className="size-5 stroke-input stroke-1 group-has-data-[state=checked]/field:hidden" />
+                <IconCircleCheckFilled className="hidden size-5 fill-primary group-has-data-[state=checked]/field:block" />
              </Field>
            </FieldLabel>
          </RadioGroup>
@@ -699,7 +699,7 @@ function PrivacySettings() {
          <RadioGroup>
            <FieldLabel htmlFor="everyone-3-k4p">
              <Field orientation="horizontal">
-                <div className="bg-muted group-has-data-[state=checked]/field:bg-primary group-has-data-[state=checked]/field:text-primary-foreground group-has-data-[state=checked]/field:border-primary flex size-8 shrink-0 items-center justify-center rounded-full border transition-all duration-100">
+                <div className="flex size-8 shrink-0 items-center justify-center rounded-full border bg-muted transition-all duration-100 group-has-data-[state=checked]/field:border-primary group-has-data-[state=checked]/field:bg-primary group-has-data-[state=checked]/field:text-primary-foreground">
                  <IconWorld className="size-4" />
                </div>
                <FieldContent>
@@ -713,13 +713,13 @@ function PrivacySettings() {
                  id="everyone-3-k4p"
                  className="sr-only"
                />
-                <IconCircle className="stroke-input size-5 stroke-1 group-has-data-[state=checked]/field:hidden" />
-                <IconCircleCheckFilled className="fill-primary hidden size-5 group-has-data-[state=checked]/field:block" />
+                <IconCircle className="size-5 stroke-input stroke-1 group-has-data-[state=checked]/field:hidden" />
+                <IconCircleCheckFilled className="hidden size-5 fill-primary group-has-data-[state=checked]/field:block" />
              </Field>
            </FieldLabel>
            <FieldLabel htmlFor="followers-3-m7j">
              <Field orientation="horizontal">
-                <div className="bg-muted group-has-data-[state=checked]/field:bg-primary group-has-data-[state=checked]/field:text-primary-foreground group-has-data-[state=checked]/field:border-primary flex size-8 shrink-0 items-center justify-center rounded-full border transition-all duration-100">
+                <div className="flex size-8 shrink-0 items-center justify-center rounded-full border bg-muted transition-all duration-100 group-has-data-[state=checked]/field:border-primary group-has-data-[state=checked]/field:bg-primary group-has-data-[state=checked]/field:text-primary-foreground">
                  <IconUsers className="size-4" />
                </div>
                <FieldContent>
@@ -733,13 +733,13 @@ function PrivacySettings() {
                  id="followers-3-m7j"
                  className="sr-only"
                />
-                <IconCircle className="stroke-input size-5 stroke-1 group-has-data-[state=checked]/field:hidden" />
-                <IconCircleCheckFilled className="fill-primary hidden size-5 group-has-data-[state=checked]/field:block" />
+                <IconCircle className="size-5 stroke-input stroke-1 group-has-data-[state=checked]/field:hidden" />
+                <IconCircleCheckFilled className="hidden size-5 fill-primary group-has-data-[state=checked]/field:block" />
              </Field>
            </FieldLabel>
            <FieldLabel htmlFor="custom-3-r9w">
              <Field orientation="horizontal">
-                <div className="bg-muted group-has-data-[state=checked]/field:bg-primary group-has-data-[state=checked]/field:text-primary-foreground group-has-data-[state=checked]/field:border-primary flex size-8 shrink-0 items-center justify-center rounded-full border transition-all duration-100">
+                <div className="flex size-8 shrink-0 items-center justify-center rounded-full border bg-muted transition-all duration-100 group-has-data-[state=checked]/field:border-primary group-has-data-[state=checked]/field:bg-primary group-has-data-[state=checked]/field:text-primary-foreground">
                  <IconPlus className="size-4" />
                </div>
                <FieldContent>
@@ -753,8 +753,8 @@ function PrivacySettings() {
                  id="custom-3-r9w"
                  className="sr-only"
                />
-                <IconCircle className="stroke-input size-5 stroke-1 group-has-data-[state=checked]/field:hidden" />
-                <IconCircleCheckFilled className="fill-primary hidden size-5 group-has-data-[state=checked]/field:block" />
+                <IconCircle className="size-5 stroke-input stroke-1 group-has-data-[state=checked]/field:hidden" />
+                <IconCircleCheckFilled className="hidden size-5 fill-primary group-has-data-[state=checked]/field:block" />
              </Field>
            </FieldLabel>
          </RadioGroup>
@@ -1034,7 +1034,7 @@ function ShippingMethods() {
        </CardContent>
      </Card>
      <form>
-        <FieldGroup className="bg-background gap-6 rounded-lg border p-6">
+        <FieldGroup className="gap-6 rounded-lg border bg-background p-6">
          <FieldSet>
            <FieldLegend>GPU Type</FieldLegend>
            <FieldDescription>
--- a/apps/v4/app/(internal)/sink/components/hover-card-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/hover-card-demo.tsx
@@ -30,8 +30,8 @@ export function HoverCardDemo() {
              The React Framework – created and maintained by @vercel.
            </p>
            <div className="mt-1 flex items-center gap-2">
-              <CalendarIcon className="text-muted-foreground size-4" />{" "}
-              <span className="text-muted-foreground text-xs">
+              <CalendarIcon className="size-4 text-muted-foreground" />{" "}
+              <span className="text-xs text-muted-foreground">
                Joined December 2021
              </span>
            </div>
--- a/apps/v4/app/(internal)/sink/components/input-group-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/input-group-demo.tsx
@@ -131,7 +131,7 @@ export function InputGroupDemo() {
          <InputGroup>
            <InputGroupInput id="input-icon-right-08" />
            <InputGroupAddon align="inline-end">
-              <IconLoader2 className="text-muted-foreground animate-spin" />
+              <IconLoader2 className="animate-spin text-muted-foreground" />
            </InputGroupAddon>
          </InputGroup>
        </Field>
@@ -353,7 +353,7 @@ export function InputGroupDemo() {
            <InputGroupInput id="input-addon-20" />
            <InputGroupAddon align="block-start">
              <InputGroupText>First Name</InputGroupText>
-              <IconInfoCircle className="text-muted-foreground ml-auto" />
+              <IconInfoCircle className="ml-auto text-muted-foreground" />
            </InputGroupAddon>
          </InputGroup>
        </Field>
@@ -363,7 +363,7 @@ export function InputGroupDemo() {
            <InputGroupInput id="input-addon-21" />
            <InputGroupAddon align="block-end">
              <InputGroupText>20/240 characters</InputGroupText>
-              <IconInfoCircle className="text-muted-foreground ml-auto" />
+              <IconInfoCircle className="ml-auto text-muted-foreground" />
            </InputGroupAddon>
          </InputGroup>
        </Field>
--- a/apps/v4/app/(internal)/sink/components/item-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/item-demo.tsx
@@ -264,7 +264,7 @@ export function ItemDemo() {
          </ItemGroup>
          <Item variant="outline">
            <ItemMedia>
-              <div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
+              <div className="flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale">
                <Avatar>
                  <AvatarImage
                    src="https://github.com/shadcn.png"
--- a/apps/v4/app/(internal)/sink/components/native-select-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/native-select-demo.tsx
@@ -17,7 +17,7 @@ export function NativeSelectDemo() {
  return (
    <div className="flex flex-col gap-8">
      <div className="flex flex-col gap-3">
-        <div className="text-muted-foreground text-sm font-medium">
+        <div className="text-sm font-medium text-muted-foreground">
          Basic Select
        </div>
        <div className="flex flex-col gap-4">
@@ -48,7 +48,7 @@ export function NativeSelectDemo() {
        </div>
      </div>
      <div className="flex flex-col gap-3">
-        <div className="text-muted-foreground text-sm font-medium">
+        <div className="text-sm font-medium text-muted-foreground">
          With Groups
        </div>
        <div className="flex flex-col gap-4">
@@ -89,7 +89,7 @@ export function NativeSelectDemo() {
        </div>
      </div>
      <div className="flex flex-col gap-3">
-        <div className="text-muted-foreground text-sm font-medium">
+        <div className="text-sm font-medium text-muted-foreground">
          Disabled State
        </div>
        <div className="flex flex-col gap-4">
@@ -110,7 +110,7 @@ export function NativeSelectDemo() {
        </div>
      </div>
      <div className="flex flex-col gap-3">
-        <div className="text-muted-foreground text-sm font-medium">
+        <div className="text-sm font-medium text-muted-foreground">
          Error State
        </div>
        <div className="flex flex-col gap-4">
--- a/apps/v4/app/(internal)/sink/components/navigation-menu-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/navigation-menu-demo.tsx
@@ -62,13 +62,13 @@ export function NavigationMenuDemo() {
                <li className="row-span-3">
                  <NavigationMenuLink asChild>
                    <a
-                      className="from-muted/50 to-muted flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b p-6 no-underline outline-hidden select-none focus:shadow-md"
+                      className="flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b from-muted/50 to-muted p-6 no-underline outline-hidden select-none focus:shadow-md"
                      href="/"
                    >
                      <div className="mt-4 mb-2 text-lg font-medium">
                        shadcn/ui
                      </div>
-                      <p className="text-muted-foreground text-sm leading-tight">
+                      <p className="text-sm leading-tight text-muted-foreground">
                        Beautifully designed components built with Tailwind CSS.
                      </p>
                    </a>
@@ -217,7 +217,7 @@ function ListItem({
      <NavigationMenuLink asChild>
        <Link href={href}>
          <div className="text-sm leading-none font-medium">{title}</div>
-          <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
+          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
            {children}
          </p>
        </Link>
--- a/apps/v4/app/(internal)/sink/components/radio-group-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/radio-group-demo.tsx
@@ -40,7 +40,7 @@ export function RadioGroupDemo() {
      <RadioGroup defaultValue="starter" className="max-w-sm">
        {plans.map((plan) => (
          <Label
-            className="hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-4 has-[[data-state=checked]]:border-green-600 has-[[data-state=checked]]:bg-green-50 dark:has-[[data-state=checked]]:border-green-900 dark:has-[[data-state=checked]]:bg-green-950"
+            className="flex items-start gap-3 rounded-lg border p-4 hover:bg-accent/50 has-[[data-state=checked]]:border-green-600 has-[[data-state=checked]]:bg-green-50 dark:has-[[data-state=checked]]:border-green-900 dark:has-[[data-state=checked]]:bg-green-950"
            key={plan.id}
          >
            <RadioGroupItem
@@ -50,7 +50,7 @@ export function RadioGroupDemo() {
            />
            <div className="grid gap-1 font-normal">
              <div className="font-medium">{plan.name}</div>
-              <div className="text-muted-foreground leading-snug">
+              <div className="leading-snug text-muted-foreground">
                {plan.description}
              </div>
            </div>
--- a/apps/v4/app/(internal)/sink/components/scroll-area-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/scroll-area-demo.tsx
@@ -65,9 +65,9 @@ function ScrollAreaHorizontalDemo() {
                height={400}
              />
            </div>
-            <figcaption className="text-muted-foreground pt-2 text-xs">
+            <figcaption className="pt-2 text-xs text-muted-foreground">
              Photo by{" "}
-              <span className="text-foreground font-semibold">
+              <span className="font-semibold text-foreground">
                {artwork.artist}
              </span>
            </figcaption>
--- a/apps/v4/app/(internal)/sink/components/separator-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/separator-demo.tsx
@@ -5,7 +5,7 @@ export function SeparatorDemo() {
    <div>
      <div className="flex flex-col gap-1">
        <div className="text-sm leading-none font-medium">Tailwind CSS</div>
-        <div className="text-muted-foreground text-sm">
+        <div className="text-sm text-muted-foreground">
          A utility-first CSS framework.
        </div>
      </div>
--- a/apps/v4/app/(internal)/sink/components/slider-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/slider-demo.tsx
@@ -27,7 +27,7 @@ function SliderControlled() {
    <div className="grid w-full gap-3">
      <div className="flex items-center justify-between gap-2">
        <Label htmlFor="slider-demo-temperature">Temperature</Label>
-        <span className="text-muted-foreground text-sm">
+        <span className="text-sm text-muted-foreground">
          {value.join(", ")}
        </span>
      </div>
--- a/apps/v4/app/(internal)/sink/components/switch-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/switch-demo.tsx
@@ -30,7 +30,7 @@ export function SwitchDemo() {
      <Label className="flex items-center gap-6 rounded-lg border p-4 has-[[data-state=checked]]:border-blue-600">
        <div className="flex flex-col gap-1">
          <div className="font-medium">Share across devices</div>
-          <div className="text-muted-foreground text-sm font-normal">
+          <div className="text-sm font-normal text-muted-foreground">
            Focus is shared across devices, and turns off when you leave the
            app.
          </div>
--- a/apps/v4/app/(internal)/sink/components/textarea-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/textarea-demo.tsx
@@ -23,7 +23,7 @@ export function TextareaDemo() {
          placeholder="Type your message here."
          rows={6}
        />
-        <div className="text-muted-foreground text-sm">
+        <div className="text-sm text-muted-foreground">
          Type your message and press enter to send.
        </div>
      </div>
--- a/apps/v4/app/(internal)/sink/components/theme-selector.tsx
+++ b/apps/v4/app/(internal)/sink/components/theme-selector.tsx
@@ -113,7 +113,7 @@ export function ThemeSelector({ className }: React.ComponentProps<"div">) {
        <SelectTrigger
          id="theme-selector"
          size="sm"
-          className="bg-secondary text-secondary-foreground border-secondary justify-start shadow-none *:data-[slot=select-value]:w-16"
+          className="justify-start border-secondary bg-secondary text-secondary-foreground shadow-none *:data-[slot=select-value]:w-16"
        >
          <SelectValue placeholder="Select" />
        </SelectTrigger>
--- a/Show More
+++ b/Show More