create-awarizon-app 1.0.0

package/templates/nextjs-js/app/page.jsx

@@ -0,0 +1,141 @@
+'use client'
+
+import { useReadContract, ConnectButton } from '@awarizon/react'
+import { ERC20_ABI } from '@awarizon/web3'
+import { Badge }    from '@/components/ui/Badge'
+import { Button }   from '@/components/ui/Button'
+import { Card }     from '@/components/ui/Card'
+import { Skeleton } from '@/components/ui/Skeleton'
+import { StatCard } from '@/components/ui/StatCard'
+
+const USDC_BASE = '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913'
+
+function DataRow({ label, value, loading }) {
+  return (
+    <div className="flex items-center justify-between py-3 border-b border-zinc-800/50 last:border-0">
+      <code className="text-[11px] text-yellow-400/70 font-mono">{label}</code>
+      {loading
+        ? <Skeleton className="h-3.5 w-28" />
+        : <span className="font-mono text-xs text-zinc-300">{value ?? '—'}</span>}
+    </div>
+  )
+}
+
+export default function Home() {
+  const { data: name,        isLoading: l1 } = useReadContract({ address: USDC_BASE, abi: ERC20_ABI, method: 'name'        })
+  const { data: symbol,      isLoading: l2 } = useReadContract({ address: USDC_BASE, abi: ERC20_ABI, method: 'symbol'      })
+  const { data: decimals,    isLoading: l3 } = useReadContract({ address: USDC_BASE, abi: ERC20_ABI, method: 'decimals'    })
+  const { data: totalSupply, isLoading: l4 } = useReadContract({ address: USDC_BASE, abi: ERC20_ABI, method: 'totalSupply' })
+
+  const formatted =
+    totalSupply !== undefined && decimals !== undefined
+      ? (Number(totalSupply) / 10 ** Number(decimals))
+          .toLocaleString(undefined, { maximumFractionDigits: 2 })
+      : undefined
+
+  const synced = !l1 && !l2 && !l3 && !l4
+
+  return (
+    <div className="min-h-screen bg-zinc-950 text-zinc-100">
+
+      {/* ── Header ─────────────────────────────────────── */}
+      <header className="sticky top-0 z-10 border-b border-zinc-800/60 bg-zinc-950/80 backdrop-blur-sm px-6 py-4">
+        <div className="max-w-4xl mx-auto flex items-center justify-between">
+          <div className="flex items-center gap-2.5">
+            <div className="w-5 h-5 rounded-[4px] bg-yellow-400" />
+            <span className="font-mono text-[11px] tracking-[0.2em] text-zinc-400 uppercase">
+              {{project-name}}
+            </span>
+          </div>
+          <div className="flex items-center gap-3">
+            <Badge variant="outline">Base</Badge>
+            <Badge variant={synced ? 'success' : 'loading'}>
+              {synced ? '● Live' : '○ Loading'}
+            </Badge>
+            <ConnectButton />
+          </div>
+        </div>
+      </header>
+
+      <main className="max-w-4xl mx-auto px-6 py-12">
+
+        {/* ── Hero ───────────────────────────────────────── */}
+        <div className="mb-10">
+          <Badge variant="outline" className="mb-5">Awarizon Web3 SDK · Next.js</Badge>
+          <h1 className="text-4xl font-bold tracking-tight text-white mb-3">{{ProjectName}}</h1>
+          <p className="text-zinc-400 text-base max-w-lg leading-relaxed">
+            Live on-chain reads from Base — no backend required. Built with{' '}
+            <code className="font-mono text-[11px] text-yellow-400/80">@awarizon/react</code>.
+          </p>
+        </div>
+
+        {/* ── Data grid ──────────────────────────────────── */}
+        <div className="grid md:grid-cols-3 gap-4 mb-4">
+
+          <Card className="md:col-span-2">
+            <div className="flex items-start justify-between mb-4">
+              <div>
+                <p className="font-mono text-[9px] tracking-widest text-zinc-600 uppercase mb-1.5">
+                  Contract · Live Read
+                </p>
+                <code className="font-mono text-xs text-zinc-500">0x8335…2913 · Base</code>
+              </div>
+              <Badge variant={synced ? 'success' : 'loading'}>
+                {synced ? 'Synced' : 'Fetching…'}
+              </Badge>
+            </div>
+            <DataRow label="name()"        value={name}        loading={l1} />
+            <DataRow label="symbol()"      value={symbol}      loading={l2} />
+            <DataRow label="decimals()"    value={String(decimals ?? '')} loading={l3} />
+            <DataRow label="totalSupply()" value={formatted}   loading={l4} />
+          </Card>
+
+          <div className="flex flex-col gap-4">
+            <StatCard label="Total Supply" value={formatted}       loading={l4} sub="USDC · formatted" className="flex-1" />
+            <StatCard label="Token"        value={symbol}          loading={l2} sub="Base mainnet"     className="flex-1" />
+          </div>
+        </div>
+
+        {/* ── Network info ─────────────────────────────────── */}
+        <div className="grid sm:grid-cols-3 gap-4 mb-4">
+          {[
+            { label: 'Network',  value: 'Base Mainnet'    },
+            { label: 'Chain ID', value: '8453'            },
+            { label: 'SDK',      value: '@awarizon/react' },
+          ].map(({ label, value }) => (
+            <div
+              key={label}
+              className="bg-zinc-900/50 border border-zinc-800/40 rounded-xl px-5 py-4 flex items-center justify-between"
+            >
+              <span className="font-mono text-[10px] text-zinc-600 uppercase tracking-widest">{label}</span>
+              <code className="font-mono text-xs text-zinc-400">{value}</code>
+            </div>
+          ))}
+        </div>
+
+        {/* ── Next steps ──────────────────────────────────── */}
+        <Card>
+          <p className="font-mono text-[9px] tracking-widest text-zinc-600 uppercase mb-4">Next Steps</p>
+          <ul className="space-y-3 mb-6">
+            {[
+              ['01', 'Replace USDC_BASE with your contract address'],
+              ['02', 'Swap ERC20_ABI for your contract ABI'],
+              ['03', 'Change chain="base" in app/layout.jsx to your target network'],
+              ['04', 'Use useWriteContract() for transactions'],
+              ['05', 'Add walletConnectProjectId to AwarizonProvider for mobile wallet support'],
+            ].map(([n, s]) => (
+              <li key={n} className="flex items-start gap-3">
+                <span className="font-mono text-[10px] text-yellow-400/50 mt-0.5 shrink-0 select-none">{n}</span>
+                <span className="text-sm text-zinc-400 leading-relaxed">{s}</span>
+              </li>
+            ))}
+          </ul>
+          <div className="flex flex-wrap gap-2">
+            <Button href="https://awarizon.com/docs" target="_blank" rel="noreferrer">Read the docs →</Button>
+            <Button href="https://awarizon.com/dashboard" target="_blank" rel="noreferrer" variant="secondary">Dashboard</Button>
+          </div>
+        </Card>
+      </main>
+    </div>
+  )
+}

package/templates/nextjs-js/components/ui/Badge.jsx

@@ -0,0 +1,24 @@
+import { cn } from '@/lib/utils'
+
+/** @type {Record<string, string>} */
+const variants = {
+  default: 'bg-zinc-800 text-zinc-400',
+  success: 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20',
+  loading: 'bg-yellow-500/10 text-yellow-400 border border-yellow-500/20',
+  warning: 'bg-amber-500/10 text-amber-400 border border-amber-500/20',
+  outline: 'border border-zinc-700 text-zinc-400',
+}
+
+export function Badge({ children, variant = 'default', className }) {
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center font-mono text-[10px] tracking-widest px-2 py-1 rounded-md uppercase',
+        variants[variant],
+        className,
+      )}
+    >
+      {children}
+    </span>
+  )
+}

package/templates/nextjs-js/components/ui/Button.jsx

@@ -0,0 +1,25 @@
+import { cn } from '@/lib/utils'
+
+/** @type {Record<string, string>} */
+const variants = {
+  primary:   'bg-yellow-400 text-black hover:bg-yellow-300 active:bg-yellow-500',
+  secondary: 'bg-zinc-800 text-zinc-200 border border-zinc-700 hover:bg-zinc-700 hover:text-white',
+  ghost:     'text-zinc-400 hover:text-white',
+}
+
+const base = 'inline-flex items-center gap-1.5 font-mono text-[11px] tracking-widest px-4 py-2.5 rounded-lg transition-colors cursor-pointer'
+
+export function Button({ variant = 'primary', className, children, href, ...props }) {
+  if (href !== undefined) {
+    return (
+      <a href={href} className={cn(base, variants[variant], className)} {...props}>
+        {children}
+      </a>
+    )
+  }
+  return (
+    <button type="button" className={cn(base, variants[variant], className)} {...props}>
+      {children}
+    </button>
+  )
+}

package/templates/nextjs-js/components/ui/Card.jsx

@@ -0,0 +1,9 @@
+import { cn } from '@/lib/utils'
+
+export function Card({ children, className }) {
+  return (
+    <div className={cn('bg-zinc-900 border border-zinc-800/60 rounded-xl p-5', className)}>
+      {children}
+    </div>
+  )
+}

package/templates/nextjs-js/components/ui/Skeleton.jsx

@@ -0,0 +1,7 @@
+import { cn } from '@/lib/utils'
+
+export function Skeleton({ className }) {
+  return (
+    <div className={cn('animate-pulse rounded-md bg-zinc-800', className)} />
+  )
+}

package/templates/nextjs-js/components/ui/StatCard.jsx

@@ -0,0 +1,16 @@
+import { cn } from '@/lib/utils'
+import { Skeleton } from './Skeleton'
+
+export function StatCard({ label, value, sub, loading, className }) {
+  return (
+    <div className={cn('bg-zinc-900 border border-zinc-800/60 rounded-xl p-5 flex flex-col', className)}>
+      <p className="font-mono text-[9px] tracking-widest text-zinc-600 uppercase mb-3">{label}</p>
+      {loading
+        ? <Skeleton className="h-7 w-3/4" />
+        : <p className="font-mono text-xl font-semibold text-white truncate">{value ?? '—'}</p>}
+      {sub && (
+        <p className="font-mono text-[10px] text-zinc-600 mt-2">{sub}</p>
+      )}
+    </div>
+  )
+}

package/templates/nextjs-js/jsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": { "@/*": ["./*"] }
+  },
+  "include": ["next-env.d.ts", "**/*.js", "**/*.jsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/templates/nextjs-js/lib/awarizon.js

@@ -0,0 +1,7 @@
+import { AwarizonWeb3 } from '@awarizon/web3'
+
+// Server-side SDK instance (Server Components, API routes, server actions)
+export const awz = new AwarizonWeb3({
+  chain:  'base',
+  apiKey: process.env.AWARIZON_API_KEY,
+})

package/templates/nextjs-js/lib/utils.js

@@ -0,0 +1,3 @@
+export function cn(...classes) {
+  return classes.filter(Boolean).join(' ')
+}

package/templates/nextjs-js/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig

package/templates/nextjs-js/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "{{project-name}}",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev":   "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint":  "next lint"
+  },
+  "dependencies": {
+    "@awarizon/react":    "latest",
+    "@awarizon/web3":     "latest",
+    "next":               "14.2.5",
+    "react":              "^18",
+    "react-dom":          "^18"
+  },
+  "devDependencies": {
+    "eslint":             "^8",
+    "eslint-config-next": "14.2.5",
+    "autoprefixer":       "^10.4.19",
+    "postcss":            "^8.4.38",
+    "tailwindcss":        "^3.4.4"
+  }
+}

package/templates/nextjs-js/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/templates/nextjs-js/tailwind.config.js

@@ -0,0 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './app/**/*.{js,jsx}',
+    './components/**/*.{js,jsx}',
+    './lib/**/*.{js,jsx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        accent: '#FFE500',
+      },
+    },
+  },
+  plugins: [],
+}

package/templates/react/.env

@@ -0,0 +1 @@
+VITE_AWARIZON_API_KEY={{API_KEY}}

package/templates/react/.env.example

@@ -0,0 +1,7 @@
+# Get your API key at https://awarizon.com/dashboard/api-keys
+# Vite exposes variables prefixed with VITE_ to the browser
+VITE_AWARIZON_API_KEY={{API_KEY}}
+
+# Optional: enable WalletConnect for mobile wallet support (ConnectButton)
+# Get a free project ID at https://cloud.walletconnect.com
+VITE_WALLETCONNECT_PROJECT_ID=

package/templates/react/_gitignore

@@ -0,0 +1,3 @@
+.env
+node_modules/
+dist/

package/templates/react/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{ProjectName}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/react/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "{{project-name}}",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev":     "vite",
+    "build":   "tsc -b && vite build",
+    "preview": "vite preview",
+    "lint":    "eslint ."
+  },
+  "dependencies": {
+    "@awarizon/react": "latest",
+    "@awarizon/web3":  "latest",
+    "react":           "^18.3.1",
+    "react-dom":       "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react":         "^18.3.1",
+    "@types/react-dom":     "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.1",
+    "typescript":           "^5.5.3",
+    "vite":                 "^5.4.1",
+    "autoprefixer":         "^10.4.19",
+    "postcss":              "^8.4.38",
+    "tailwindcss":          "^3.4.4"
+  }
+}

package/templates/react/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/templates/react/src/App.tsx

@@ -0,0 +1,166 @@
+import { useReadContract, ConnectButton } from '@awarizon/react'
+import { ERC20_ABI } from '@awarizon/web3'
+import { Badge }    from './components/ui/Badge'
+import { Button }   from './components/ui/Button'
+import { Card }     from './components/ui/Card'
+import { Skeleton } from './components/ui/Skeleton'
+import { StatCard } from './components/ui/StatCard'
+
+const USDC_BASE = '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913'
+
+function DataRow({ label, value, loading }: { label: string; value?: string; loading: boolean }) {
+  return (
+    <div className="flex items-center justify-between py-3 border-b border-zinc-800/50 last:border-0">
+      <code className="text-[11px] text-yellow-400/70 font-mono">{label}</code>
+      {loading
+        ? <Skeleton className="h-3.5 w-28" />
+        : <span className="font-mono text-xs text-zinc-300">{value ?? '—'}</span>}
+    </div>
+  )
+}
+
+export default function App() {
+  const { data: name,        isLoading: l1 } = useReadContract({ address: USDC_BASE, abi: ERC20_ABI, method: 'name'        })
+  const { data: symbol,      isLoading: l2 } = useReadContract({ address: USDC_BASE, abi: ERC20_ABI, method: 'symbol'      })
+  const { data: decimals,    isLoading: l3 } = useReadContract({ address: USDC_BASE, abi: ERC20_ABI, method: 'decimals'    })
+  const { data: totalSupply, isLoading: l4 } = useReadContract({ address: USDC_BASE, abi: ERC20_ABI, method: 'totalSupply' })
+
+  const formatted =
+    totalSupply !== undefined && decimals !== undefined
+      ? (Number(totalSupply as bigint) / 10 ** Number(decimals as bigint))
+          .toLocaleString(undefined, { maximumFractionDigits: 2 })
+      : undefined
+
+  const synced = !l1 && !l2 && !l3 && !l4
+
+  return (
+    <div className="min-h-screen bg-zinc-950 text-zinc-100">
+
+      {/* ── Header ─────────────────────────────────────── */}
+      <header className="sticky top-0 z-10 border-b border-zinc-800/60 bg-zinc-950/80 backdrop-blur-sm px-6 py-4">
+        <div className="max-w-4xl mx-auto flex items-center justify-between">
+          <div className="flex items-center gap-2.5">
+            <div className="w-5 h-5 rounded-[4px] bg-yellow-400" />
+            <span className="font-mono text-[11px] tracking-[0.2em] text-zinc-400 uppercase">
+              {{project-name}}
+            </span>
+          </div>
+          <div className="flex items-center gap-3">
+            <Badge variant="outline">Base</Badge>
+            <Badge variant={synced ? 'success' : 'loading'}>
+              {synced ? '● Live' : '○ Loading'}
+            </Badge>
+            <ConnectButton />
+          </div>
+        </div>
+      </header>
+
+      <main className="max-w-4xl mx-auto px-6 py-12">
+
+        {/* ── Hero ───────────────────────────────────────── */}
+        <div className="mb-10">
+          <Badge variant="outline" className="mb-5">Awarizon Web3 SDK · React + Vite</Badge>
+          <h1 className="text-4xl font-bold tracking-tight text-white mb-3">{{ProjectName}}</h1>
+          <p className="text-zinc-400 text-base max-w-lg leading-relaxed">
+            Live on-chain reads from Base — no backend required. Built with{' '}
+            <code className="font-mono text-[11px] text-yellow-400/80">@awarizon/react</code>.
+          </p>
+        </div>
+
+        {/* ── Data grid ──────────────────────────────────── */}
+        <div className="grid md:grid-cols-3 gap-4 mb-4">
+
+          {/* Contract reader — spans 2 cols */}
+          <Card className="md:col-span-2">
+            <div className="flex items-start justify-between mb-4">
+              <div>
+                <p className="font-mono text-[9px] tracking-widest text-zinc-600 uppercase mb-1.5">
+                  Contract · Live Read
+                </p>
+                <code className="font-mono text-xs text-zinc-500">
+                  0x8335…2913 · Base
+                </code>
+              </div>
+              <Badge variant={synced ? 'success' : 'loading'}>
+                {synced ? 'Synced' : 'Fetching…'}
+              </Badge>
+            </div>
+            <DataRow label="name()"        value={name as string}         loading={l1} />
+            <DataRow label="symbol()"      value={symbol as string}       loading={l2} />
+            <DataRow label="decimals()"    value={String(decimals ?? '')} loading={l3} />
+            <DataRow label="totalSupply()" value={formatted}              loading={l4} />
+          </Card>
+
+          {/* Stat column */}
+          <div className="flex flex-col gap-4">
+            <StatCard
+              label="Total Supply"
+              value={formatted}
+              loading={l4}
+              sub="USDC · formatted"
+              className="flex-1"
+            />
+            <StatCard
+              label="Token"
+              value={symbol as string}
+              loading={l2}
+              sub="Base mainnet"
+              className="flex-1"
+            />
+          </div>
+        </div>
+
+        {/* ── Network info ────────────────────────────────── */}
+        <div className="grid sm:grid-cols-3 gap-4 mb-4">
+          {[
+            { label: 'Network',  value: 'Base Mainnet'     },
+            { label: 'Chain ID', value: '8453'             },
+            { label: 'SDK',      value: '@awarizon/react'  },
+          ].map(({ label, value }) => (
+            <div
+              key={label}
+              className="bg-zinc-900/50 border border-zinc-800/40 rounded-xl px-5 py-4 flex items-center justify-between"
+            >
+              <span className="font-mono text-[10px] text-zinc-600 uppercase tracking-widest">{label}</span>
+              <code className="font-mono text-xs text-zinc-400">{value}</code>
+            </div>
+          ))}
+        </div>
+
+        {/* ── Next steps ──────────────────────────────────── */}
+        <Card>
+          <p className="font-mono text-[9px] tracking-widest text-zinc-600 uppercase mb-4">
+            Next Steps
+          </p>
+          <ul className="space-y-3 mb-6">
+            {[
+              ['01', 'Replace USDC_BASE with your contract address'],
+              ['02', 'Swap ERC20_ABI for your contract ABI'],
+              ['03', 'Change chain="base" in src/main.tsx to your target network'],
+              ['04', 'Use useWriteContract() for send transactions'],
+              ['05', 'Add walletConnectProjectId to AwarizonProvider for mobile wallet support'],
+            ].map(([n, s]) => (
+              <li key={n} className="flex items-start gap-3">
+                <span className="font-mono text-[10px] text-yellow-400/50 mt-0.5 shrink-0 select-none">{n}</span>
+                <span className="text-sm text-zinc-400 leading-relaxed">{s}</span>
+              </li>
+            ))}
+          </ul>
+          <div className="flex flex-wrap gap-2">
+            <Button href="https://awarizon.com/docs" target="_blank" rel="noreferrer">
+              Read the docs →
+            </Button>
+            <Button
+              href="https://awarizon.com/dashboard"
+              target="_blank"
+              rel="noreferrer"
+              variant="secondary"
+            >
+              Dashboard
+            </Button>
+          </div>
+        </Card>
+      </main>
+    </div>
+  )
+}

package/templates/react/src/components/ui/Badge.tsx

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react'
+import { cn } from '../../lib/utils'
+
+type BadgeVariant = 'default' | 'success' | 'loading' | 'warning' | 'outline'
+
+interface BadgeProps {
+  children: ReactNode
+  variant?: BadgeVariant
+  className?: string
+}
+
+const variants: Record<BadgeVariant, string> = {
+  default: 'bg-zinc-800 text-zinc-400',
+  success: 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20',
+  loading: 'bg-yellow-500/10 text-yellow-400 border border-yellow-500/20',
+  warning: 'bg-amber-500/10 text-amber-400 border border-amber-500/20',
+  outline: 'border border-zinc-700 text-zinc-400',
+}
+
+export function Badge({ children, variant = 'default', className }: BadgeProps) {
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center font-mono text-[10px] tracking-widest px-2 py-1 rounded-md uppercase',
+        variants[variant],
+        className,
+      )}
+    >
+      {children}
+    </span>
+  )
+}

package/templates/react/src/components/ui/Button.tsx

@@ -0,0 +1,43 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react'
+import { cn } from '../../lib/utils'
+
+type ButtonVariant = 'primary' | 'secondary' | 'ghost'
+
+const variants: Record<ButtonVariant, string> = {
+  primary:   'bg-yellow-400 text-black hover:bg-yellow-300 active:bg-yellow-500',
+  secondary: 'bg-zinc-800 text-zinc-200 border border-zinc-700 hover:bg-zinc-700 hover:text-white',
+  ghost:     'text-zinc-400 hover:text-white',
+}
+
+const base = 'inline-flex items-center gap-1.5 font-mono text-[11px] tracking-widest px-4 py-2.5 rounded-lg transition-colors cursor-pointer'
+
+interface AsAnchorProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  href: string
+  variant?: ButtonVariant
+  children: ReactNode
+}
+
+interface AsButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  href?: never
+  variant?: ButtonVariant
+  children: ReactNode
+}
+
+type ButtonProps = AsAnchorProps | AsButtonProps
+
+export function Button({ variant = 'primary', className, children, ...props }: ButtonProps) {
+  if ('href' in props && props.href !== undefined) {
+    const { href, ...rest } = props as AsAnchorProps
+    return (
+      <a href={href} className={cn(base, variants[variant], className)} {...rest}>
+        {children}
+      </a>
+    )
+  }
+  const { ...rest } = props as AsButtonProps
+  return (
+    <button type="button" className={cn(base, variants[variant], className)} {...rest}>
+      {children}
+    </button>
+  )
+}

package/templates/react/src/components/ui/Card.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react'
+import { cn } from '../../lib/utils'
+
+interface CardProps {
+  children: ReactNode
+  className?: string
+}
+
+export function Card({ children, className }: CardProps) {
+  return (
+    <div className={cn('bg-zinc-900 border border-zinc-800/60 rounded-xl p-5', className)}>
+      {children}
+    </div>
+  )
+}