var Component=(()=>{var g=Object.create;var t=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var _=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),B=(l,e)=>{for(var r in e)t(l,r,{get:e[r],enumerable:!0})},h=(l,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of b(e))!x.call(l,s)&&s!==r&&t(l,s,{get:()=>e[s],enumerable:!(o=f(e,s))||o.enumerable});return l};var w=(l,e,r)=>(r=l!=null?g(N(l)):{},h(e||!l||!l.__esModule?t(r,"default",{value:l,enumerable:!0}):r,l)),v=l=>h(t({},"__esModule",{value:!0}),l);var y=_((j,m)=>{m.exports=_jsx_runtime});var E={};B(E,{default:()=>S,frontmatter:()=>k});var n=w(y()),k={title:"Badge Button",description:"A Cursor That Follow Images",component:!0,links:null};function u(l){let e=Object.assign({div:"div",pre:"pre",code:"code",span:"span",h1:"h1",a:"a",p:"p"},l.components),{ComponentPreview:r,Tabs:o,TabsList:s,TabsTrigger:i,TabsContent:F,Steps:d,Step:c,ComponentSource:p}=e;return r||a("ComponentPreview",!0),p||a("ComponentSource",!0),c||a("Step",!0),d||a("Steps",!0),o||a("Tabs",!0),F||a("TabsContent",!0),s||a("TabsList",!0),i||a("TabsTrigger",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(r,{name:"badge-button",className:"[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]",description:"All variations",children:(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import React from "react" import { SparklesIcon } from "lucide-react" import { Badge } from "@/components/ui/badge" const BadgeButton = () => { return ( {" "} Component Preview ) } export BadgeButton `,__src__:"registry/default/ui/badge-button.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" React "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "react"'})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" SparklesIcon "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "lucide-react"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" Badge "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "@/components/ui/badge"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:" BadgeButton"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" ()"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Badge"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" variant"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:'"outline"'})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:'"mb-3 cursor-pointer rounded-[14px] border border-black/10 bg-white text-base md:left-6"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"SparklesIcon className"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:'" mr-2 fill-[#EEBDE0] stroke-1 text-neutral-800"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" />{"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:'" "'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" Component Preview"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" BadgeButton"})]})]})})})}),` `,(0,n.jsxs)(e.h1,{id:"installation",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,n.jsx)(e.p,{children:"Install the required dependencies."}),` `,(0,n.jsxs)(o,{defaultValue:"cli",children:[(0,n.jsxs)(s,{children:[(0,n.jsx)(i,{value:"cli",children:"CLI"}),(0,n.jsx)(i,{value:"manual",children:"Manual"})]}),(0,n.jsx)(F,{value:"cli",children:(0,n.jsx)(d,{children:(0,n.jsxs)(c,{children:[(0,n.jsx)(e.p,{children:"Paste the below command in your terminal"}),(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"bash","data-theme":"default",__rawString__:` npx shadcn@latest add "http://legacy.skiper-ui.com/registry/badge-button.json" `,children:(0,n.jsx)(e.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:" npx"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" shadcn@latest"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" add"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "http://legacy.skiper-ui.com/registry/badge-button.json"'})]})})})})]})})}),(0,n.jsx)(F,{value:"manual",children:(0,n.jsxs)(d,{children:[(0,n.jsxs)(c,{children:[(0,n.jsx)(e.p,{children:"Install the required dependencies."}),(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"bash","data-theme":"default",__rawString__:` npm i framer-motion clsx tailwind-merge `,children:(0,n.jsx)(e.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:" npm"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" i"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" framer-motion"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" clsx"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" tailwind-merge"})]})})})})]}),(0,n.jsxs)(c,{children:[(0,n.jsx)(e.p,{children:"Add util file"}),(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"bash","data-theme":"default",__rawString__:`import { ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } `,children:(0,n.jsxs)(e.code,{"data-language":"bash","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" ClassValue,"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" clsx"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "clsx"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" twMerge"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "tailwind-merge"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" "})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" function cn"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:".."}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:".inputs:"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" ClassValue[]"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8",fontWeight:"bold"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" twMerge"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:"clsx(inputs"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:")"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"})})]})})})]}),(0,n.jsxs)(c,{children:["Copy the source code to ",(0,n.jsx)(e.code,{children:"components/ui/badge-button.tsx"})," "]}),(0,n.jsx)(p,{name:"badge-button",children:(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import React from "react" import { SparklesIcon } from "lucide-react" import { Badge } from "@/components/ui/badge" const BadgeButton = () => { return ( {" "} Component Preview ) } export BadgeButton `,__src__:"registry/default/ui/badge-button.tsx",__style__:"default",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" React "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "react"'})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" SparklesIcon "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "lucide-react"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" Badge "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "@/components/ui/badge"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:" BadgeButton"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" ()"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Badge"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" variant"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:'"outline"'})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:'"mb-3 cursor-pointer rounded-[14px] border border-black/10 bg-white text-base md:left-6"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"SparklesIcon className"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:'" mr-2 fill-[#EEBDE0] stroke-1 text-neutral-800"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" />{"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:'" "'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" Component Preview"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" BadgeButton"})]})]})})})}),(0,n.jsx)(c,{children:"Update the import paths to match your project setup."})]})})]})]})}function C(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,Object.assign({},l,{children:(0,n.jsx)(u,l)})):u(l)}var S=C;function a(l,e){throw new Error("Expected "+(e?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return v(E);})(); ;return Component;

Badge Button

Installation

Paste the below command in your terminal npx shadcn@latest add "http://legacy.skiper-ui.com/registry/badge-button.json"Copy

Paste the below command in your terminal
`npx shadcn@latest add "http://legacy.skiper-ui.com/registry/badge-button.json"`