基础

按钮示例

一个紧凑的操作按钮组，用来验证最小可安装 registry 组件。

源码

这里展示 registry 中会被 shadcn 安装到目标项目的组件源码。

registry/default/button-demo/button-demo.tsx

import { ArrowRightIcon, SparklesIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

type ButtonDemoProps = {
  primaryLabel?: string
  secondaryLabel?: string
}

export function ButtonDemo({
  primaryLabel = "Start with registry",
  secondaryLabel = "View source",
}: ButtonDemoProps) {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button>
        <SparklesIcon data-icon="inline-start" />
        {primaryLabel}
      </Button>
      <Button variant="outline">
        {secondaryLabel}
        <ArrowRightIcon data-icon="inline-end" />
      </Button>
    </div>
  )
}