designbycode · claudemyburgh · May 14, 2026 · May 14, 2026
diff --git a/app/Http/Controllers/ThemesController.php b/app/Http/Controllers/ThemesController.php
@@ -3,11 +3,52 @@
 namespace App\Http\Controllers;
 
 use App\Models\Theme;
+use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Cache;
+use Illuminate\Support\Facades\Http;
 use Inertia\Inertia;
 
 class ThemesController extends Controller
 {
+    public function create()
+    {
+        return Inertia::render('themes/create');
+    }
+
+    public function store(Request $request)
+    {
+        $request->validate([
+            'url' => ['required', 'url'],
+        ]);
+
+        $response = Http::get($request->url);
+
+        if ($response->failed()) {
+            return back()->withErrors(['url' => 'Could not fetch registry from the provided URL.']);
+        }
+
+        $data = $response->json();
+
+        if (empty($data) || ! isset($data['name'])) {
+            return back()->withErrors(['url' => 'Invalid registry JSON format.']);
+        }
+
+        // Check if theme already exists
+        if (Theme::where('name', $data['name'])->exists()) {
+            return back()->withErrors(['url' => "A theme named [{$data['name']}] already exists."]);
+        }
+
+        $theme = Theme::fromRegistry($data);
+        $theme->user_id = auth()->id();
+        $theme->save();
+
+        Cache::forget('themes:total_count');
+        Cache::forget('themes:available_categories');
+
+        return redirect()->route('themes.show', $theme->name)
+            ->with('success', 'Theme created successfully.');
+    }
+
     public function index()
     {
         $availableCategories = Cache::remember('themes:available_categories', 3600, fn () => Theme::query()

diff --git a/resources/js/pages/themes/create.tsx b/resources/js/pages/themes/create.tsx
@@ -0,0 +1,93 @@
+import { Head, useForm } from '@inertiajs/react';
+import { Loader2 } from 'lucide-react';
+import Heading from '@/components/heading';
+import { Button } from '@/components/ui/button';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import MainLayout from '@/layouts/main-layout';
+import MainWrapper from '@/layouts/main/main-wrapper';
+import { store } from '@/routes/themes';
+
+export default function ThemeCreate() {
+    const { data, setData, post, processing, errors } = useForm({
+        url: '',
+    });
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        post(store().url);
+    };
+
+    return (
+        <MainWrapper className="py-8">
+            <Head title="Create Theme" />
+
+            <div className="mx-auto max-w-2xl">
+                <Heading
+                    title="Create New Theme"
+                    description="Import a shadcn/ui theme registry JSON to create a new theme in the database."
+                    className="mb-8"
+                />
+
+                <Card>
+                    <form onSubmit={handleSubmit}>
+                        <CardHeader>
+                            <CardTitle>Import from URL</CardTitle>
+                            <CardDescription>
+                                Enter a valid shadcn registry JSON URL (e.g.
+                                from tweakcn.com).
+                            </CardDescription>
+                        </CardHeader>
+                        <CardContent className="space-y-4">
+                            <div className="space-y-2">
+                                <Label htmlFor="url">Registry URL</Label>
+                                <Input
+                                    id="url"
+                                    type="url"
+                                    placeholder="https://tweakcn.com/r/themes/neo-brutalism.json"
+                                    value={data.url}
+                                    onChange={(e) =>
+                                        setData('url', e.target.value)
+                                    }
+                                    required
+                                    autoFocus
+                                />
+                                {errors.url && (
+                                    <p className="text-sm font-medium text-destructive">
+                                        {errors.url}
+                                    </p>
+                                )}
+                            </div>
+                        </CardContent>
+                        <CardFooter>
+                            <Button type="submit" disabled={processing}>
+                                {processing && (
+                                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                                )}
+                                Import Theme
+                            </Button>
+                        </CardFooter>
+                    </form>
+                </Card>
+
+                <div className="mt-8 rounded-lg bg-muted p-4">
+                    <h3 className="mb-2 text-sm font-semibold">Example URLs:</h3>
+                    <ul className="list-inside list-disc space-y-1 text-sm text-muted-foreground">
+                        <li>https://tweakcn.com/r/themes/neo-brutalism.json</li>
+                        <li>https://tweakcn.com/r/themes/modern-dark.json</li>
+                    </ul>
+                </div>
+            </div>
+        </MainWrapper>
+    );
+}
+
+ThemeCreate.layout = MainLayout;
diff --git a/resources/js/pages/themes/index.tsx b/resources/js/pages/themes/index.tsx
@@ -6,7 +6,7 @@ import MainWrapper from '@/layouts/main/main-wrapper';
 import MainThemeCard from '@/layouts/main/theme/main-theme-card';
 import { MainThemeSearch } from '@/layouts/main/theme/main-theme-search';
 import MainLayout from '@/layouts/main-layout';
-import { show } from '@/routes/themes';
+import { create, show } from '@/routes/themes';
 import type { PaginatedData, Registry } from '@/types';
 
 function ThemesIndex({
@@ -28,15 +28,17 @@ function ThemesIndex({
                     description={`Choose from ${totalThemesCount} themes to customize your site's look and feel. Preview, install, and manage them all in one place.`}
                 />
                 <div className={`shrink-0`}>
-                    <Button
-                        variant="outline"
-                        className={`transition-colors duration-300`}
-                    >
-                        <Plus className={`h-4`} />
-                        <span className={`sr-only md:not-sr-only`}>
-                            Create new theme
-                        </span>
-                    </Button>
+                    <Link href={create().url}>
+                        <Button
+                            variant="outline"
+                            className={`transition-colors duration-300`}
+                        >
+                            <Plus className={`h-4`} />
+                            <span className={`sr-only md:not-sr-only`}>
+                                Create new theme
+                            </span>
+                        </Button>
+                    </Link>
                 </div>
             </div>
 

diff --git a/routes/web.php b/routes/web.php
@@ -13,8 +13,12 @@
 
 Route::get('/', HomePageController::class)->name('home');
 Route::get('/pricing', [SubscriptionController::class, 'index'])->name('pricing');
+
 Route::get('/themes', [ThemesController::class, 'index'])->name('themes.index');
+Route::get('/themes/create', [ThemesController::class, 'create'])->name('themes.create');
+Route::post('/themes', [ThemesController::class, 'store'])->name('themes.store');
 Route::get('/themes/{theme}', [ThemesController::class, 'show'])->name('themes.show');
+
 Route::get('/fonts', [FontsController::class, 'index'])->name('fonts.index');
 Route::get('/animate-css', [AnimateController::class, 'index'])->name('animate-css.index');