dc:"ExplicitChatIdProvider" dd:I[903690,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$5e","$5f","$60","$61","$62"],"$dc"] de:I[838238,["$30","$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$5e","$5f","$60","$61","$62"],"SWRDataProvider"] df:T5f305,[V0_FILE]plaintext:file=".gitignore" isMerged="true" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts .env*.local [V0_FILE]markdown:file="README.md" isMerged="true" # NeonAuth with Stripe Integration This project combines StackAuth authentication with Neon database and Stripe subscription management. ## Overview - **Authentication**: Secure user authentication via StackAuth with NeonAuth integration - **Database**: User data stored in Neon PostgreSQL - **Payments**: Subscription management with Stripe - **Features**: User profiles, theme customization, email management ## Setting Up on v0 ### Step 1: Fork the Project 1. Click the "Fork" button in the v0 interface to create your own copy of this project 2. Give your project a name and description ### Step 2: Connect Neon Database 1. v0 will automatically prompt you to create or connect a Neon database 2. Follow the prompts to connect your Neon database to the project 3. All necessary environment variables will be automatically configured ### Step 3: Set Up NeonAuth in Neon Dashboard 1. After connecting your Neon database, go to the [Neon dashboard](https://console.neon.tech/) 2. Navigate to your project 3. In the sidebar, find and select "NeonAuth" 4. Follow the setup wizard to configure StackAuth: - Create a new StackAuth project if you don't have one - Connect your existing StackAuth project if you already have one 5. The NeonAuth setup will automatically: - Create the `neon_auth.users_sync` table - Configure the synchronization between StackAuth and your Neon database - Set up the necessary environment variables for StackAuth ### Step 4: Set Up Stripe 1. Create an account at [Stripe](https://stripe.com/) 2. Get your API keys from the Stripe dashboard 3. Add your Stripe secret key to the environment variables in v0: - `STRIPE_SECRET_KEY`: Your Stripe secret key 4. Create a product and price in the Stripe dashboard 5. Update the price ID in `app/api/stripe/plans.ts` \`\`\`typescript // In app/api/stripe/plans.ts const defaultPlans = [ { id: "FREE", priceId: undefined, // ... }, { id: "PRO", priceId: "YOUR_PRICE_ID_HERE", // Replace with your Stripe price ID // ... }, ] \`\`\` ### Step 5: Register Stripe Webhook After deploying your application, run the webhook registration script to set up Stripe webhooks: \`\`\`bash # Make sure your environment variables are set npx tsx register-webhook.ts \`\`\` This will: 1. Register a webhook endpoint with Stripe 2. Configure it to listen for subscription events 3. Provide you with a webhook secret Add the webhook secret to your environment variables as `STRIPE_WEBHOOK_SECRET`. ## Understanding NeonAuth NeonAuth is a feature of Neon that integrates with StackAuth to: 1. Automatically sync user data from StackAuth to your Neon database 2. Create and maintain a `neon_auth.users_sync` table with user information 3. Allow you to join user data with your application tables Example of querying user data: \`\`\`sql -- Get all active users SELECT * FROM neon_auth.users_sync WHERE deleted_at IS NULL; -- Join with application data SELECT t.*, u.id AS user_id, u.name AS user_name, u.email AS user_email FROM public.todos t LEFT JOIN neon_auth.users_sync u ON t.owner = u.id WHERE u.deleted_at IS NULL; \`\`\` ## Local Development For local development with Stripe webhooks, use the Stripe CLI: \`\`\`bash stripe listen --forward-to http://localhost:3000/api/stripe \`\`\` ## Project Structure - `/app`: Next.js App Router pages and components - `/app/api`: API routes including Stripe webhook handler - `/app/components`: Reusable UI components - `/lib`: Utility functions and database client - `/stack.ts`: StackAuth configuration ## Customization ### Modifying Subscription Plans Edit the plans in `app/api/stripe/plans.ts` to change the available subscription tiers and their features. ## Stripe Webhook Setup To enable Stripe webhooks for subscription management, you need to register a webhook endpoint with Stripe. This project includes a script to automate this process. ### Register Webhook Run the following command to register a webhook with Stripe: \`\`\`bash # Make sure your Stripe secret key and deployment URL are set in your environment npx tsx register-webhook.ts \`\`\` The script will: 1. Check if a webhook already exists for your URL 2. Create a new webhook or update an existing one 3. Configure it to listen for relevant subscription events 4. Provide you with a webhook secret **Important:** Add the webhook secret to your environment variables. [V0_FILE]typescriptreact:file="app/(auth)/layout.tsx" isMerged="true" import type React from "react" import "@/app/globals.css" import { StackProvider, StackTheme } from "@stackframe/stack" import { stackServerApp } from "@/stack" import { ThemeProvider } from "@/components/theme-provider" export default function AuthLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="app/(auth)/sign-in/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/(auth)/sign-in/page.tsx" isMerged="true" 'use client' import { LoginForm } from '@/components/login-form' import { useRouter, useSearchParams } from 'next/navigation' export default function SignInPage() { const router = useRouter() const searchParams = useSearchParams() const redirectUrl = searchParams.get('redirect') || '/' const handleToggleForm = () => { router.push(`/sign-up${redirectUrl ? `?redirect=${redirectUrl}` : ''}`) } return (

Neon + StackAuth Login

) } [V0_FILE]typescriptreact:file="app/(auth)/sign-up/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/(auth)/sign-up/page.tsx" isMerged="true" 'use client' import { SignupForm } from '@/components/signup-form' import { useRouter, useSearchParams } from 'next/navigation' export default function SignUpPage() { const router = useRouter() const searchParams = useSearchParams() const redirectUrl = searchParams.get('redirect') || '/' const handleToggleForm = () => { router.push(`/sign-in${redirectUrl ? `?redirect=${redirectUrl}` : ''}`) } return (

Neon + StackAuth Login

) } [V0_FILE]typescriptreact:file="app/api/notifications/README.md" isMerged="true" # Notifications System A Redis-based notification system for real-time task updates. Uses Redis sorted sets for notifications and Redis sets for watchers. ## Architecture ### Fan-out System The notification system uses a fan-out on write approach, where notifications are dispatched to all watchers at the time of the event: 1. **Watcher Management** - Each task has a Redis Set (`watchers:{taskId}`) containing user IDs - O(1) membership checks for efficient watcher validation - O(1) add/remove operations for watch toggling 2. **Notification Storage** - Uses Redis Sorted Set (`notifications`) for time-based operations - Score: timestamp in milliseconds - Member: JSON stringified notification object - Enables efficient range queries for "notifications since X" - O(log N) insertion, O(log N + M) range queries where M is result size 3. **Fan-out Process** \`\`\`ts async function notifyWatchers({ taskId, message, type = 'info' }) { // 1. Get all watchers O(N) const watchers = await getTaskWatchers({ taskId }) // 2. Fan out to each watcher O(N * log M) where M is notifications size await Promise.all( watchers.map((userId) => createNotification({ userId, message, type, taskId, }), ), ) } \`\`\` ### Key Design Decisions 1. **Why Redis Sets for Watchers** - Fast membership checks for watch status - Automatic deduplication of watchers - Space efficient for large watcher lists 2. **Why Sorted Sets for Notifications** - Natural time-based ordering - Efficient pagination and "since" queries - Score (timestamp) enables version control for polling 3. **Why Fan-out on Write** - Immediate consistency for real-time updates - Simpler read path (no aggregation needed) - Trade-off: Higher write latency for faster reads ## Storage - Notifications: Stored in Redis sorted set with timestamp as score - Watchers: Stored in Redis sets (one set per task) ## Features - Real-time notifications for task updates - Watch/unwatch tasks - Mark notifications as read/unread - Notification types: success, warning, info ## Usage ### Watching Tasks \`\`\`ts // Add a watcher await watchTask({ taskId, userId, }) // Remove a watcher await unwatchTask({ taskId, userId, }) // Get all watchers const watchers = await getTaskWatchers({ taskId }) \`\`\` ### Notifications \`\`\`ts // Create a notification await createNotification({ userId, type: 'info', message: 'Task updated', taskId, }) // Notify all watchers await notifyWatchers({ taskId, message: 'Task completed', type: 'success', }) \`\`\` ### Polling for Updates \`\`\`ts // Client-side polling using version (timestamp) for efficiency async function pollNotifications() { const { notifications, version } = await getNotificationsSince({ userId, version: lastVersion, }) lastVersion = version return notifications } \`\`\` ## Where it's used - Authentication and user management system - Basic notification infrastructure ## UI Components - Notifications menu (`app/components/notifications.tsx`): Global notifications dropdown ## Performance Characteristics - Watcher operations: O(1) - Notification creation: O(log N) - Get notifications since: O(log N + M) where M is result size - Fan-out: O(W \* log N) where W is watcher count and N is notification count - Storage: O(N) for notifications, O(W) for watchers per task [V0_FILE]typescript:file="app/api/notifications/[id]/mark-read/route.ts" isMerged="true" import { NextResponse } from 'next/server' import { stackServerApp } from '@/stack' import { markNotificationAsRead } from '@/app/api/notifications/notifications' import { PageProps } from '@/lib/utils' export async function POST( request: Request, { params }: PageProps ) { const user = await stackServerApp.getUser() if (!user) { return new NextResponse('Unauthorized', { status: 401 }) } const { id } = await params if (!id || typeof id !== 'string') { return new NextResponse('Bad Request', { status: 400 }) } try { await markNotificationAsRead({ notificationId: id, userId: user.id}) return NextResponse.json({ success: true }) } catch (error) { console.error('Failed to mark notification as read:', error) return NextResponse.json( { error: 'Failed to mark notification as read' }, { status: 500 } ) } } [V0_FILE]typescript:file="app/api/notifications/mark-all-read/route.ts" isMerged="true" import { NextResponse } from 'next/server' import { stackServerApp } from '@/stack' import { markAllNotificationsAsRead } from '@/app/api/notifications/notifications' export async function POST() { const user = await stackServerApp.getUser() if (!user) { return new NextResponse('Unauthorized', { status: 401 }) } try { await markAllNotificationsAsRead({ userId: user.id }) return NextResponse.json({ success: true }) } catch (error) { console.error('Failed to mark all notifications as read:', error) return NextResponse.json( { error: 'Failed to mark all notifications as read' }, { status: 500 } ) } } [V0_FILE]typescript:file="app/api/notifications/notifications.ts" isMerged="true" import { redis } from '@/lib/redis' import { z } from 'zod' export type NotificationType = 'success' | 'warning' | 'info' export const NotificationSchema = z.object({ id: z.string(), userId: z.string(), type: z.string(), message: z.string(), taskId: z.string(), createdAt: z.string(), read: z.boolean() }) type Notification = z.infer export type CreateNotificationInput = Omit // Helper to get the watchers key for a task function getWatchersKey(taskId: string) { return `watchers:${taskId}` } interface WatchTaskParams { taskId: string userId: string } // Add a watcher to a task export async function watchTask({ taskId, userId }: WatchTaskParams) { const key = getWatchersKey(taskId) await redis.sadd(key, userId) } // Remove a watcher from a task export async function unwatchTask({ taskId, userId }: WatchTaskParams) { const key = getWatchersKey(taskId) await redis.srem(key, userId) } interface GetTaskWatchersParams { taskId: string } // Get all watchers for a task export async function getTaskWatchers({ taskId }: GetTaskWatchersParams) { const key = getWatchersKey(taskId) return await redis.smembers(key) } interface NotifyWatchersParams { taskId: string message: string type?: NotificationType } // Notify all watchers of a task export async function notifyWatchers({ taskId, message, type = 'info' }: NotifyWatchersParams) { const watchers = await getTaskWatchers({ taskId }) await Promise.all( watchers.map(userId => createNotification({ userId, type, message, taskId, }) ) ) } export async function createNotification(notification: CreateNotificationInput) { try { const now = new Date() const stored: Notification = { ...notification, id: `${now.getTime()}-${Math.random().toString(36).slice(2)}`, createdAt: now.toISOString(), read: false, } // Store in Redis sorted set with timestamp as score await redis.zadd('notifications', { score: now.getTime(), member: JSON.stringify(stored) }) return stored } catch (error) { console.error('Failed to create notification:', error) throw error } } interface MarkNotificationAsReadParams { userId: string notificationId: string } export async function markNotificationAsRead({ userId, notificationId }: MarkNotificationAsReadParams) { try { // Get the notification const results = await redis.zrange('notifications', 0, -1) const notification = results .map(r => NotificationSchema.parse(r)) .find(n => n.id === notificationId && n.userId === userId) if (!notification) { throw new Error('Notification not found') } // Update the notification notification.read = true // Remove old version and add updated version with same score const timestamp = new Date(notification.createdAt).getTime() await redis.zremrangebyscore('notifications', timestamp, timestamp) await redis.zadd('notifications', { score: timestamp, member: JSON.stringify(notification) }) return notification } catch (error) { console.error('Failed to mark notification as read:', error) throw error } } interface MarkAllNotificationsAsReadParams { userId: string } export async function markAllNotificationsAsRead({ userId }: MarkAllNotificationsAsReadParams) { try { // Get all notifications for user const results = await redis.zrange('notifications', 0, -1) const notifications = results .map(r => NotificationSchema.parse(r)) .filter(n => n.userId === userId) // Update each notification await Promise.all( notifications.map(async notification => { if (!notification.read) { notification.read = true const timestamp = new Date(notification.createdAt).getTime() await redis.zremrangebyscore('notifications', timestamp, timestamp) await redis.zadd('notifications', { score: timestamp, member: JSON.stringify(notification) }) } }) ) return { success: true } } catch (error) { console.error('Failed to mark all notifications as read:', error) throw error } } interface GetNotificationsSinceParams { userId: string version: number } export async function getNotificationsSince({ userId, version }: GetNotificationsSinceParams) { try { // Get all notifications after the version timestamp const results = await redis.zrange('notifications', version, -1, { rev: true, offset: 0, count: 50 }) const notifications = [] let latestVersion = version for (const result of results) { if (typeof result.taskId === 'number') { result.taskId = String(result.taskId) } const notification = NotificationSchema.parse(result) if (notification.userId === userId) { notifications.push(notification) latestVersion = Math.max(latestVersion, new Date(notification.createdAt).getTime()) } } return { notifications, version: latestVersion } } catch (error) { console.error('Failed to fetch notifications:', error) throw error } } interface GetUnreadCountParams { userId: string } export async function getUnreadCount({ userId }: GetUnreadCountParams) { try { const results = await redis.zrange('notifications', 0, -1) const count = results .map(r => NotificationSchema.parse(r)) .filter(n => n.userId === userId && !n.read) .length return count } catch (error) { console.error('Failed to get unread count:', error) return 0 } } [V0_FILE]typescript:file="app/api/notifications/route.ts" isMerged="true" import { NextResponse } from 'next/server' import { stackServerApp } from '@/stack' import { getNotificationsSince } from './notifications' export async function GET() { const user = await stackServerApp.getUser() if (!user) { return new NextResponse('Unauthorized', { status: 401 }) } try { const { notifications } = await getNotificationsSince({ userId: user.id, version: 0 }) return NextResponse.json(notifications) } catch (error) { console.error('Failed to fetch notifications:', error) return NextResponse.json([], { status: 500 }) } } [V0_FILE]typescript:file="app/api/notifications/since/[version]/route.ts" isMerged="true" import { NextResponse } from 'next/server' import { stackServerApp } from '@/stack' import { getNotificationsSince } from '@/app/api/notifications/notifications' import { PageProps } from '@/lib/utils' export async function GET( request: Request, { params }: PageProps ) { const user = await stackServerApp.getUser() if (!user) { return new NextResponse('Unauthorized', { status: 401 }) } const clientVersion = Number((await params).version) try { const { notifications, version } = await getNotificationsSince({ userId: user.id, version: clientVersion }) return NextResponse.json({ notifications, version }) } catch (error) { console.error('Failed to fetch notifications:', error) return NextResponse.json( { error: 'Failed to fetch notifications' }, { status: 500 } ) } } [V0_FILE]typescript:file="app/api/notifications/unread-count/route.ts" isMerged="true" import { NextResponse } from 'next/server' import { stackServerApp } from '@/stack' import { getUnreadCount } from '@/app/api/notifications/notifications' export async function GET() { const user = await stackServerApp.getUser() if (!user) { return new NextResponse('Unauthorized', { status: 401 }) } try { const count = await getUnreadCount({ userId: user.id }) return NextResponse.json({ count }) } catch (error) { console.error('Failed to fetch unread count:', error) return NextResponse.json({ count: 0 }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/stripe/route.ts" isMerged="true" import { headers } from "next/headers" import { after, NextResponse } from "next/server" import { getStripeCustomerId, processStripeEvent, syncStripeDataToKV } from "@/lib/stripe" import { redirect } from "next/navigation" import { stackServerApp } from "@/stack" // Send users to GET /api/stripe after they complete the checkout process export async function GET() { const user = await stackServerApp.getUser({ or: "redirect" }) if (!user) { return new NextResponse("Not authenticated", { status: 401 }) } const customerId = await getStripeCustomerId(user.id) if (customerId) { await syncStripeDataToKV(customerId) } redirect("/app/settings") } // Send webhooks to POST /api/stripe export async function POST(req: Request) { const body = await req.text() const signature = await headers().then((h) => h.get("Stripe-Signature")) if (!signature) { return new NextResponse("No signature", { status: 400 }) } after(async () => { await processStripeEvent({ body, signature }) }) return new NextResponse(null, { status: 200 }) } [V0_FILE]typescriptreact:file="app/app/layout.tsx" isMerged="true" import type React from "react" import Link from "next/link" import { AppUserSettings } from "@/components/app-user-settings" import { StackProvider, StackTheme } from "@stackframe/stack" import { stackServerApp } from "@/stack" import { NotificationsMenu } from "@/components/notifications" export default async function AppLayout({ children, }: { children: React.ReactNode }) { return (

{/* Top navigation bar */}

NEONAUTH+STRIPE TEMPLATE

{/* Main content */}

{children}

) } [V0_FILE]typescriptreact:file="app/app/settings/account-verify/page.tsx" isMerged="true" import { redirect } from 'next/navigation' import { stackServerApp } from '@/stack' import { verifyContactChannel } from '../profile/actions' import { PageProps } from '@/lib/utils' export default async function AccountPage({ searchParams }: PageProps) { const user = await stackServerApp.getUser({ or: 'redirect' }) const { code } = await searchParams if (code && !Array.isArray(code)) { // Handle contact channel verification await verifyContactChannel({ code }) } redirect('/app/settings/account') } [V0_FILE]typescriptreact:file="app/app/settings/account/loading.tsx" isMerged="true" import { Skeleton } from "@/components/ui/skeleton" import { Separator } from "@/components/ui/separator" export default function AccountSettingsLoading() { return (

{/* Email Settings */}

{/* Email items */} {[1, 2].map((i) => (

{i === 1 && }

{i === 2 && }

))}

{/* Password Settings */}

{/* Danger Zone */}

) } [V0_FILE]typescriptreact:file="app/app/settings/account/page-client.tsx" isMerged="true" 'use client' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' import { AlertTriangle, Mail, Shield, Eye, EyeOff, TrashIcon, Loader2, } from 'lucide-react' import { startTransition, useOptimistic, useRef, useState } from 'react' import { useUser } from '@stackframe/stack' import { updatePassword, deleteAccount, addContactChannel, deleteContactChannel, makePrimaryContactChannel, sendVerificationEmail, } from '../profile/actions' import { Badge } from '@/components/ui/badge' import { Separator } from '@/components/ui/separator' import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, } from '@/components/ui/alert-dialog' import { SubscriptionCard } from '@/components/subscription-card' interface ContactChannel { id: string value: string type: string isPrimary: boolean isVerified: boolean usedForAuth: boolean } interface AccountPageClientProps { contactChannels: ContactChannel[] subscription?: { subscriptionId: string status: string priceId: string currentPeriodStart: number currentPeriodEnd: number cancelAtPeriodEnd: boolean paymentMethod: { brand: string | null last4: string | null } | null } | null plan: { id: string priceId: string | undefined messageLimit: number } rateLimitStatus: { remaining: number reset: number } userId: string email: string name?: string | null } export function AccountPageClient({ contactChannels: serverContactChannels, subscription, plan, rateLimitStatus, userId, email, name, }: AccountPageClientProps) { const user = useUser({ or: 'redirect' }) const formRef = useRef(null) const [passwordError, setPasswordError] = useState(null) const [passwordSuccess, setPasswordSuccess] = useState(null) const [isUpdatingPassword, setIsUpdatingPassword] = useState(false) const [deleteError, setDeleteError] = useState(null) const [showNewPassword, setShowNewPassword] = useState(false) const [showCurrentPassword, setShowCurrentPassword] = useState(false) const [pendingVerificationId, setPendingVerificationId] = useState< string | null >(null) const [verificationErrors, setVerificationErrors] = useState< Record >({}) const [contactChannels, sendChannelEvent] = useOptimistic( serverContactChannels, ( current, event: | { type: 'addEmail'; email: string } | { type: 'removeEmail'; id: string } | { type: 'makePrimary'; id: string }, ) => { switch (event.type) { case 'addEmail': return [ ...current, { id: crypto.randomUUID(), value: event.email, type: 'email', isPrimary: false, isVerified: false, usedForAuth: false, }, ] case 'removeEmail': return current.filter((channel) => channel.id !== event.id) case 'makePrimary': return current.map((channel) => { return { ...channel, isPrimary: channel.id === event.id, usedForAuth: channel.id === event.id, } }) } }, ) return (

{/* Subscription Card */}

{/* Email Settings */}

Email Addresses

Manage the email addresses associated with your account.

{contactChannels.map((channel) => (

{channel.value} {channel.isPrimary && ( Primary )}

{channel.isVerified ? ( channel.isPrimary ? ( !channel.usedForAuth && user.hasPassword ? ( ) : ( Verified ) ) : ( ) ) : (

{ e.preventDefault() const formData = new FormData(e.currentTarget) setPendingVerificationId(channel.id) setVerificationErrors((prev) => ({ ...prev, [channel.id]: '', })) startTransition(async () => { try { await sendVerificationEmail(formData) } catch (error) { setPendingVerificationId(null) setVerificationErrors((prev) => ({ ...prev, [channel.id]: error instanceof Error ? error.message : 'Failed to send verification email', })) } }) }} > {pendingVerificationId === channel.id ? ( Check email ) : verificationErrors[channel.id] ? (

{verificationErrors[channel.id]}

) : ( )}

)} {!channel.isPrimary && ( )}

))}

{/* Password Settings */}

Password

Update your password to keep your account secure.

{ setIsUpdatingPassword(true) setPasswordError(null) setPasswordSuccess(null) try { const result = await updatePassword(formData) if (result.success) { setPasswordSuccess('Password updated successfully') // Reset form fields const form = document.getElementById( 'password-form', ) as HTMLFormElement if (form) form.reset() } else { setPasswordError(result.error) } } catch (error) { setPasswordError( error instanceof Error ? error.message : 'An unexpected error occurred', ) } finally { setIsUpdatingPassword(false) } }} className="p-4 rounded-md bg-muted/50" id="password-form" >

{user.hasPassword ? (

Current Password

{ setPasswordError(null) setPasswordSuccess(null) }} disabled={isUpdatingPassword} className="bg-background border-border focus:bg-background" />

) : null}

New Password

{ setPasswordError(null) setPasswordSuccess(null) }} disabled={isUpdatingPassword} className="bg-background border-border focus:bg-background" />

{passwordError && (

{passwordError}

)} {passwordSuccess && (

{passwordSuccess}

)}

{/* Danger Zone - Simplified */}

Delete Account

Permanently delete your account and all data.

Are you absolutely sure? {deleteError ? ( {deleteError} ) : ( This action cannot be undone. This will permanently delete your account and remove all your data from our servers. )} Cancel

) } [V0_FILE]typescriptreact:file="app/app/settings/account/page.tsx" isMerged="true" import { stackServerApp } from '@/stack' import { AccountPageClient } from './page-client' import { getStripeCustomerId, getStripeCustomer } from '@/lib/stripe' import { getStripePlan } from '@/app/api/stripe/plans' import { getRateLimitStatus } from '@/lib/rate-limit' export default async function AccountPageServer() { const user = await stackServerApp.getUser({ or: 'redirect' }) const contactChannels = await user?.listContactChannels() // Get subscription data and rate limit status const [customerId, plan, rateLimitStatus] = await Promise.all([ getStripeCustomerId(user.id), getStripePlan(user.id), getRateLimitStatus(user.id), ]) const subscription = customerId ? await getStripeCustomer(customerId) : null return (

Account Settings

({ id: channel.id, value: channel.value, type: channel.type, isPrimary: channel.isPrimary, isVerified: channel.isVerified, usedForAuth: channel.usedForAuth, })) ?? [] } subscription={subscription} plan={plan} rateLimitStatus={rateLimitStatus} userId={user.id} email={user.primaryEmail || ''} name={user.displayName} />

) } [V0_FILE]typescript:file="app/app/settings/actions.ts" isMerged="true" "use server" import { redirect } from "next/navigation" import { stackServerApp } from "@/stack" import { createStripeCustomer, getStripeCustomerId, stripe } from "@/lib/stripe" export async function createCheckoutSession() { const user = await stackServerApp.getUser() if (!user) return { error: "Not authenticated" } // Get or create Stripe customer let customerId = await getStripeCustomerId(user.id) if (!customerId) { const customer = await createStripeCustomer({ userId: user.id, email: user.primaryEmail || "", name: user.displayName, }) customerId = customer.id } // Create Stripe checkout session const session = await stripe.checkout.sessions.create({ customer: customerId, payment_method_types: ["card"], line_items: [ { price: "price_1R3aDvLxBMFKq9DZn1vkvwwW", // Replace with your actual price ID quantity: 1, }, ], mode: "subscription", success_url: `${process.env.NEXT_PUBLIC_VERCEL_URL}/app/settings/account`, cancel_url: `${process.env.NEXT_PUBLIC_VERCEL_URL}/app/settings/account`, }) if (!session.url) { throw new Error("Failed to create checkout session") } // Redirect to Stripe Checkout redirect(session.url) } [V0_FILE]typescriptreact:file="app/app/settings/layout.tsx" isMerged="true" import type { ReactNode } from 'react' import Link from 'next/link' import { Button } from '@/components/ui/button' import { cn } from '@/lib/utils' export default function SettingsLayout({ children }: { children: ReactNode }) { // This is a server component, so we need to use the pathname from the request const pathname = typeof window !== 'undefined' ? window.location.pathname : '' return (

{children}

) } [V0_FILE]typescriptreact:file="app/app/settings/loading.tsx" isMerged="true" import { Skeleton } from '@/components/ui/skeleton' export default function SettingsLoading() { return (

) } [V0_FILE]typescript:file="app/app/settings/profile/actions.ts" isMerged="true" "use server" import { stackServerApp } from "@/stack" import { revalidatePath } from "next/cache" import { redirect } from "next/navigation" export async function updatePassword(formData: FormData) { const currentPassword = formData.get("currentPassword") as string const newPassword = formData.get("newPassword") as string if (!newPassword?.trim()) { return { success: false as const, error: "New password is required" } } try { const user = await stackServerApp.getUser() if (!user) { return { success: false as const, error: "Not authenticated" } } // If the user has a password, require the current password if (user.hasPassword && !currentPassword?.trim()) { return { success: false as const, error: "Current password is required" } } // Use the Stack SDK to update the password if (user.hasPassword) { await user.updatePassword({ oldPassword: currentPassword, newPassword: newPassword, }) } else { // For users without a password (e.g., OAuth users) await user.setPassword({ password: newPassword, }) } revalidatePath("/app/settings/profile") return { success: true as const, message: "Password updated successfully" } } catch (error) { console.error("Error updating password:", error) return { success: false as const, error: error instanceof Error ? error.message : "Failed to update password", } } } export async function deleteAccount() { const user = await stackServerApp.getUser() if (!user) { return { success: false as const, error: "Not authenticated" } } await user.delete() redirect("/handler/sign-out") } export async function addContactChannel(formData: FormData) { const email = formData.get("email") as string if (!email) return const user = await stackServerApp.getUser() if (!user) return await user.createContactChannel({ type: "email", value: email, usedForAuth: false }) void revalidatePath("/app/settings/account") } export async function deleteContactChannel(formData: FormData) { const id = formData.get("id") as string if (!id) { throw new Error("No id found") } const user = await stackServerApp.getUser() if (!user) { throw new Error("No user found") } // Use the Stack SDK to delete the contact channel const channels = await user.listContactChannels() const channel = channels.find((c) => c.id === id) if (channel) { await channel.delete() } void revalidatePath("/app/settings/account") } export async function makePrimaryContactChannel(formData: FormData) { const id = formData.get("id") as string if (!id) { throw new Error("No id found") } const user = await stackServerApp.getUser() if (!user) { throw new Error("No user found") } // Use the Stack SDK to update the contact channel const channels = await user.listContactChannels() const channel = channels.find((c) => c.id === id) if (channel) { await channel.update({ isPrimary: true, usedForAuth: true }) } void revalidatePath("/app/settings/account") } export async function sendVerificationEmail(formData: FormData) { const id = formData.get("id") as string if (!id) { throw new Error("No id found") } const user = await stackServerApp.getUser() if (!user) { throw new Error("No user found") } try { // Use the Stack SDK to send verification email const channels = await user.listContactChannels() const channel = channels.find((c) => c.id === id) if (channel) { const callbackUrl = `${process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : "http://localhost:3000"}/app/settings/account-verify` // @ts-expect-error - StackAuth types are not up to date, this supports a callbackUrl await channel.sendVerificationEmail({ callbackUrl }) } void revalidatePath("/app/settings/account") return { success: true } } catch (error) { console.error("Error sending verification email:", error) throw error } } export async function verifyContactChannel({ code }: { code: string }) { try { // Use the Stack SDK to verify the contact channel await stackServerApp.verifyEmail(code) } catch (error) { // If the verification link has already been used, just continue if (error instanceof Error && error.message.includes("already been used")) { return } throw error } } [V0_FILE]typescriptreact:file="app/app/settings/profile/loading.tsx" isMerged="true" import { Skeleton } from "@/components/ui/skeleton" import { Separator } from "@/components/ui/separator" export default function ProfileSettingsLoading() { return (

{/* Profile Settings */}

{/* Appearance Settings */}

) } [V0_FILE]typescriptreact:file="app/app/settings/profile/page-client.tsx" isMerged="true" 'use client' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' import { Users, PaintbrushIcon as PaintBrush } from 'lucide-react' import { useState } from 'react' import { useUser } from '@stackframe/stack' import Image from 'next/image' import { ImageInput } from '@/components/image-input' import { ThemeSelect } from '@/components/theme-toggle' import { Separator } from '@/components/ui/separator' export function ProfilePageClient() { const user = useUser({ or: 'redirect' }) const [profileError, setProfileError] = useState('') const [profileImage, setProfileImage] = useState( user.profileImageUrl, ) return (

Profile Settings

{/* Profile Settings */}

{profileImage ? ( {user.displayName

) : ( )}

{ setProfileError('') setProfileImage(dataUrl) // Update local state immediately user.update({ profileImageUrl: dataUrl }) // Still update on the server }} onError={(error) => setProfileError(error)} />

{/* Appearance Settings */}

Theme Preference

) } [V0_FILE]typescriptreact:file="app/app/settings/profile/page.tsx" isMerged="true" import { ProfilePageClient } from "./page-client" export default async function ProfilePage() { return (

) } [V0_FILE]typescript:file="app/app/settings/route.ts" isMerged="true" import { redirect } from "next/navigation" export function GET() { redirect("/app/settings/account") } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; body { font-family: var(--font-geist-sans), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; } code, pre { font-family: var(--font-geist-mono), monospace; } @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 142 70% 45%; --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 142 70% 45%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 142 70% 45%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 142 70% 45%; --radius: 0.5rem; } .dark { --background: 240 10% 4%; --foreground: 0 0% 98%; --card: 240 10% 12%; --card-foreground: 0 0% 98%; --popover: 240 10% 6%; --popover-foreground: 0 0% 98%; --primary: 142 70% 45%; --primary-foreground: 0 0% 100%; --secondary: 142 70% 45%; --secondary-foreground: 0 0% 98%; --muted: 240 6% 12%; --muted-foreground: 240 5% 64.9%; --accent: 240 6% 12%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 50.6%; --destructive-foreground: 0 0% 98%; --border: 240 6% 24%; --input: 240 6% 14%; --ring: 142 70% 45%; /* Match primary */ } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/handler/[...stack]/page.tsx" isMerged="true" import { StackHandler } from '@stackframe/stack' import { StackProvider, StackTheme } from '@stackframe/stack' import { stackServerApp } from '@/stack' export default function StackHandlerPage(props: any) { return ( ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from 'react' import './globals.css' import { ThemeProvider } from '@/components/theme-provider' import { Toaster } from '@/components/ui/toaster' import { GeistSans } from 'geist/font/sans' import { GeistMono } from 'geist/font/mono' import { TooltipProvider } from '@/components/ui/tooltip' export const metadata = { generator: 'v0.dev', title: 'NeonAuth + Stripe v0 Template', description: 'A template for NeonAuth, Stack Auth, and Stripe integration', } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/loading.tsx" isMerged="true" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { CheckCircle } from 'lucide-react' import { Badge } from '@/components/ui/badge' import { DevChecklistPage } from './template-setup/dev-checklist' import { Button } from '@/components/ui/button' import Link from 'next/link' export default async function Page() { return (

{/* Hero Section */}

Production Ready

NeonAuth + Stripe
v0 Template

Users can log in and pay to unlock premium features.
Give your idea to v0, turn this into your own product, and start collecting payments.

This may not work until the below steps are complete.

{/* Delete this when you're done setting up your project */}

) } [V0_FILE]markdown:file="app/template-setup/README.md" isMerged="true" This directory contains temporary code used for setting up the template It is only used by the homepage `/app/page.tsx` Once all of your integrations are correctly configured, you can delete this directory and turn page.tsx [V0_FILE]typescriptreact:file="app/template-setup/actions.tsx" isMerged="true" "use server" import Stripe from "stripe" import { sql } from "@/lib/db" import { revalidatePath } from "next/cache" import { neon } from "@neondatabase/serverless" export async function getTableStatus() { try { // Check if DATABASE_URL is available first if (!process.env.DATABASE_URL) { console.log("DATABASE_URL not set, skipping table check") return { tables: { users_sync: false, }, } } // Check only users_sync table const tables = ["users_sync"] const results = await Promise.all( tables.map(async (table) => { try { const result = await sql` SELECT EXISTS ( SELECT 1 FROM information_schema.tables WHERE table_schema = 'neon_auth' AND table_name = ${table} ) as exists ` return { table, exists: result[0]?.exists || false } } catch (error) { return { table, exists: false } } }), ) return { tables: Object.fromEntries(results.map(({ table, exists }) => [table, exists])), } } catch (error) { console.error("Error checking table status:", error) return { tables: { users_sync: false, }, } } } export async function checkMigrations() { try { // Check if DATABASE_URL is available first if (!process.env.DATABASE_URL) { console.log("DATABASE_URL not set, skipping migration check") return { tables: { users_sync: false, }, columns: { users_sync_image: false, }, } } // Check only users_sync table const tables = ["users_sync"] const results = await Promise.all( tables.map(async (table) => { try { const result = await sql` SELECT EXISTS ( SELECT 1 FROM information_schema.tables WHERE table_schema = 'neon_auth' AND table_name = ${table} ) as exists ` return { table, exists: result[0]?.exists || false } } catch (error) { return { table, exists: false } } }), ) // Check if image column exists in users_sync table let imageColumnExists = false try { const imageColumnResult = await sql` SELECT EXISTS ( SELECT 1 FROM information_schema.columns WHERE table_schema = 'neon_auth' AND table_name = 'users_sync' AND column_name = 'image' ) as exists ` imageColumnExists = imageColumnResult[0]?.exists || false } catch (error) { imageColumnExists = false } return { tables: Object.fromEntries(results.map(({ table, exists }) => [table, exists])), columns: { users_sync_image: imageColumnExists, }, } } catch (error) { return { tables: { users_sync: false, }, columns: { users_sync_image: false, }, } } } export async function runMigrations(formData: FormData): Promise { try { // Check if DATABASE_URL is available if (!process.env.DATABASE_URL) { console.error("DATABASE_URL environment variable is not set. Please configure your database first.") return } console.log("Setting up client...") // verify the connection is working await sql`SELECT 1` // Running migrations manually... // Add image column to neon_auth.users_sync table if it doesn't exist try { await sql` ALTER TABLE neon_auth.users_sync ADD COLUMN IF NOT EXISTS image text ` console.log("Image column added to users_sync table") } catch (error) { console.log("Image column may already exist or error adding:", error) } console.log("Migrations completed successfully") // Revalidate the page to show updated migration status revalidatePath("/dev-checklist") } catch (error) { console.error("Error running migrations:", error) } } export async function registerStripeWebhook() { try { const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY const VERCEL_URL = process.env.VERCEL_URL if (!STRIPE_SECRET_KEY) { console.error("STRIPE_SECRET_KEY is required") return } if (!VERCEL_URL) { console.error("VERCEL_URL is required") return } // Initialize Stripe const stripe = new Stripe(STRIPE_SECRET_KEY, { apiVersion: "2025-04-30.basil", }) // Define the events to listen for (same as in stripe.dev.ts) const events = [ "checkout.session.completed", "customer.subscription.created", "customer.subscription.updated", "customer.subscription.deleted", "customer.subscription.paused", "customer.subscription.resumed", "customer.subscription.pending_update_applied", "customer.subscription.pending_update_expired", "customer.subscription.trial_will_end", "invoice.paid", "invoice.payment_failed", "invoice.payment_action_required", "invoice.upcoming", "invoice.marked_uncollectible", "invoice.payment_succeeded", "payment_intent.succeeded", "payment_intent.payment_failed", "payment_intent.canceled", ] as Stripe.WebhookEndpointCreateParams.EnabledEvent[] // Construct the webhook URL with https:// prefix const webhookUrl = VERCEL_URL.startsWith("http") ? `${VERCEL_URL}/api/stripe` : `https://${VERCEL_URL}/api/stripe` console.log(`🔄 Registering Stripe webhook for ${webhookUrl}...`) // First, list existing webhooks to avoid duplicates const existingEndpoints = await stripe.webhookEndpoints.list() // Check if we already have a webhook for this URL const existingEndpoint = existingEndpoints.data.find((endpoint) => endpoint.url === webhookUrl) if (existingEndpoint) { console.log(`ℹ️ Webhook already exists for ${webhookUrl}`) console.log(`ℹ️ Webhook ID: ${existingEndpoint.id}`) console.log(`ℹ️ Updating webhook to ensure it has the correct event types...`) await stripe.webhookEndpoints.del(existingEndpoint.id) console.log(`✅ Webhook updated successfully!`) } // Create a new webhook endpoint const result = await stripe.webhookEndpoints.create({ url: webhookUrl, enabled_events: events, description: `Webhook for ${VERCEL_URL}`, }) console.log(`✅ Webhook registered successfully!`) console.log(`ℹ️ Webhook ID: ${result.id}`) console.log(`ℹ️ Webhook Secret: ${result.secret}`) // Store the webhook ID and secret in the environment variables revalidatePath("/dev-checklist") return result } catch (error) { console.error("Error registering webhook:", error instanceof Error ? error.message : "Unknown error occurred") } } export async function resetDatabase(formData: FormData): Promise { try { if (!process.env.DATABASE_URL) { console.error("DATABASE_URL environment variable is not set.") return } console.log("Resetting database...") const connection = neon(process.env.DATABASE_URL) // Execute the commands in sequence await connection`DROP SCHEMA IF EXISTS public CASCADE;` await connection`CREATE SCHEMA public;` await connection`GRANT ALL ON SCHEMA public TO public;` revalidatePath("/dev-checklist") } catch (error) { console.error("Error resetting database:", error) } } [V0_FILE]typescriptreact:file="app/template-setup/api/check-jwks/route.ts" isQuickEdit="true" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { sql } from "@/lib/db" async function getNeonProjectId() { try { if (!process.env.DATABASE_URL) { return { success: false, error: "Database URL not configured" } } const result = await sql`SHOW neon.project_id` if (result.length > 0 && result[0]["neon.project_id"]) { return { success: true, projectId: result[0]["neon.project_id"], } } else { return { success: false, error: "Could not retrieve Neon project ID" } } } catch (error) { return { success: false, error: error instanceof Error ? error.message : "Unknown error", } } } export async function GET(request: NextRequest) { try { // Check required environment variables if (!process.env.NEON_API_KEY) { return NextResponse.json({ error: "NEON_API_KEY not configured" }, { status: 400 }) } // Get project ID const projectIdResult = await getNeonProjectId() if (!projectIdResult.success) { return NextResponse.json({ error: `Failed to get Neon project ID: ${projectIdResult.error}` }, { status: 500 }) } const projectId = projectIdResult.projectId // Make the API call to Neon const response = await fetch(`https://console.neon.tech/api/v2/projects/${projectId}/jwks`, { headers: { Authorization: `Bearer ${process.env.NEON_API_KEY}`, }, }) if (!response.ok) { const errorText = await response.text() return NextResponse.json( { error: `Neon API error: ${response.status} ${errorText}` }, { status: response.status }, ) } const data = await response.json() // Deduplicate JWKS entries based on jwks_url const uniqueJwks = data.jwks ? data.jwks.filter( (jwks: any, index: number, self: any[]) => self.findIndex((j: any) => j.jwks_url === jwks.jwks_url) === index, ) : [] return NextResponse.json({ jwks: uniqueJwks.length > 0, jwksList: uniqueJwks, projectId, }) } catch (error) { console.error("Error checking JWKS:", error) return NextResponse.json({ error: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/template-setup/stripe-webhook-form.tsx" isMerged="true" 'use client' import { useState } from 'react' import { Button } from '@/components/ui/button' import { Webhook, AlertTriangle } from 'lucide-react' import { registerStripeWebhook } from './actions' import { WebhookResultDisplay } from './webhook-result' type WebhookResult = { success: boolean message?: string error?: string webhookId?: string webhookSecret?: string isUpdate?: boolean } export function StripeWebhookForm({ canRegister, webhookSecretExists, }: { canRegister: boolean webhookSecretExists: boolean }) { const [isRegistering, setIsRegistering] = useState(false) const [result, setResult] = useState(null) async function handleRegisterWebhook() { setIsRegistering(true) setResult(null) try { const result = await registerStripeWebhook() if (!result) { throw new Error('Failed to register webhook') } setResult({ success: true, webhookId: result.id, webhookSecret: result.secret, }) } catch (error) { setResult({ success: false, error: error instanceof Error ? error.message : 'An unknown error occurred', }) } finally { setIsRegistering(false) } } if (webhookSecretExists) { return null } return (

{canRegister ? (

) : (

STRIPE_SECRET_KEY and VERCEL_URL required to register webhook

)} {result && }

) } [V0_FILE]typescriptreact:file="app/template-setup/webhook-result.tsx" isMerged="true" 'use client' import { useState } from 'react' import { Alert, AlertDescription } from '@/components/ui/alert' import { CheckCircle, Copy, Check } from 'lucide-react' type WebhookResult = { success: boolean message?: string error?: string webhookId?: string webhookSecret?: string isUpdate?: boolean } export function WebhookResultDisplay({ result }: { result: WebhookResult }) { const [copied, setCopied] = useState(false) const copySecret = () => { if ( result.webhookSecret && result.webhookSecret !== 'Existing webhook secret preserved' ) { navigator.clipboard.writeText( `STRIPE_WEBHOOK_SECRET=${result.webhookSecret}`, ) setCopied(true) setTimeout(() => setCopied(false), 2000) } } if (!result || !result.success || !result.webhookSecret) return null return (


          STRIPE_WEBHOOK_SECRET={result.webhookSecret}

) } [V0_FILE]json:file="components.json" isMerged="true" { "$schema": "https://ui.shadcn.com/schema.json", "style": "default", "rsc": true, "tsx": true, "tailwind": { "config": "tailwind.config.ts", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/app-user-settings.tsx" isMerged="true" "use client" import Link from "next/link" import Image from "next/image" import { Settings, MoreHorizontal } from "lucide-react" import { useUser } from "@stackframe/stack" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Button } from "@/components/ui/button" export function AppUserSettings() { const user = useUser() if (!user) { return (

) } return ( Settings Sign Out ) } [V0_FILE]typescriptreact:file="components/chat.tsx" isMerged="true" "use client" import type { Attachment, UIMessage } from "ai" import { useChat } from "@ai-sdk/react" import { useEffect, useState } from "react" import { fetchWithErrorHandlers } from "@/lib/utils" import { MultimodalInput } from "@/components/multimodal-input" import { Messages } from "./messages" import { toast } from "sonner" import { useSearchParams } from "next/navigation" import { useAutoResume } from "@/hooks/use-auto-resume" import { ChatSDKError } from "@/lib/errors" import { nanoid } from "nanoid" export function Chat({ id, initialMessages, isReadonly, autoResume, }: { id: string initialMessages: Array isReadonly: boolean autoResume: boolean }) { const { messages, setMessages, handleSubmit, input, setInput, append, status, stop, reload, experimental_resume, data, } = useChat({ id, initialMessages, experimental_throttle: 100, sendExtraMessageFields: true, generateId: () => nanoid(), fetch: fetchWithErrorHandlers, experimental_prepareRequestBody: (body) => ({ id, message: body.messages.at(-1), selectedChatModel: "chat-model", }), onError: (error) => { if (error instanceof ChatSDKError) { toast.error(error.message) } }, }) const searchParams = useSearchParams() const query = searchParams.get("query") const [hasAppendedQuery, setHasAppendedQuery] = useState(false) useEffect(() => { if (query && !hasAppendedQuery) { append({ role: "user", content: query, }) setHasAppendedQuery(true) window.history.replaceState({}, "", `/app/${id}`) } }, [query, append, hasAppendedQuery, id]) const [attachments, setAttachments] = useState>([]) useAutoResume({ autoResume, initialMessages, experimental_resume, data, setMessages, }) return (

) } [V0_FILE]typescriptreact:file="components/error-boundary.tsx" isMerged="true" 'use client' import { Component, ReactNode } from 'react' interface ErrorBoundaryState { hasError: boolean error?: Error } interface ErrorBoundaryProps { children: ReactNode fallback?: ReactNode } export class ErrorBoundary extends Component< ErrorBoundaryProps, ErrorBoundaryState > { constructor(props: ErrorBoundaryProps) { super(props) this.state = { hasError: false } } static getDerivedStateFromError(error: Error): ErrorBoundaryState { return { hasError: true, error } } componentDidCatch(error: Error, errorInfo: any) { console.error('Error boundary caught an error:', error, errorInfo) } render() { if (this.state.hasError) { return ( this.props.fallback || (

Something went wrong. Please try refreshing the page.

) ) } return this.props.children } } [V0_FILE]typescriptreact:file="components/image-input.tsx" isMerged="true" "use client" import type React from "react" export function ImageInput({ onChange, onError, maxBytes = 100_000, ...props }: { onChange?: (dataUrl: string) => void onError?: (error: string) => void maxBytes?: number } & Omit, "type" | "onChange" | "onError" | "accept">) { return ( { console.error(e) onError?.("Unknown error") }} onChange={async (e) => { const file = e.target.files?.[0] if (!file) return if (!file.type.startsWith("image/")) { onError?.("Please select a valid image file") return } // Create an image element to load the file const img = new Image() img.src = URL.createObjectURL(file) await new Promise((resolve) => (img.onload = resolve)) const dataUrl = compressImage({ img, maxBytes }) // Cleanup URL.revokeObjectURL(img.src) if (!dataUrl) { onError?.("Failed to process image") return } if (dataUrl.length > maxBytes) { onError?.(`Image is too large. Please select an image under ${Math.floor(maxBytes / 1000)}KB`) return } onChange?.(dataUrl) }} /> ) } function compressImage({ img, maxBytes = 100_000 }: { img: HTMLImageElement; maxBytes?: number }) { // Create canvas for resizing const canvas = document.createElement("canvas") const ctx = canvas.getContext("2d") if (!ctx) return // Calculate new dimensions (max 400px) const maxSize = 400 let width = img.width let height = img.height if (width > height && width > maxSize) { height = (height * maxSize) / width width = maxSize } else if (height > maxSize) { width = (width * maxSize) / height height = maxSize } // Set canvas size and draw resized image canvas.width = width canvas.height = height ctx.drawImage(img, 0, 0, width, height) // Convert to base64 with reduced quality const base64 = canvas.toDataURL("image/jpeg", 0.8) // Check if size is under 100KB, if not reduce quality further let quality = 0.8 let base64String = base64 while (base64String.length > maxBytes && quality > 0.1) { quality -= 0.1 base64String = canvas.toDataURL("image/jpeg", quality) } return base64String } [V0_FILE]typescriptreact:file="components/login-form.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { useStackApp } from "@stackframe/stack" import { useRouter } from "next/navigation" import { AlertCircle } from "lucide-react" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" // Use the exact error codes from the API type ErrorType = "none" | "EMAIL_PASSWORD_MISMATCH" | "INVALID_TOTP_CODE" | "UNKNOWN_ERROR" // Map error codes to their corresponding messages const errorMessages: Record = { none: "", EMAIL_PASSWORD_MISMATCH: "Invalid email or password", INVALID_TOTP_CODE: "Invalid two-factor authentication code", UNKNOWN_ERROR: "Failed to sign in. Please try again.", } // Define loading states type LoadingState = null | "email" | "google" | "github" // Helper function to extract error code from error name function getErrorCodeFromName(name: string): string | null { const match = name.match(/KnownError<([A-Z_]+)>/) return match ? match[1] : null } export function LoginForm({ className, onToggleForm, redirectUrl = "/", ...props }: React.ComponentPropsWithoutRef<"div"> & { onToggleForm?: () => void redirectUrl?: string }) { const app = useStackApp() const router = useRouter() const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [errorType, setErrorType] = useState("none") const [loadingState, setLoadingState] = useState(null) const handleEmailPasswordLogin = async (e: React.FormEvent) => { e.preventDefault() setLoadingState("email") setErrorType("none") const result = await app.signInWithCredential({ email, password, }) console.log("Login result:", result) if (result.status === "error") { const error = result.error console.log("Login error details:", JSON.stringify(error, null, 2)) // Extract error code from error name const errorCode = error.code || (error.name ? getErrorCodeFromName(error.name) : null) // Use the exact error code if it's one we know about if (errorCode === "EMAIL_PASSWORD_MISMATCH" || errorCode === "INVALID_TOTP_CODE") { setErrorType(errorCode as ErrorType) } else { setErrorType("UNKNOWN_ERROR") } setLoadingState(null) } else { router.push(redirectUrl) } } const handleOAuthLogin = async (provider: "google" | "github") => { setLoadingState(provider) setErrorType("none") try { await app.signInWithOAuth(provider) // OAuth redirects automatically on success } catch (err: any) { console.error(`${provider} login error:`, err) setErrorType("UNKNOWN_ERROR") setLoadingState(null) } } return (

Welcome back Login with your account

Or continue with

{errorType !== "none" && ( Error {errorMessages[errorType]} )}

Email setEmail(e.target.value)} />

Password { e.preventDefault() if (email) { app.sendForgotPasswordEmail(email) alert("Password reset email sent. Please check your inbox.") } else { alert("Please enter your email address first.") } }} > Forgot your password?

setPassword(e.target.value)} />

Don't have an account?{" "} { e.preventDefault() router.push("/sign-up") if (onToggleForm) onToggleForm() }} > Sign up

Built by{" "} @jacobmparis {" "} on v0

) } [V0_FILE]typescriptreact:file="components/markdown.tsx" isMerged="true" import Link from 'next/link' import React, { memo } from 'react' import ReactMarkdown, { type Components } from 'react-markdown' import remarkGfm from 'remark-gfm' const components: Partial = { pre: ({ children }) => <>{children}, ol: ({ node, children, ...props }) => { return (

{children} ) }, li: ({ node, children, ...props }) => { return (

{children}

) }, ul: ({ node, children, ...props }) => { return (

{children} ) }, strong: ({ node, children, ...props }) => { return ( {children} ) }, a: ({ node, children, ...props }) => { return ( // @ts-expect-error {children} ) }, h1: ({ node, children, ...props }) => { return (

{children}

) }, h2: ({ node, children, ...props }) => { return (

{children}

) }, h3: ({ node, children, ...props }) => { return (

{children}

) }, h4: ({ node, children, ...props }) => { return (

{children}

) }, h5: ({ node, children, ...props }) => { return (

{children}

) }, h6: ({ node, children, ...props }) => { return (

{children}

) }, } const remarkPlugins = [remarkGfm] const NonMemoizedMarkdown = ({ children }: { children: string }) => { return ( {children} ) } export const Markdown = memo( NonMemoizedMarkdown, (prevProps, nextProps) => prevProps.children === nextProps.children, ) [V0_FILE]typescriptreact:file="components/message-reasoning.tsx" isMerged="true" 'use client' import { useState } from 'react' import { ChevronDown, Loader2 } from 'lucide-react' import { cn } from '@/lib/utils' interface MessageReasoningProps { isLoading: boolean reasoning: string } export function MessageReasoning({ isLoading, reasoning, }: MessageReasoningProps) { const [isExpanded, setIsExpanded] = useState(false) return (

{isLoading ? (

Thinking

) : (

Reasoned for a few seconds

)} {isExpanded && (

{reasoning}

)}

) } [V0_FILE]typescriptreact:file="components/message.tsx" isMerged="true" "use client" import type { UIMessage } from "ai" import { memo, useState } from "react" import { Markdown } from "./markdown" import equal from "fast-deep-equal" import { sanitizeText } from "@/lib/utils" import { Button } from "./ui/button" import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip" import { MessageEditor } from "./message-editor" import { MessageReasoning } from "./message-reasoning" import type { UseChatHelpers } from "@ai-sdk/react" import { PencilIcon, SparklesIcon, User, CopyIcon } from "lucide-react" import { PreviewAttachment } from "./preview-attachment" import { formatDistanceToNow } from "date-fns" import { useCopyToClipboard } from "usehooks-ts" import { toast } from "sonner" const PurePreviewMessage = ({ chatId, message, isLoading, setMessages, reload, isReadonly, requiresScrollPadding, }: { chatId: string message: UIMessage isLoading: boolean setMessages: UseChatHelpers["setMessages"] reload: UseChatHelpers["reload"] isReadonly: boolean requiresScrollPadding: boolean }) => { const [mode, setMode] = useState<"view" | "edit">("view") const [_, copyToClipboard] = useCopyToClipboard() // Check for activity message metadata const isActivityMessage = (message as any).metadata?.isActivity === true if (isActivityMessage) { return (

You{" "} {message.content || (message.parts?.[0] as any)?.text} {formatDistanceToNow(new Date(message.createdAt || new Date()), { addSuffix: true, })}

) } return (

{/* Avatar */}

{message.role === "assistant" ? (

) : (

)}

{/* Content */}

{/* Header */}

{message.role === "assistant" ? "AI Assistant" : "You"} {!isReadonly && (

{formatDistanceToNow(new Date(message.createdAt || new Date()), { addSuffix: true, })} {message.role === "user" && ( Edit message )} {message.role === "assistant" && ( Copy )}

)}

{/* Attachments */} {message.experimental_attachments && message.experimental_attachments.length > 0 && (

{message.experimental_attachments.map((attachment) => ( ))}

)} {/* Message Content */} {message.parts?.map((part, index) => { const key = `message-${message.id}-part-${index}` if (part.type === "reasoning") { return (

) } if (part.type === "text") { if (mode === "edit") { return (

) } return (

{sanitizeText(part.text)}

) } if (part.type === "tool-invocation") { const { toolInvocation } = part const { toolName, toolCallId, state } = toolInvocation if (state === "call") { return (

Tool: {toolName}

{JSON.stringify(toolInvocation.args, null, 2)}

) } if (state === "result") { return (

Result: {toolName}

                      {JSON.stringify(toolInvocation.result, null, 2)}

) } } return null })}

) } export const PreviewMessage = memo(PurePreviewMessage, (prevProps, nextProps) => { if (prevProps.isLoading !== nextProps.isLoading) return false if (prevProps.message.id !== nextProps.message.id) return false if (prevProps.requiresScrollPadding !== nextProps.requiresScrollPadding) return false if (!equal(prevProps.message.parts, nextProps.message.parts)) return false return true }) export const ThinkingMessage = () => { return (

AI Assistant thinking...

Processing your request

) } [V0_FILE]typescriptreact:file="components/messages.tsx" isMerged="true" import type { UIMessage } from 'ai' import { PreviewMessage, ThinkingMessage } from './message' import { memo } from 'react' import equal from 'fast-deep-equal' import type { UseChatHelpers } from '@ai-sdk/react' import { format, isSameDay } from 'date-fns' interface MessagesProps { chatId: string status: UseChatHelpers['status'] messages: Array setMessages: UseChatHelpers['setMessages'] reload: UseChatHelpers['reload'] isReadonly: boolean initialMessages: Array } function PureMessages({ chatId, status, messages, setMessages, reload, isReadonly, initialMessages, }: MessagesProps) { return (

{messages.map((message, index) => { const showDateHeader = index === 0 || !isSameDay( new Date(messages[index - 1].createdAt || new Date()), new Date(message.createdAt || new Date()), ) return (

{showDateHeader && (

{format( new Date(message.createdAt || new Date()), 'MMMM d, yyyy', )}

)}

) })} {status === 'submitted' && messages.length > 0 && messages[messages.length - 1].role === 'user' && messages.length > initialMessages.length && }

) } export const Messages = memo(PureMessages, (prevProps, nextProps) => { if (prevProps.status !== nextProps.status) return false if (prevProps.status && nextProps.status) return false if (prevProps.messages.length !== nextProps.messages.length) return false if (prevProps.initialMessages.length !== nextProps.initialMessages.length) return false if (!equal(prevProps.messages, nextProps.messages)) return false return true }) [V0_FILE]typescriptreact:file="components/preview-attachment.tsx" isMerged="true" import type { Attachment } from 'ai' import { LoaderIcon } from 'lucide-react' export const PreviewAttachment = ({ attachment, isUploading = false, }: { attachment: Attachment isUploading?: boolean }) => { const { name, url, contentType } = attachment return (

{contentType ? ( contentType.startsWith('image') ? ( // NOTE: it is recommended to use next/image for images // eslint-disable-next-line @next/next/no-img-element {name

) : (

) ) : (

)} {isUploading && (

)}

{name}

) } [V0_FILE]typescriptreact:file="components/signup-form.tsx" isMerged="true" 'use client' import type React from 'react' import { useState } from 'react' import { cn } from '@/lib/utils' import { Button } from '@/components/ui/button' import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from '@/components/ui/card' import { useStackApp } from '@stackframe/stack' import { useRouter } from 'next/navigation' // Use the exact error codes from the API type ErrorType = | 'none' | 'USER_EMAIL_ALREADY_EXISTS' | 'PASSWORD_REQUIREMENTS_NOT_MET' | 'UNKNOWN_ERROR' // Map error codes to their corresponding messages const errorMessages: Record string)> = { none: '', USER_EMAIL_ALREADY_EXISTS: (email: string) => `Email "${email}" is already registered. Please sign in instead.`, PASSWORD_REQUIREMENTS_NOT_MET: 'Password does not meet requirements.', UNKNOWN_ERROR: 'Failed to create account. Please try again.', } // Define loading states type LoadingState = null | 'email' | 'google' | 'github' // Helper function to extract error code from error name function getErrorCodeFromName(name: string): string | null { const match = name.match(/KnownError<([A-Z_]+)>/) return match ? match[1] : null } export function SignupForm({ className, onToggleForm, redirectUrl = '/', ...props }: React.ComponentPropsWithoutRef<'div'> & { onToggleForm?: () => void redirectUrl?: string }) { const app = useStackApp() const router = useRouter() const [name, setName] = useState('') const [email, setEmail] = useState('') const [password, setPassword] = useState('') const [errorType, setErrorType] = useState('none') const [loadingState, setLoadingState] = useState(null) const handleSignup = async (e: React.FormEvent) => { e.preventDefault() setLoadingState('email') setErrorType('none') // Call the signup method and directly handle the response const result = await app.signUpWithCredential({ email, password, }) // Log the full response for debugging console.log('Signup result:', result) // Check if result contains error information if (result.status === 'error') { const error = result.error // Log the complete error for debugging console.log('Signup error details:', JSON.stringify(error, null, 2)) // Extract error code from error name const errorCode = error.code || (error.name ? getErrorCodeFromName(error.name) : null) // Use the exact error code if it's one we know about if ( errorCode === 'USER_EMAIL_ALREADY_EXISTS' || errorCode === 'PASSWORD_REQUIREMENTS_NOT_MET' ) { setErrorType(errorCode as ErrorType) } else { setErrorType('UNKNOWN_ERROR') } setLoadingState(null) } else { router.push(redirectUrl) } } const handleOAuthSignup = async (provider: 'google' | 'github') => { setLoadingState(provider) setErrorType('none') try { await app.signInWithOAuth(provider) // OAuth redirects automatically on success } catch (err: any) { console.error(`${provider} signup error:`, err) setErrorType('UNKNOWN_ERROR') setLoadingState(null) } } // Get the error message based on the current error type const errorMessage = errorType === 'USER_EMAIL_ALREADY_EXISTS' ? (errorMessages[errorType] as (email: string) => string)(email) : (errorMessages[errorType] as string) return (

Create an account Sign up to get started

Or continue with

Name setName(e.target.value)} />

Email setEmail(e.target.value)} required />

Password setPassword(e.target.value)} required />

{errorMessage ? (

{errorMessage}

) : null}

Already have an account?{' '}

) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true" 'use client' import { Moon, Sun, Laptop } from 'lucide-react' import { useTheme } from 'next-themes' import { Button } from '@/components/ui/button' import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' import { Label } from './ui/label' import { RadioGroup, RadioGroupItem } from './ui/radio-group' export function ThemeToggle() { const { theme, setTheme } = useTheme() return ( setTheme('light')} className="cursor-pointer" > Light setTheme('dark')} className="cursor-pointer" > Dark setTheme('system')} className="cursor-pointer" > System ) } export function ThemeSelect() { const { theme, setTheme } = useTheme() return (

Light

Dark

System

) } [V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx" isMerged="true" "use client" import * as React from "react" import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" import { cn } from "@/lib/utils" import { buttonVariants } from "@/components/ui/button" const AlertDialog = AlertDialogPrimitive.Root const AlertDialogTrigger = AlertDialogPrimitive.Trigger const AlertDialogPortal = AlertDialogPrimitive.Portal const AlertDialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName const AlertDialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes) => (

) AlertDialogHeader.displayName = "AlertDialogHeader" const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes) => (

) AlertDialogFooter.displayName = "AlertDialogFooter" const AlertDialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName const AlertDialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName const AlertDialogAction = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName const AlertDialogCancel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, } [V0_FILE]typescriptreact:file="components/ui/alert.tsx" isMerged="true" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const alertVariants = cva( "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", { variants: { variant: { default: "bg-background text-foreground", destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", }, }, defaultVariants: { variant: "default", }, } ) const Alert = React.forwardRef< HTMLDivElement, React.HTMLAttributes & VariantProps >(({ className, variant, ...props }, ref) => (

)) Alert.displayName = "Alert" const AlertTitle = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

)) AlertTitle.displayName = "AlertTitle" const AlertDescription = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) AlertDescription.displayName = "AlertDescription" export { Alert, AlertTitle, AlertDescription } [V0_FILE]typescriptreact:file="components/ui/aspect-ratio.tsx" isMerged="true" "use client" import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio" const AspectRatio = AspectRatioPrimitive.Root export { AspectRatio } [V0_FILE]typescriptreact:file="components/ui/avatar.tsx" isMerged="true" "use client" import * as React from "react" import * as AvatarPrimitive from "@radix-ui/react-avatar" import { cn } from "@/lib/utils" const Avatar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Avatar.displayName = AvatarPrimitive.Root.displayName const AvatarImage = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarImage.displayName = AvatarPrimitive.Image.displayName const AvatarFallback = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName export { Avatar, AvatarImage, AvatarFallback } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, } ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return (
) } export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/breadcrumb.tsx" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { ChevronRight, MoreHorizontal } from "lucide-react" import { cn } from "@/lib/utils" const Breadcrumb = React.forwardRef< HTMLElement, React.ComponentPropsWithoutRef<"nav"> & { separator?: React.ReactNode } >(({ ...props }, ref) =>
) Breadcrumb.displayName = "Breadcrumb" const BreadcrumbList = React.forwardRef< HTMLOListElement, React.ComponentPropsWithoutRef<"ol"> >(({ className, ...props }, ref) => (
)) BreadcrumbList.displayName = "BreadcrumbList" const BreadcrumbItem = React.forwardRef< HTMLLIElement, React.ComponentPropsWithoutRef<"li"> >(({ className, ...props }, ref) => (
)) BreadcrumbItem.displayName = "BreadcrumbItem" const BreadcrumbLink = React.forwardRef< HTMLAnchorElement, React.ComponentPropsWithoutRef<"a"> & { asChild?: boolean } >(({ asChild, className, ...props }, ref) => { const Comp = asChild ? Slot : "a" return ( ) }) BreadcrumbLink.displayName = "BreadcrumbLink" const BreadcrumbPage = React.forwardRef< HTMLSpanElement, React.ComponentPropsWithoutRef<"span"> >(({ className, ...props }, ref) => ( )) BreadcrumbPage.displayName = "BreadcrumbPage" const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
) BreadcrumbSeparator.displayName = "BreadcrumbSeparator" const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => ( ) BreadcrumbEllipsis.displayName = "BreadcrumbElipssis" export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-8 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, } ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return ( ) } ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/calendar.tsx" isMerged="true" "use client" import * as React from "react" import { ChevronLeft, ChevronRight } from "lucide-react" import { DayPicker } from "react-day-picker" import { cn } from "@/lib/utils" import { buttonVariants } from "@/components/ui/button" export type CalendarProps = React.ComponentProps function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) { return ( , IconRight: ({ ...props }) => , }} {...props} /> ) } Calendar.displayName = "Calendar" export { Calendar } [V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) Card.displayName = "Card" const CardHeader = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } [V0_FILE]typescriptreact:file="components/ui/carousel.tsx" isMerged="true" "use client" import * as React from "react" import useEmblaCarousel, { type UseEmblaCarouselType, } from "embla-carousel-react" import { ArrowLeft, ArrowRight } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" type CarouselApi = UseEmblaCarouselType[1] type UseCarouselParameters = Parameters type CarouselOptions = UseCarouselParameters[0] type CarouselPlugin = UseCarouselParameters[1] type CarouselProps = { opts?: CarouselOptions plugins?: CarouselPlugin orientation?: "horizontal" | "vertical" setApi?: (api: CarouselApi) => void } type CarouselContextProps = { carouselRef: ReturnType[0] api: ReturnType[1] scrollPrev: () => void scrollNext: () => void canScrollPrev: boolean canScrollNext: boolean } & CarouselProps const CarouselContext = React.createContext(null) function useCarousel() { const context = React.useContext(CarouselContext) if (!context) { throw new Error("useCarousel must be used within a ") } return context } const Carousel = React.forwardRef< HTMLDivElement, React.HTMLAttributes & CarouselProps >( ( { orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref ) => { const [carouselRef, api] = useEmblaCarousel( { ...opts, axis: orientation === "horizontal" ? "x" : "y", }, plugins ) const [canScrollPrev, setCanScrollPrev] = React.useState(false) const [canScrollNext, setCanScrollNext] = React.useState(false) const onSelect = React.useCallback((api: CarouselApi) => { if (!api) { return } setCanScrollPrev(api.canScrollPrev()) setCanScrollNext(api.canScrollNext()) }, []) const scrollPrev = React.useCallback(() => { api?.scrollPrev() }, [api]) const scrollNext = React.useCallback(() => { api?.scrollNext() }, [api]) const handleKeyDown = React.useCallback( (event: React.KeyboardEvent) => { if (event.key === "ArrowLeft") { event.preventDefault() scrollPrev() } else if (event.key === "ArrowRight") { event.preventDefault() scrollNext() } }, [scrollPrev, scrollNext] ) React.useEffect(() => { if (!api || !setApi) { return } setApi(api) }, [api, setApi]) React.useEffect(() => { if (!api) { return } onSelect(api) api.on("reInit", onSelect) api.on("select", onSelect) return () => { api?.off("select", onSelect) } }, [api, onSelect]) return (
{children}
) } ) Carousel.displayName = "Carousel" const CarouselContent = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => { const { carouselRef, orientation } = useCarousel() return (

) }) CarouselContent.displayName = "CarouselContent" const CarouselItem = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => { const { orientation } = useCarousel() return (
) }) CarouselItem.displayName = "CarouselItem" const CarouselPrevious = React.forwardRef< HTMLButtonElement, React.ComponentProps >(({ className, variant = "outline", size = "icon", ...props }, ref) => { const { orientation, scrollPrev, canScrollPrev } = useCarousel() return ( ) }) CarouselPrevious.displayName = "CarouselPrevious" const CarouselNext = React.forwardRef< HTMLButtonElement, React.ComponentProps >(({ className, variant = "outline", size = "icon", ...props }, ref) => { const { orientation, scrollNext, canScrollNext } = useCarousel() return ( ) }) CarouselNext.displayName = "CarouselNext" export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, } [V0_FILE]typescriptreact:file="components/ui/chart.tsx" isMerged="true" "use client" import * as React from "react" import * as RechartsPrimitive from "recharts" import { cn } from "@/lib/utils" // Format: { THEME_NAME: CSS_SELECTOR } const THEMES = { light: "", dark: ".dark" } as const export type ChartConfig = { [k in string]: { label?: React.ReactNode icon?: React.ComponentType } & ( | { color?: string; theme?: never } | { color?: never; theme: Record } ) } type ChartContextProps = { config: ChartConfig } const ChartContext = React.createContext(null) function useChart() { const context = React.useContext(ChartContext) if (!context) { throw new Error("useChart must be used within a ") } return context } const ChartContainer = React.forwardRef< HTMLDivElement, React.ComponentProps<"div"> & { config: ChartConfig children: React.ComponentProps< typeof RechartsPrimitive.ResponsiveContainer >["children"] } >(({ id, className, children, config, ...props }, ref) => { const uniqueId = React.useId() const chartId = `chart-${id || uniqueId.replace(/:/g, "")}` return (
{children}
) }) ChartContainer.displayName = "Chart" const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { const colorConfig = Object.entries(config).filter( ([_, config]) => config.theme || config.color ) if (!colorConfig.length) { return null } return (

About

Tags

Share

About

Tags

Share

More from jacobparis

More Templates Like This

More from jacobparis

More Templates Like This