fulldev-ui 0.9.3 → 0.10.0

package/src/components/blocks/doc-1.astro

@@ -1,4 +1,14 @@
 ---
+import ArrowLeft from "@lucide/astro/icons/arrow-left"
+import ArrowRight from "@lucide/astro/icons/arrow-right"
+import Check from "@lucide/astro/icons/check"
+import ChevronDown from "@lucide/astro/icons/chevron-down"
+import Copy from "@lucide/astro/icons/copy"
+import ExternalLink from "@lucide/astro/icons/external-link"
+import Claude from "simple-icons-astro/Claude"
+import Cursor from "simple-icons-astro/Cursor"
+import Markdown from "simple-icons-astro/Markdown"
+
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { buttonVariants } from "@/components/ui/button/button-variants"
@@ -13,7 +23,6 @@ import {
   DropdownMenuContent,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
-import { Icon } from "@/components/ui/icon"
 import { SectionContainer } from "@/components/ui/section"
 import {
   Toc,
@@ -137,7 +146,7 @@ const openLinks = markdownUrl
         </TypographyH1>
         {
           description && (
-            <TypographyLead class="max-w-2xl text-base! leading-7">
+            <TypographyLead size="sm" class="max-w-2xl leading-7">
               {description}
             </TypographyLead>
           )
@@ -154,16 +163,8 @@ const openLinks = markdownUrl
               data-source={copyButton?.source}
               aria-label={labels.copyMarkdown}
             >
-              <Icon
-                name="copy"
-                data-copy-icon
-                class="docs-copy-icon size-3.5"
-              />
-              <Icon
-                name="check"
-                data-check-icon
-                class="docs-check-icon hidden size-3.5"
-              />
+              <Copy data-copy-icon class="docs-copy-icon size-3.5" />
+              <Check data-check-icon class="docs-check-icon hidden size-3.5" />
               <span>{labels.copyMarkdown}</span>
             </Button>
           )
@@ -175,7 +176,7 @@ const openLinks = markdownUrl
                 class={buttonVariants({ variant: "outline", size: "xs" })}
               >
                 <span>{labels.openIn}</span>
-                <Icon name="chevron-down" class="size-3.5 opacity-70" />
+                <ChevronDown class="size-3.5 opacity-70" />
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end" sideOffset={6} class="w-56">
                 {openLinks.map((link) => (
@@ -185,9 +186,7 @@ const openLinks = markdownUrl
                     rel="noreferrer noopener"
                     class="hover:bg-accent hover:text-accent-foreground flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none"
                   >
-                    {link.icon === "markdown" && (
-                      <Icon name="markdown" class="size-4 fill-current" />
-                    )}
+                    {link.icon === "markdown" && <Markdown class="size-4" />}
                     {link.icon === "chatgpt" && (
                       <svg
                         role="img"
@@ -199,17 +198,10 @@ const openLinks = markdownUrl
                         <path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z" />
                       </svg>
                     )}
-                    {link.icon === "claude" && (
-                      <Icon name="claude" class="size-4 fill-current" />
-                    )}
-                    {link.icon === "cursor" && (
-                      <Icon name="cursor" class="size-4 fill-current" />
-                    )}
+                    {link.icon === "claude" && <Claude class="size-4" />}
+                    {link.icon === "cursor" && <Cursor class="size-4" />}
                     <span>{link.label}</span>
-                    <Icon
-                      name="external-link"
-                      class="text-muted-foreground ml-auto size-3.5"
-                    />
+                    <ExternalLink class="text-muted-foreground ml-auto size-3.5" />
                   </a>
                 ))}
               </DropdownMenuContent>
@@ -236,7 +228,7 @@ const openLinks = markdownUrl
               variant="outline"
               class="h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal"
             >
-              <Icon name="arrow-left" class="size-4" />
+              <ArrowLeft class="size-4" />
               <span class="truncate text-sm font-medium">
                 {previousPage.title}
               </span>
@@ -253,7 +245,7 @@ const openLinks = markdownUrl
               class="h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal"
             >
               <span class="truncate text-sm font-medium">{nextPage.title}</span>
-              <Icon name="arrow-right" class="size-4" />
+              <ArrowRight class="size-4" />
             </Button>
           ) : (
             <div aria-hidden="true" />
@@ -322,30 +314,7 @@ const openLinks = markdownUrl
     pre.before(wrapper)
     wrapper.append(pre, button)
   })
-
-  const writeToClipboard = async (text) => {
-    if (navigator.clipboard && window.isSecureContext) {
-      try {
-        await navigator.clipboard.writeText(text)
-        return true
-      } catch {
-        return false
-      }
-    }
-
-    return false
-  }
-
-  const showCopySuccess = (button) => {
-    button.querySelector("[data-copy-icon]")?.classList.add("hidden")
-    button.querySelector("[data-check-icon]")?.classList.remove("hidden")
-    setTimeout(() => {
-      button.querySelector("[data-copy-icon]")?.classList.remove("hidden")
-      button.querySelector("[data-check-icon]")?.classList.add("hidden")
-    }, 1200)
-  }
-
-  document.addEventListener("click", async (event) => {
+  document.addEventListener("click", (event) => {
     const button = event.target?.closest?.(
       "[id^='docs-copy-page-'], .docs-code-copy"
     )
@@ -356,9 +325,12 @@ const openLinks = markdownUrl
         .closest(".docs-code-block")
         ?.querySelector("pre")
         ?.textContent?.replace(/\n$/, "")
-    if (!source) return
-
-    const copied = await writeToClipboard(source)
-    if (copied) showCopySuccess(button)
+    button.querySelector("[data-copy-icon]")?.classList.add("hidden")
+    button.querySelector("[data-check-icon]")?.classList.remove("hidden")
+    navigator.clipboard?.writeText(source ?? "")
+    setTimeout(() => {
+      button.querySelector("[data-copy-icon]")?.classList.remove("hidden")
+      button.querySelector("[data-check-icon]")?.classList.add("hidden")
+    }, 1200)
   })
 </script>

package/src/components/blocks/features-1.astro

@@ -1,4 +1,6 @@
 ---
+import ArrowRightIcon from "@lucide/astro/icons/arrow-right"
+
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { Icon } from "@/components/ui/icon"
@@ -78,7 +80,7 @@ const { class: className, title, description, buttons, features } = Astro.props
                 class="text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline"
               >
                 {feature.linkText}
-                <Icon name="arrow-right" class="size-3.5" />
+                <ArrowRightIcon class="size-3.5" />
               </a>
             )}
           </div>

package/src/components/blocks/features-2.astro

@@ -55,10 +55,12 @@ const { class: className, title, description, buttons, features } = Astro.props
     }
   </SectionContainer>
   <SectionContainer>
-    <div class="grid overflow-hidden rounded-xl sm:grid-cols-2 lg:grid-cols-3">
+    <div
+      class="ring-foreground/10 bg-border grid gap-px overflow-hidden rounded-xl ring-1 ring-inset sm:grid-cols-2 lg:grid-cols-3"
+    >
       {
         features.map((feature) => (
-          <div class="group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 border-b p-7 text-center transition-colors sm:nth-last-[-n+2]:border-b-0 lg:nth-last-[-n+3]:border-b-0">
+          <div class="bg-background group/feature hover:bg-accent/30 relative flex flex-col items-center gap-4 p-7 text-center transition-colors">
             <div class="bg-primary/10 text-primary ring-primary/15 flex size-10 items-center justify-center rounded-lg ring-1 transition-transform ring-inset group-hover/feature:scale-105">
               <Icon name={feature.icon} class="size-5" />
             </div>

package/src/components/blocks/features-4.astro

@@ -1,4 +1,6 @@
 ---
+import ArrowRightIcon from "@lucide/astro/icons/arrow-right"
+
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { Icon } from "@/components/ui/icon"
@@ -79,7 +81,7 @@ const { class: className, title, description, buttons, features } = Astro.props
                   class="text-primary mt-auto inline-flex items-center gap-1 text-sm font-medium hover:underline"
                 >
                   {feature.linkText}
-                  <Icon name="arrow-right" class="size-3.5" />
+                  <ArrowRightIcon class="size-3.5" />
                 </a>
               )}
             </div>

package/src/components/blocks/footer-1.astro

@@ -1,6 +1,9 @@
 ---
+import Discord from "simple-icons-astro/Discord"
+import Github from "simple-icons-astro/Github"
+import X from "simple-icons-astro/X"
+
 import { cn } from "@/lib/utils"
-import { Icon } from "@/components/ui/icon"
 import { Logo, LogoText } from "@/components/ui/logo"
 import { Section, SectionContainer } from "@/components/ui/section"
 import { Separator } from "@/components/ui/separator"
@@ -34,6 +37,12 @@ const {
   columns,
   copyright,
 } = Astro.props
+
+const iconMap: Record<string, any> = {
+  github: Github,
+  discord: Discord,
+  x: X,
+}
 ---
 
 <footer class={cn("", className)}>
@@ -50,17 +59,22 @@ const {
           {
             socials && socials.length > 0 && (
               <div class="flex items-center gap-3">
-                {socials.map((social) => (
-                  <a
-                    href={social.href}
-                    class="text-muted-foreground hover:text-foreground transition-colors"
-                    aria-label={social.label}
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    <Icon name={social.icon} class="size-4" />
-                  </a>
-                ))}
+                {socials.map((social) => {
+                  const IconComp = iconMap[social.icon]
+                  return (
+                    <a
+                      href={social.href}
+                      class="text-muted-foreground hover:text-foreground transition-colors"
+                      aria-label={social.label}
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      {IconComp && (
+                        <IconComp class="size-4" fill="currentColor" />
+                      )}
+                    </a>
+                  )
+                })}
               </div>
             )
           }

package/src/components/blocks/footer-2.astro

@@ -1,6 +1,9 @@
 ---
+import Discord from "simple-icons-astro/Discord"
+import Github from "simple-icons-astro/Github"
+import X from "simple-icons-astro/X"
+
 import { cn } from "@/lib/utils"
-import { Icon } from "@/components/ui/icon"
 import { Logo, LogoText } from "@/components/ui/logo"
 import { Section, SectionContainer } from "@/components/ui/section"
 import { Separator } from "@/components/ui/separator"
@@ -31,6 +34,12 @@ const {
   socials,
   copyright,
 } = Astro.props
+
+const iconMap: Record<string, any> = {
+  github: Github,
+  discord: Discord,
+  x: X,
+}
 ---
 
 <footer class={cn("", className)}>
@@ -59,17 +68,20 @@ const {
       {
         socials && socials.length > 0 && (
           <div class="flex items-center justify-center gap-3">
-            {socials.map((social) => (
-              <a
-                href={social.href}
-                class="text-muted-foreground hover:text-foreground transition-colors"
-                aria-label={social.label}
-                target="_blank"
-                rel="noreferrer"
-              >
-                <Icon name={social.icon} class="size-4" />
-              </a>
-            ))}
+            {socials.map((social) => {
+              const IconComp = iconMap[social.icon]
+              return (
+                <a
+                  href={social.href}
+                  class="text-muted-foreground hover:text-foreground transition-colors"
+                  aria-label={social.label}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  {IconComp && <IconComp class="size-4" fill="currentColor" />}
+                </a>
+              )
+            })}
           </div>
         )
       }

package/src/components/blocks/footer-3.astro

@@ -1,6 +1,9 @@
 ---
+import Discord from "simple-icons-astro/Discord"
+import Github from "simple-icons-astro/Github"
+import X from "simple-icons-astro/X"
+
 import { cn } from "@/lib/utils"
-import { Icon } from "@/components/ui/icon"
 import { Logo, LogoText } from "@/components/ui/logo"
 import { Section, SectionContainer } from "@/components/ui/section"
 import { Separator } from "@/components/ui/separator"
@@ -39,6 +42,12 @@ const {
   copyright,
   bottomLinks,
 } = Astro.props
+
+const iconMap: Record<string, any> = {
+  github: Github,
+  discord: Discord,
+  x: X,
+}
 ---
 
 <footer class={cn("", className)}>
@@ -55,17 +64,22 @@ const {
           {
             socials && socials.length > 0 && (
               <div class="flex items-center gap-3">
-                {socials.map((social) => (
-                  <a
-                    href={social.href}
-                    class="text-muted-foreground hover:text-foreground transition-colors"
-                    aria-label={social.label}
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    <Icon name={social.icon} class="size-4" />
-                  </a>
-                ))}
+                {socials.map((social) => {
+                  const IconComp = iconMap[social.icon]
+                  return (
+                    <a
+                      href={social.href}
+                      class="text-muted-foreground hover:text-foreground transition-colors"
+                      aria-label={social.label}
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      {IconComp && (
+                        <IconComp class="size-4" fill="currentColor" />
+                      )}
+                    </a>
+                  )
+                })}
               </div>
             )
           }

package/src/components/blocks/header-1.astro

@@ -33,7 +33,6 @@ type Props = {
   navigation: {
     label: string
     href: string
-    active?: boolean
     links?: {
       label: string
       href: string
@@ -51,7 +50,7 @@ const { class: className, logo, navigation, buttons } = Astro.props
 ---
 
 <Header class={cn("", className)}>
-  <HeaderContainer class="items-center justify-between gap-4">
+  <HeaderContainer class="justify-between gap-4">
     <HeaderGroup>
       <Logo href={logo.href}>
         <LogoImage
@@ -68,7 +67,7 @@ const { class: className, logo, navigation, buttons } = Astro.props
         {
           navigation.map((item, index) => (
             <NavigationMenuItem value={`nav-${index}`}>
-              <NavigationMenuLink href={item.href} active={item.active}>
+              <NavigationMenuLink href={item.href}>
                 {item.label}
               </NavigationMenuLink>
             </NavigationMenuItem>

package/src/components/blocks/hero-13.astro

@@ -57,7 +57,7 @@ const { class: className, title, description, buttons, image } = Astro.props
     <Image
       src={image.src}
       alt={image.alt}
-      class="aspect-4/3 w-full rounded-xl border object-cover"
+      class="aspect-[4/3] w-full rounded-xl border object-cover"
       widths={[640, 960, 1280]}
       sizes="(min-width: 1024px) 75vw, 100vw"
       loading="eager"

package/src/components/blocks/hero-4.astro

@@ -1,10 +1,10 @@
 ---
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
+import { CheckIcon } from "@lucide/astro"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-import { Icon } from "@/components/ui/icon"
 import { Section, SectionContainer } from "@/components/ui/section"
 
 type Props = {
@@ -51,7 +51,7 @@ const {
       {
         features.map((feature) => (
           <li class="flex items-center gap-2 text-sm">
-            <Icon name="check" class="text-primary size-4 shrink-0" />
+            <CheckIcon class="text-primary size-4 shrink-0" />
             {feature}
           </li>
         ))

package/src/components/blocks/hero-5.astro

@@ -1,6 +1,7 @@
 ---
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
+import { CheckIcon } from "@lucide/astro"
 
 import { cn } from "@/lib/utils"
 import {
@@ -10,7 +11,6 @@ import {
   AvatarImage,
 } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
-import { Icon } from "@/components/ui/icon"
 import { Rating } from "@/components/ui/rating"
 import { Section, SectionContainer } from "@/components/ui/section"
 
@@ -67,7 +67,7 @@ const {
         {
           features.map((feature) => (
             <li class="flex items-center gap-3 text-sm">
-              <Icon name="check" class="text-primary size-4 shrink-0" />
+              <CheckIcon class="text-primary size-4 shrink-0" />
               {feature}
             </li>
           ))
@@ -113,7 +113,7 @@ const {
     <Image
       src={image.src}
       alt={image.alt}
-      class="aspect-4/3 w-full rounded-xl border object-cover"
+      class="aspect-[4/3] w-full rounded-xl border object-cover"
       widths={[640, 960, 1280]}
       sizes="(min-width: 1024px) 50vw, 100vw"
       loading="eager"

package/src/components/blocks/hero-6.astro

@@ -1,6 +1,7 @@
 ---
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
+import { CheckIcon } from "@lucide/astro"
 
 import { cn } from "@/lib/utils"
 import {
@@ -10,7 +11,6 @@ import {
   AvatarImage,
 } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
-import { Icon } from "@/components/ui/icon"
 import { Rating } from "@/components/ui/rating"
 import { Section, SectionContainer } from "@/components/ui/section"
 
@@ -55,7 +55,7 @@ const {
     <Image
       src={image.src}
       alt={image.alt}
-      class="aspect-4/3 w-full rounded-xl border object-cover"
+      class="aspect-[4/3] w-full rounded-xl border object-cover"
       widths={[640, 960, 1280]}
       sizes="(min-width: 1024px) 50vw, 100vw"
       loading="eager"
@@ -75,7 +75,7 @@ const {
         {
           features.map((feature) => (
             <li class="flex items-center gap-3 text-sm">
-              <Icon name="check" class="text-primary size-4 shrink-0" />
+              <CheckIcon class="text-primary size-4 shrink-0" />
               {feature}
             </li>
           ))

package/src/components/blocks/hero-7.astro

@@ -1,6 +1,7 @@
 ---
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
+import { CheckIcon } from "@lucide/astro"
 
 import { cn } from "@/lib/utils"
 import {
@@ -10,7 +11,6 @@ import {
   AvatarImage,
 } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
-import { Icon } from "@/components/ui/icon"
 import { Rating } from "@/components/ui/rating"
 import { Section, SectionContainer } from "@/components/ui/section"
 
@@ -69,7 +69,7 @@ const {
         {
           features.map((feature) => (
             <li class="flex items-center gap-3 text-sm">
-              <Icon name="check" class="text-primary size-4 shrink-0" />
+              <CheckIcon class="text-primary size-4 shrink-0" />
               {feature}
             </li>
           ))
@@ -115,7 +115,7 @@ const {
     <Image
       src={image.src}
       alt={image.alt}
-      class="aspect-4/3 w-full rounded-xl border object-cover"
+      class="aspect-[4/3] w-full rounded-xl border object-cover"
       widths={[640, 960, 1280]}
       sizes="(min-width: 1024px) 60vw, 100vw"
       loading="eager"

package/src/components/blocks/hero-8.astro

@@ -60,7 +60,7 @@ const { class: className, title, description, buttons, image } = Astro.props
     <Image
       src={image.src}
       alt={image.alt}
-      class="aspect-4/3 w-full rounded-xl border object-cover"
+      class="aspect-[4/3] w-full rounded-xl border object-cover"
       widths={[640, 960, 1280]}
       sizes="(min-width: 1024px) 75vw, 100vw"
       loading="eager"

package/src/components/blocks/hero-9.astro

@@ -1,6 +1,7 @@
 ---
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
+import { CheckIcon } from "@lucide/astro"
 
 import { cn } from "@/lib/utils"
 import {
@@ -10,7 +11,6 @@ import {
   AvatarImage,
 } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
-import { Icon } from "@/components/ui/icon"
 import { Rating } from "@/components/ui/rating"
 import { Section, SectionContainer } from "@/components/ui/section"
 
@@ -67,7 +67,7 @@ const {
         {
           features.map((feature) => (
             <li class="flex items-center gap-3 text-sm">
-              <Icon name="check" class="text-primary size-4 shrink-0" />
+              <CheckIcon class="text-primary size-4 shrink-0" />
               {feature}
             </li>
           ))

package/src/components/blocks/links-2.astro

@@ -1,6 +1,7 @@
 ---
+import ArrowRightIcon from "@lucide/astro/icons/arrow-right"
+
 import { cn } from "@/lib/utils"
-import { Icon } from "@/components/ui/icon"
 import { Section, SectionContainer } from "@/components/ui/section"
 
 type Props = {
@@ -40,10 +41,7 @@ const { class: className, title, description, links } = Astro.props
           >
             <span class="flex min-w-0 items-center justify-between gap-3">
               <span class="text-sm font-medium">{item.title}</span>
-              <Icon
-                name="arrow-right"
-                class="text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5"
-              />
+              <ArrowRightIcon class="text-muted-foreground size-3.5 shrink-0 transition-transform group-hover/link:translate-x-0.5" />
             </span>
             <span class="text-muted-foreground mt-1 block text-sm leading-6">
               {item.description}

package/src/components/blocks/pricing-1.astro

@@ -1,4 +1,6 @@
 ---
+import { CheckIcon } from "@lucide/astro"
+
 import { cn } from "@/lib/utils"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
@@ -10,7 +12,6 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card"
-import { Icon } from "@/components/ui/icon"
 import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
 import { Section, SectionContainer } from "@/components/ui/section"
 import { Separator } from "@/components/ui/separator"
@@ -80,7 +81,7 @@ const { class: className, title, description, plans } = Astro.props
               <ul class="flex flex-col gap-3">
                 {plan.features.map((feature) => (
                   <li class="flex items-center gap-3 text-sm">
-                    <Icon name="check" class="text-primary size-4 shrink-0" />
+                    <CheckIcon class="text-primary size-4 shrink-0" />
                     {feature}
                   </li>
                 ))}

package/src/components/blocks/pricing-2.astro

@@ -1,4 +1,6 @@
 ---
+import { CheckIcon } from "@lucide/astro"
+
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import {
@@ -9,7 +11,6 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card"
-import { Icon } from "@/components/ui/icon"
 import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
 import { Section, SectionContainer } from "@/components/ui/section"
 import { Separator } from "@/components/ui/separator"
@@ -74,7 +75,7 @@ const { class: className, title, description, plans } = Astro.props
               <ul class="flex flex-col gap-3">
                 {plan.features.map((feature) => (
                   <li class="flex items-center gap-3 text-sm">
-                    <Icon name="check" class="text-primary size-4 shrink-0" />
+                    <CheckIcon class="text-primary size-4 shrink-0" />
                     {feature}
                   </li>
                 ))}