Badge

安装

npx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/badge.json
yarn dlx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/badge.json
pnpx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/badge.json
bunx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/badge.json

参考

示例

BadgeSecondaryDestructiveOutline
Verified89920+
import { BadgeCheckIcon } from "lucide-react"import { Badge } from "@/registry/ssp/ui/badge"export default function Example() {return (  <div className='flex flex-col items-center gap-2'>    <div className='flex w-full flex-wrap gap-2'>      <Badge>Badge</Badge>      <Badge variant='secondary'>Secondary</Badge>      <Badge variant='destructive'>Destructive</Badge>      <Badge variant='outline'>Outline</Badge>    </div>    <div className='flex w-full flex-wrap gap-2'>      <Badge        variant='secondary'        className='bg-blue-500 text-white dark:bg-blue-600'      >        <BadgeCheckIcon />        Verified      </Badge>      <Badge className='h-5 min-w-5 rounded-full px-1 font-mono tabular-nums'>        8      </Badge>      <Badge        className='h-5 min-w-5 rounded-full px-1 font-mono tabular-nums'        variant='destructive'      >        99      </Badge>      <Badge        className='h-5 min-w-5 rounded-full px-1 font-mono tabular-nums'        variant='outline'      >        20+      </Badge>    </div>  </div>)}