feat(cli): add optional components prefix

[dan5py]

Add an option to prefix components exports. Closes #850.

Features

• disabled by default
• lowercase exports are ignored
• types and interfaces names are replaced (other exports are aliased)

Usage

Add the prefix option in your components.json file.

// components.json
{
  // ...
  "prefix": "Sh",
  // ...
}

Example

This example uses the Badge component.

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default:
          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary:
          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive:
          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        outline: "text-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

export interface ShBadgeProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: ShBadgeProps) {
  return (
    <div className={cn(badgeVariants({ variant }), className)} {...props} />
  )
}

export { Badge as ShBadge, badgeVariants }

[vercel[bot]]

@dan5py is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[shadcn]

@dan5py This is good but let's hash out the idea a bit more. I want to see how we can support other naming conventions as well e.g camel case.

[pstachula-dev]

I also need this option. The problem is when I must create an atom component built with Primitives. Now there is Select name conflict. This option will be beneficial for many users.

export const Select = (props: SelectProps) => {
  return (
    <Select>
      <SelectTrigger className="w-[180px]">
        <SelectValue placeholder="Theme" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="light">Light</SelectItem>
        <SelectItem value="dark">Dark</SelectItem>
        <SelectItem value="system">System</SelectItem>
      </SelectContent>
    </Select>
  );
}

[muezz]

This will be a great feature as now if I need to quick import a component using the refactor tool in VS Code (⌘ + .), I have to manually scroll past the Radix and other imports that have the same exact name.