create-landing-app 0.2.8 → 0.3.1

package/dist/prompts.js

@@ -13,8 +13,11 @@ export async function runPrompts() {
     const contact = await confirm({ message: "Include Contact section? (form + API route)" });
     if (isCancel(contact))
         return null;
-    const docker = await confirm({ message: "Include Docker setup? (for VPS deploy)" });
-    if (isCancel(docker))
+    const darkMode = await confirm({ message: "Enable dark mode toggle?" });
+    if (isCancel(darkMode))
+        return null;
+    const analytics = await confirm({ message: "Include Analytics? (GTM + GA via env vars)" });
+    if (isCancel(analytics))
         return null;
     return {
         projectName: String(projectName).trim(),
@@ -24,6 +27,7 @@ export async function runPrompts() {
         dataFetching: "tanstack-query",
         blog: Boolean(blog),
         contact: Boolean(contact),
-        docker: Boolean(docker),
+        darkMode: Boolean(darkMode),
+        analytics: Boolean(analytics),
     };
 }

package/dist/scaffold.js

@@ -32,8 +32,11 @@ export async function scaffold(config, targetDir) {
         optionals.push("sections/blog");
     if (config.contact)
         optionals.push("sections/contact");
-    if (config.docker)
-        optionals.push("docker");
+    // Optional UI/tracking features — run after sections so layout markers are intact
+    if (config.darkMode)
+        optionals.push("dark-mode");
+    if (config.analytics)
+        optionals.push("analytics");
     // 3. Apply each optional feature (files + inject markers)
     for (const opt of optionals) {
         const optDir = path.join(TEMPLATES_ROOT, "optional", opt);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-landing-app",
-  "version": "0.2.8",
+  "version": "0.3.1",
   "description": "Create a production-ready Next.js landing page with one command",
   "type": "module",
   "bin": {

package/templates/nextjs/base/.dockerignore

@@ -0,0 +1,6 @@
+node_modules
+.next
+.git
+*.log
+.env
+.env.local

package/templates/nextjs/base/.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab

package/templates/nextjs/base/.env.example

@@ -1,8 +1,14 @@
 # Site
 NEXT_PUBLIC_SITE_URL=https://yourdomain.com
 
-# Analytics (optional)
-NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=
+# Analytics (optional) — install analytics optional module to activate
+NEXT_PUBLIC_GTM_ID=
+NEXT_PUBLIC_GA_ID=
+
+# Blog (optional) — set to your API base URL to replace built-in mock data
+# Expected endpoints: GET /blogs?applicationFilter=..., GET /blogs/:slug, GET /categories
+NEXT_PUBLIC_BLOG_API=
+BLOG_API_APPLICATION=ndachain
 
 # S3 / Storage (optional)
 NEXT_PUBLIC_S3_DOMAIN=

package/templates/nextjs/base/.husky/pre-push

@@ -28,17 +28,15 @@ else
 fi
 echo ""
 
-# ── Step 3: Docker build + security scan (opt-in with RUN_SCAN=true) ──
-if [ "${RUN_SCAN}" = "true" ]; then
-  if ! command -v docker > /dev/null 2>&1; then
-    echo "${YELLOW}[3/3] Security scan skipped (Docker not found)${NC}"
-  else
-    echo "${GREEN}[3/3] Running Docker build + security scan...${NC}"
-    FAIL_ON_VULN=false bash ./scripts/build-and-scan.sh
-    echo "${GREEN}✅ Scan completed${NC}"
-  fi
+# ── Step 3: Docker build + security scan (always runs, skip with SKIP_SCAN=true) ──
+if [ "${SKIP_SCAN}" = "true" ]; then
+  echo "${YELLOW}[3/3] Security scan skipped (SKIP_SCAN=true)${NC}"
+elif ! command -v docker > /dev/null 2>&1; then
+  echo "${YELLOW}[3/3] Security scan skipped (Docker not found)${NC}"
 else
-  echo "${YELLOW}[3/3] Security scan skipped (set RUN_SCAN=true to enable)${NC}"
+  echo "${GREEN}[3/3] Running Docker build + security scan...${NC}"
+  FAIL_ON_VULN=false bash ./scripts/build-and-scan.sh
+  echo "${GREEN}✅ Scan completed${NC}"
 fi
 
 echo ""

package/templates/nextjs/base/CLAUDE.md

@@ -0,0 +1,169 @@
+# CLAUDE.md
+
+Project-specific instructions for Claude Code when working on a generated `create-landing-app` project.
+
+## Stack
+
+| Layer | Technology |
+|---|---|
+| Framework | Next.js 16.2 (App Router, Turbopack) |
+| Language | TypeScript 5 (strict mode) |
+| Styling | Tailwind CSS v4 + CSS variables |
+| UI Components | Radix UI primitives + shadcn/ui pattern |
+| Animation | Motion (Framer Motion v12) |
+| Icons | Lucide React |
+| Fonts | Inter (Google Fonts via `next/font`) |
+| Toasts | Sonner |
+| Package manager | npm (or bun/pnpm depending on scaffold choice) |
+
+## Project Structure
+
+```
+app/
+  layout.tsx          Root layout — add providers, fonts here
+  page.tsx            Home page — compose sections here
+  globals.css         Tailwind base + global resets
+  sitemap.ts          Auto-generated sitemap
+  robots.ts           robots.txt config
+  not-found.tsx       Custom 404 page
+
+components/
+  navs/               Navigation components
+    navbar.tsx        Desktop navbar
+    navbar-mobile.tsx Mobile drawer menu
+  sections/           Page section components
+    hero-section.tsx
+    features-section.tsx
+    footer-section.tsx
+  ui/                 shadcn/ui base components (Radix-based)
+    button.tsx
+    dialog.tsx
+    dropdown-menu.tsx
+    accordion.tsx
+    input.tsx  checkbox.tsx  radio-group.tsx  select.tsx  tabs.tsx  textarea.tsx
+    sonner.tsx          Toast wrapper
+  providers.tsx       Client-side provider wrapper
+
+constants/
+  common.ts           Nav links, site config, social links
+
+lib/
+  metadata.ts         createMetadata() factory — use for all page metadata
+  utils.ts            cn() — Tailwind class merge utility
+
+styles/
+  theme.css           CSS variables (colors, radius) — edit here to rebrand
+
+types/                Shared TypeScript type definitions
+public/               Static assets (og-image.png, favicon, etc.)
+scripts/
+  lighthouse-check.sh Manual Lighthouse CI runner
+  build-and-scan.sh   Docker build + Trivy security scan
+```
+
+## Development Commands
+
+```bash
+npm run dev           # Dev server (Turbopack — fast HMR)
+npm run build         # Production build
+npm run start         # Serve production build
+npm run lint          # ESLint check
+npm run lint:fix      # ESLint auto-fix
+npm run format        # Prettier write (all files)
+npm run format:check  # Prettier dry-run
+npm run lighthouse    # Run Lighthouse CI audit manually
+npm run build-and-scan  # Docker build + Trivy vulnerability scan
+```
+
+## Code Conventions
+
+### TypeScript
+- **No `any` types** — use `unknown` + type narrowing or proper interfaces
+- Keep component files under **200 lines** — extract sub-components when larger
+- Use named exports for components; default export only for Next.js pages/layouts
+
+### Styling
+- Use `cn()` from `lib/utils.ts` for all conditional class merging — never string interpolation
+- **CSS variables** for all design tokens — defined in `styles/theme.css`
+- Rebrand by editing `--brand-*` and `--primary` variables in `theme.css`
+- Dark mode variables are in the `.dark {}` block — only active when `dark-mode` optional module is installed
+
+### Metadata
+- **Always** use `createMetadata()` from `lib/metadata.ts` for page `<head>` metadata
+- Set `NEXT_PUBLIC_SITE_URL` in `.env.local` — used for canonical URLs and OG images
+- Place `og-image.png` (1200×630) in `/public/`
+
+### Components
+- Place new page sections in `components/sections/`
+- Place new nav components in `components/navs/`
+- Place Radix-based UI primitives in `components/ui/`
+- All animations via Motion (`motion/react`) — avoid CSS transitions for interactive elements
+
+### Providers
+- Add client-side providers in `components/providers.tsx`
+- The root `layout.tsx` has `// __PROVIDERS_IMPORT__` and `// __PROVIDERS_WRAP_START/END__` markers — these are used by the CLI injector; do not remove them
+
+## Environment Variables
+
+```bash
+# .env.local (never commit this file)
+NEXT_PUBLIC_SITE_URL=https://yourdomain.com   # Required — used in metadata & sitemap
+NEXT_PUBLIC_GTM_ID=                           # Google Tag Manager (analytics module)
+NEXT_PUBLIC_GA_ID=                            # Google Analytics (analytics module)
+NEXT_PUBLIC_BLOG_API=                         # External blog API base URL (blog module)
+BLOG_API_APPLICATION=ndachain                # Application filter required by the blog API
+NEXT_PUBLIC_S3_DOMAIN=                        # CDN domain for media assets
+```
+
+## Optional Modules (installed via CLI)
+
+These are injected at scaffold time — each module merges files and deps into the base template:
+
+| Module | What it adds |
+|---|---|
+| `i18n-dict` | `dictionaries/en.json` + `vi.json`, `app/[lang]/` routing, middleware, language switcher |
+| `zustand` | `store/ui-store.ts`, Zustand provider |
+| `tanstack-query` | `lib/query-client.ts`, `lib/custom-fetch.ts`, QueryClientProvider |
+| `docker` | `Dockerfile`, `docker-compose.yml`, `.dockerignore`, `scripts/build-and-scan.sh` |
+| `analytics` | GTM/GA4 script injection, env var wiring |
+| `dark-mode` | `next-themes` ThemeProvider, theme toggle component |
+| `blog` | Blog listing + detail pages, `lib/blog-api.ts`, optional external API |
+| `contact` | Contact form section with validation |
+| `about` | About section with team/mission layout |
+
+## Git Hooks (Husky)
+
+| Hook | Runs |
+|---|---|
+| `pre-commit` | Prettier + ESLint on staged files (via lint-staged) |
+| `commit-msg` | commitlint — enforces Conventional Commits |
+| `pre-push` | `next build` → Lighthouse CI → Docker scan (if Dockerfile exists) |
+
+Skip Lighthouse on push: `SKIP_LIGHTHOUSE=true git push`
+Skip Docker scan: `SKIP_SCAN=true git push`
+
+## Commit Convention
+
+```
+feat(hero): add animated gradient background
+fix(navbar): close mobile menu on route change
+refactor(blog): extract post card into separate component
+chore: update dependencies
+```
+
+Allowed types: `feat` `fix` `docs` `style` `refactor` `perf` `test` `build` `ci` `chore` `revert`
+
+## Deployment
+
+```bash
+# Docker (standalone output)
+docker build -t my-app .
+docker run -p 3000:3000 my-app
+
+# Or
+docker compose up
+
+# Vercel / Netlify — just connect the repo, no config needed
+```
+
+The Docker image runs `node .next/standalone/server.js` — not `next start`.

package/templates/nextjs/base/Dockerfile

@@ -2,12 +2,12 @@
 FROM node:20-alpine AS deps
 RUN corepack enable
 WORKDIR /app
-COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* bun.lock* bun.lockb* ./
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* bun.lockb* ./
 RUN \
   if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
   elif [ -f package-lock.json ]; then npm ci; \
   elif [ -f pnpm-lock.yaml ]; then pnpm i --frozen-lockfile; \
-  elif [ -f bun.lock ] || [ -f bun.lockb ]; then npm i -g bun && bun install --frozen-lockfile; \
+  elif [ -f bun.lockb ]; then bun install --frozen-lockfile; \
   else echo "No lockfile found." && exit 1; \
   fi
 
@@ -16,13 +16,7 @@ FROM node:20-alpine AS builder
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
-RUN \
-  if [ -f yarn.lock ]; then yarn build; \
-  elif [ -f package-lock.json ]; then npm run build; \
-  elif [ -f pnpm-lock.yaml ]; then pnpm run build; \
-  elif [ -f bun.lock ] || [ -f bun.lockb ]; then npm i -g bun && bun run build; \
-  else npm run build; \
-  fi
+RUN yarn build
 
 # Stage 3: Production runner (standalone output)
 FROM node:20-alpine AS runner

package/templates/nextjs/base/Makefile

@@ -0,0 +1,25 @@
+.PHONY: dev build start lint format lighthouse docker-build docker-run
+
+dev:
+	npm run dev
+
+build:
+	npm run build
+
+start:
+	npm run start
+
+lint:
+	npm run lint
+
+format:
+	npm run format
+
+lighthouse:
+	npm run lighthouse
+
+docker-build:
+	docker build -t __PROJECT_NAME__ .
+
+docker-run:
+	docker run -p 3000:3000 __PROJECT_NAME__

package/templates/nextjs/base/app/layout.tsx

@@ -1,13 +1,12 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import { ThemeProvider } from "next-themes";
 import { Toaster } from "@/components/ui/sonner";
 import Providers from "@/components/providers";
 import { createMetadata } from "@/lib/metadata";
 import "./globals.css";
 // __PROVIDERS_IMPORT__
 
-const inter = Inter({ variable: "--font-inter", subsets: ["latin"] });
+const inter = Inter({ variable: "--font-inter", subsets: ["latin"], display: "swap" });
 
 export const metadata: Metadata = createMetadata({
   title: "__PROJECT_NAME__",
@@ -18,13 +17,11 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="en" suppressHydrationWarning>
       <body className={`${inter.variable} font-sans antialiased`}>
-        <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
-          <Providers>
-            {/* __PROVIDERS_WRAP_START__ */}
-            {children}
-            {/* __PROVIDERS_WRAP_END__ */}
-          </Providers>
-        </ThemeProvider>
+        <Providers>
+          {/* __PROVIDERS_WRAP_START__ */}
+          {children}
+          {/* __PROVIDERS_WRAP_END__ */}
+        </Providers>
         <Toaster />
       </body>
     </html>

package/templates/nextjs/base/app/sitemap.ts

@@ -0,0 +1,15 @@
+import type { MetadataRoute } from "next";
+
+const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? "https://yourdomain.com";
+
+// Add additional routes as your project grows
+export default function sitemap(): MetadataRoute.Sitemap {
+  return [
+    {
+      url: BASE_URL,
+      lastModified: new Date(),
+      changeFrequency: "monthly",
+      priority: 1,
+    },
+  ];
+}

package/templates/nextjs/base/commitlint.config.mjs

@@ -2,30 +2,14 @@
 const config = {
   extends: ["@commitlint/config-conventional"],
   rules: {
-    // Allowed commit types
-    "type-enum": [
-      2,
-      "always",
-      [
-        "feat", // new feature
-        "fix", // bug fix
-        "docs", // documentation only
-        "style", // formatting, whitespace
-        "refactor", // code change that's not feat or fix
-        "perf", // performance improvement
-        "test", // tests
-        "build", // build system, deps
-        "ci", // CI/CD
-        "chore", // other changes
-        "revert", // revert a commit
-      ],
-    ],
-    // Subject line max length
+    // Downgrade type/subject requirements to warnings only
+    "type-empty": [1, "never"],
+    "subject-empty": [1, "never"],
+    "type-enum": [1, "always", ["feat", "fix", "docs", "style", "refactor", "perf", "test", "build", "ci", "chore", "revert"]],
+    // Only hard rules: keep messages readable
     "subject-max-length": [2, "always", 100],
-    // No period at end of subject
     "subject-full-stop": [2, "never", "."],
-    // Subject must start lowercase
-    "subject-case": [2, "never", ["sentence-case", "start-case", "pascal-case", "upper-case"]],
+    "subject-case": [0],
   },
 };
 

package/templates/nextjs/base/components/navs/navbar-mobile.tsx

@@ -1,39 +1,72 @@
 "use client";
-import { useState } from "react";
 import Link from "next/link";
 import { Menu, X } from "lucide-react";
-import { NAV_LINKS } from "@/constants/common";
+import { motion } from "motion/react";
+import { NAV_LINKS, SITE_NAME } from "@/constants/common";
 import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
+import {
+  Sheet,
+  SheetTrigger,
+  SheetContent,
+  SheetClose,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+} from "@/components/ui/sheet";
 
 export default function NavbarMobile() {
-  const [open, setOpen] = useState(false);
-
   return (
     <div className="md:hidden">
-      <button onClick={() => setOpen(!open)} aria-label="Toggle menu">
-        {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
-      </button>
+      <Sheet>
+        {/* Hamburger trigger */}
+        <SheetTrigger asChild>
+          <Button variant="ghost" size="icon" aria-label="Open menu">
+            <Menu className="h-5 w-5" />
+          </Button>
+        </SheetTrigger>
+
+        <SheetContent>
+          {/* Header: logo + close button */}
+          <SheetHeader className="flex-row items-center justify-between">
+            <SheetTitle className="text-base font-bold text-primary not-sr-only">
+              {SITE_NAME}
+            </SheetTitle>
+            <SheetClose asChild>
+              <Button variant="ghost" size="icon" aria-label="Close menu">
+                <X className="h-5 w-5" />
+              </Button>
+            </SheetClose>
+          </SheetHeader>
+
+          {/* Nav links — staggered fade-in */}
+          <nav className="flex flex-1 flex-col gap-1 px-2">
+            {NAV_LINKS.map((link, i) => (
+              <motion.div
+                key={link.href}
+                initial={{ opacity: 0, x: 16 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: i * 0.07, duration: 0.25 }}
+              >
+                <SheetClose asChild>
+                  <Link
+                    href={link.href}
+                    className="block rounded-md px-3 py-3 text-base font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+                  >
+                    {link.label}
+                  </Link>
+                </SheetClose>
+              </motion.div>
+            ))}
+          </nav>
 
-      {/* Slide-down mobile menu */}
-      <div
-        className={cn(
-          "absolute inset-x-0 top-16 flex flex-col gap-4 border-b bg-background p-6 transition-all duration-200",
-          open ? "visible opacity-100" : "invisible pointer-events-none opacity-0"
-        )}
-      >
-        {NAV_LINKS.map((link) => (
-          <Link
-            key={link.href}
-            href={link.href}
-            onClick={() => setOpen(false)}
-            className="text-sm font-medium"
-          >
-            {link.label}
-          </Link>
-        ))}
-        <Button className="w-full">Get started</Button>
-      </div>
+          {/* CTA */}
+          <SheetFooter>
+            <SheetClose asChild>
+              <Button className="w-full">Get started</Button>
+            </SheetClose>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
     </div>
   );
 }

package/templates/nextjs/base/components/navs/navbar.tsx

@@ -9,12 +9,15 @@ import { cn } from "@/lib/utils";
 
 export default function Navbar() {
   const [isVisible, setIsVisible] = useState(true);
+  const [isScrolled, setIsScrolled] = useState(false);
   const lastScrollY = useRef(0);
 
   useEffect(() => {
     const controlNavbar = () => {
       const currentScrollY = window.scrollY;
 
+      setIsScrolled(currentScrollY > 10);
+
       if (currentScrollY < lastScrollY.current || currentScrollY < 10) {
         setIsVisible(true); // scrolling up OR near top → show
       } else {
@@ -31,8 +34,12 @@ export default function Navbar() {
   return (
     <header
       className={cn(
-        "fixed top-0 z-50 w-full border-b border-border/40 bg-background/80 backdrop-blur-sm header-shadow transition-transform duration-300",
-        isVisible ? "translate-y-0" : "-translate-y-[calc(100%+20px)]"
+        "fixed top-0 z-50 w-full transition-all duration-700 ease-in-out",
+        isVisible ? "translate-y-0" : "-translate-y-[calc(100%+20px)]",
+        // Transparent at top; apply blur + border when scrolled
+        isScrolled
+          ? "border-b border-border/40 bg-background/80 backdrop-blur-md shadow-sm"
+          : "border-b border-transparent bg-transparent",
       )}
     >
       <div className="content-container flex h-16 items-center justify-between">

package/templates/nextjs/base/components/ui/checkbox.tsx

@@ -0,0 +1,26 @@
+"use client";
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
+      <CheckIcon className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

package/templates/nextjs/base/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
+  return (
+    <input
+      type={type}
+      className={cn(
+        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Input.displayName = "Input";
+
+export { Input };

package/templates/nextjs/base/components/ui/radio-group.tsx

@@ -0,0 +1,36 @@
+"use client";
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { CircleIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return <RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />;
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <CircleIcon className="h-3.5 w-3.5 fill-primary" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };