From 0b032b2cd88168594f730bbe1832bb4b08add719 Mon Sep 17 00:00:00 2001
From: rehlert <post@rehlert.de>
Date: Tue, 16 Jun 2026 18:07:58 +0200
Subject: [PATCH] adds shadcn, removes skeleton, implements button after
 styleguide

---
 .idea/ShadcnHelperSettings.xml                | 2615 +++++++++++++++++
 .idea/workspace.xml                           |   60 +-
 components.json                               |   20 +
 package.json                                  |    9 +
 pnpm-lock.yaml                                |  218 +-
 src/lib/actions/ripple.ts                     |   31 +
 src/lib/components/Button.svelte              |   38 -
 src/lib/components/Card.svelte                |   23 -
 .../ProcessedZipArchiveEditor.svelte          |  346 +--
 src/lib/components/ZipDropzone.svelte         |    7 +-
 src/lib/components/ui/button.svelte           |   78 +
 src/lib/components/ui/card/card-action.svelte |   23 +
 .../components/ui/card/card-content.svelte    |   20 +
 .../ui/card/card-description.svelte           |   20 +
 src/lib/components/ui/card/card-footer.svelte |   20 +
 src/lib/components/ui/card/card-header.svelte |   23 +
 src/lib/components/ui/card/card-title.svelte  |   20 +
 src/lib/components/ui/card/card.svelte        |   22 +
 src/lib/components/ui/card/index.ts           |   25 +
 src/lib/nom-theme.css                         |  108 -
 src/lib/utils.ts                              |   13 +
 src/routes/+page.svelte                       |   69 +-
 src/routes/layout.css                         |  162 +-
 23 files changed, 3573 insertions(+), 397 deletions(-)
 create mode 100644 .idea/ShadcnHelperSettings.xml
 create mode 100644 components.json
 create mode 100644 src/lib/actions/ripple.ts
 delete mode 100644 src/lib/components/Button.svelte
 delete mode 100644 src/lib/components/Card.svelte
 create mode 100644 src/lib/components/ui/button.svelte
 create mode 100644 src/lib/components/ui/card/card-action.svelte
 create mode 100644 src/lib/components/ui/card/card-content.svelte
 create mode 100644 src/lib/components/ui/card/card-description.svelte
 create mode 100644 src/lib/components/ui/card/card-footer.svelte
 create mode 100644 src/lib/components/ui/card/card-header.svelte
 create mode 100644 src/lib/components/ui/card/card-title.svelte
 create mode 100644 src/lib/components/ui/card/card.svelte
 create mode 100644 src/lib/components/ui/card/index.ts
 delete mode 100644 src/lib/nom-theme.css
 create mode 100644 src/lib/utils.ts

diff --git a/.idea/ShadcnHelperSettings.xml b/.idea/ShadcnHelperSettings.xml
new file mode 100644
index 0000000..38aa1f2
--- /dev/null
+++ b/.idea/ShadcnHelperSettings.xml
@@ -0,0 +1,2615 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="com.ilscipio.shadcn.settings.ShadcnSettingsState">
+    <registryConfigs>
+      <RegistryConfigState>
+        <option name="id" value="official" />
+        <option name="name" value="Official shadcn/ui" />
+        <option name="namespace" value="@shadcn" />
+        <option name="baseUrl" value="https://ui.shadcn.com/r" />
+        <option name="type" value="official" />
+        <option name="builtin" value="true" />
+        <option name="description" value="The official shadcn/ui component registry" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="21st-dev" />
+        <option name="name" value="21st.dev" />
+        <option name="namespace" value="@21st" />
+        <option name="baseUrl" value="https://21st.dev/r" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="builtin" value="true" />
+        <option name="description" value="Open-source community components from 21st.dev" />
+        <option name="homepage" value="https://21st.dev" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-8bitcn" />
+        <option name="name" value="8bitcn" />
+        <option name="namespace" value="@8bitcn" />
+        <option name="baseUrl" value="https://www.8bitcn.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A set of 8-bit styled retro components. Works with your favorite frameworks. Open Source. Open Code." />
+        <option name="homepage" value="https://www.8bitcn.com" />
+        <option name="urlTemplate" value="https://www.8bitcn.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-8starlabs-ui" />
+        <option name="name" value="8starlabs-ui" />
+        <option name="namespace" value="@8starlabs-ui" />
+        <option name="baseUrl" value="https://ui.8starlabs.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A set of beautifully designed components designed for developers who want niche, high-utility UI elements that you won't find in standard libraries." />
+        <option name="homepage" value="https://ui.8starlabs.com" />
+        <option name="urlTemplate" value="https://ui.8starlabs.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-abstract" />
+        <option name="name" value="Abstract" />
+        <option name="namespace" value="@abstract" />
+        <option name="baseUrl" value="https://build.abs.xyz/r" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A collection of React components for the most common crypto patterns" />
+        <option name="homepage" value="https://build.abs.xyz" />
+        <option name="urlTemplate" value="https://build.abs.xyz/r/{name}/json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-abui" />
+        <option name="name" value="Abui" />
+        <option name="namespace" value="@abui" />
+        <option name="baseUrl" value="https://abui.io/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A shadcn-compatible registry of reusable components, blocks, and utilities conforming to Vercel's components.build specification" />
+        <option name="homepage" value="https://abui.io" />
+        <option name="urlTemplate" value="https://abui.io/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-aceternity" />
+        <option name="name" value="Aceternity" />
+        <option name="namespace" value="@aceternity" />
+        <option name="baseUrl" value="https://ui.aceternity.com/registry" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A modern component library built with Tailwind CSS and Motion for React, Aceternity UI contains unique and interactive components that can make your landing pages look 100x better." />
+        <option name="homepage" value="https://ui.aceternity.com" />
+        <option name="urlTemplate" value="https://ui.aceternity.com/registry/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-aevr" />
+        <option name="name" value="Aevr" />
+        <option name="namespace" value="@aevr" />
+        <option name="baseUrl" value="https://ui.aevr.space/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A small collection of focused, production‑ready components and primitives for React/Next.js projects—built on shadcn/ui and complementary libraries." />
+        <option name="homepage" value="https://ui.aevr.space" />
+        <option name="urlTemplate" value="https://ui.aevr.space/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-agents-ui" />
+        <option name="name" value="Agents-ui" />
+        <option name="namespace" value="@agents-ui" />
+        <option name="baseUrl" value="https://livekit.com/ui/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="This is a shadcn/ui component registry that distributes copy-paste React components for building LiveKit AI Agent interfaces." />
+        <option name="homepage" value="https://livekit.com/ui" />
+        <option name="urlTemplate" value="https://livekit.com/ui/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-ai-blocks" />
+        <option name="name" value="Ai-blocks" />
+        <option name="namespace" value="@ai-blocks" />
+        <option name="baseUrl" value="https://webllm.org/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="AI components for the web. No server. No API keys. Built on WebLLM." />
+        <option name="homepage" value="https://webllm.org/blocks" />
+        <option name="urlTemplate" value="https://webllm.org/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-ai-elements" />
+        <option name="name" value="Ai-elements" />
+        <option name="namespace" value="@ai-elements" />
+        <option name="baseUrl" value="https://ai-sdk.dev/elements/api/registry" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Pre-built components like conversations, messages and more to help you build AI-native applications faster." />
+        <option name="homepage" value="https://ai-sdk.dev/elements" />
+        <option name="urlTemplate" value="https://ai-sdk.dev/elements/api/registry/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-aicanvas" />
+        <option name="name" value="Aicanvas" />
+        <option name="namespace" value="@aicanvas" />
+        <option name="baseUrl" value="https://aicanvas.me/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="54 animated React components with AI reproduction prompts for Claude Code, Lovable, and v0. Free and open source." />
+        <option name="homepage" value="https://aicanvas.me" />
+        <option name="urlTemplate" value="https://aicanvas.me/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-algolia" />
+        <option name="name" value="Algolia" />
+        <option name="namespace" value="@algolia" />
+        <option name="baseUrl" value="https://sitesearch.algolia.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Enterprises and developers use Algolia's AI search infrastructure to understand users and show them what they're looking for." />
+        <option name="homepage" value="https://sitesearch.algolia.com" />
+        <option name="urlTemplate" value="https://sitesearch.algolia.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-aliimam" />
+        <option name="name" value="Aliimam" />
+        <option name="namespace" value="@aliimam" />
+        <option name="baseUrl" value="https://aliimam.in/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="I create digital experiences that connect and inspire. I build apps, websites, brands, and products end-to-end." />
+        <option name="homepage" value="https://aliimam.in" />
+        <option name="urlTemplate" value="https://aliimam.in/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-amplo" />
+        <option name="name" value="Amplo" />
+        <option name="namespace" value="@amplo" />
+        <option name="baseUrl" value="https://amplo.ale.design/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="OKLCH-native, Display-P3-aware composable fill picker with WCAG/APCA contrast metrics, gamut detection, and full keyboard accessibility." />
+        <option name="homepage" value="https://amplo.ale.design" />
+        <option name="urlTemplate" value="https://amplo.ale.design/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-animate-ui" />
+        <option name="name" value="Animate-ui" />
+        <option name="namespace" value="@animate-ui" />
+        <option name="baseUrl" value="https://animate-ui.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A fully animated, open-source React component distribution. Browse a list of animated primitives, components and icons you can install and use in your projects." />
+        <option name="homepage" value="https://animate-ui.com" />
+        <option name="urlTemplate" value="https://animate-ui.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-animbits" />
+        <option name="name" value="Animbits" />
+        <option name="namespace" value="@animbits" />
+        <option name="baseUrl" value="https://animbits.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="AnimBits is a collection animated UI components for React that use Framer Motion. The components provided include buttons, cards, text, icons, lists, loaders, and page transitions, animation hooks all of which have general-purpose effects that are not flashy and easy on the eyes, making them easy to use." />
+        <option name="homepage" value="https://animbits.dev" />
+        <option name="urlTemplate" value="https://animbits.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-arc" />
+        <option name="name" value="Arc" />
+        <option name="namespace" value="@arc" />
+        <option name="baseUrl" value="https://witharc.co/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Animated, accessible UI components built with React and Tailwind CSS." />
+        <option name="homepage" value="https://witharc.co/components" />
+        <option name="urlTemplate" value="https://witharc.co/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-asanshay" />
+        <option name="name" value="Asanshay" />
+        <option name="namespace" value="@asanshay" />
+        <option name="baseUrl" value="https://ds.asanshay.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Clean, beautiful, and simple UI primitives and AI elements." />
+        <option name="homepage" value="https://ds.asanshay.com" />
+        <option name="urlTemplate" value="https://ds.asanshay.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-assistant-ui" />
+        <option name="name" value="Assistant-ui" />
+        <option name="namespace" value="@assistant-ui" />
+        <option name="baseUrl" value="https://r.assistant-ui.com" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Radix-style React primitives for AI chat with adapters for AI SDK, LangGraph, Mastra, and custom backends." />
+        <option name="homepage" value="https://www.assistant-ui.com" />
+        <option name="urlTemplate" value="https://r.assistant-ui.com/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-auth0" />
+        <option name="name" value="Auth0" />
+        <option name="namespace" value="@auth0" />
+        <option name="baseUrl" value="https://ui.auth0.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Official Auth0 Universal Components for Web. Accelerate development with pre-built, embeddable UI for enterprise SSO, MFA, and organization management" />
+        <option name="homepage" value="https://auth0.com" />
+        <option name="urlTemplate" value="https://ui.auth0.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-baraile-loader" />
+        <option name="name" value="Baraile-loader" />
+        <option name="namespace" value="@baraile-loader" />
+        <option name="baseUrl" value="https://shadcn-braille-loader.vercel.app/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A simple braille-inspired loader components for shadcn/ui." />
+        <option name="homepage" value="https://shadcn-braille-loader.vercel.app" />
+        <option name="urlTemplate" value="https://shadcn-braille-loader.vercel.app/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-basecn" />
+        <option name="name" value="Basecn" />
+        <option name="namespace" value="@basecn" />
+        <option name="baseUrl" value="https://basecn.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Beautifully crafted shadcn/ui components powered by Base UI" />
+        <option name="homepage" value="https://basecn.dev" />
+        <option name="urlTemplate" value="https://basecn.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-baselayer" />
+        <option name="name" value="Baselayer" />
+        <option name="namespace" value="@baselayer" />
+        <option name="baseUrl" value="https://www.baselayer.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A collection of components built on React Aria, Tailwind CSS, and tailwind-variants." />
+        <option name="homepage" value="https://www.baselayer.dev" />
+        <option name="urlTemplate" value="https://www.baselayer.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-beste-ui" />
+        <option name="name" value="Beste-ui" />
+        <option name="namespace" value="@beste-ui" />
+        <option name="baseUrl" value="https://ui.beste.co/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Production-ready UI blocks for landing pages, dashboards, and web apps." />
+        <option name="homepage" value="https://ui.beste.co" />
+        <option name="urlTemplate" value="https://ui.beste.co/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-better-upload" />
+        <option name="name" value="Better-upload" />
+        <option name="namespace" value="@better-upload" />
+        <option name="baseUrl" value="https://better-upload.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Simple and easy file uploads for React. Upload directly to any S3-compatible service with minimal setup." />
+        <option name="homepage" value="https://better-upload.com" />
+        <option name="urlTemplate" value="https://better-upload.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-beui" />
+        <option name="name" value="Beui" />
+        <option name="namespace" value="@beui" />
+        <option name="baseUrl" value="https://beui.saura3h.xyz/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Bespoke motion components for React. Copy-paste components with shadcn-compatible installs, Tailwind CSS v4, and Motion." />
+        <option name="homepage" value="https://beui.saura3h.xyz" />
+        <option name="urlTemplate" value="https://beui.saura3h.xyz/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-billingsdk" />
+        <option name="name" value="Billingsdk" />
+        <option name="namespace" value="@billingsdk" />
+        <option name="baseUrl" value="https://billingsdk.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="BillingSDK is an open-source React and Next.js component library for SaaS billing and payments. It offers ready-to-use, customizable components for subscriptions, invoices, usage-based pricing and billing - fully compatible with Dodo Payments and Stripe." />
+        <option name="homepage" value="https://billingsdk.com" />
+        <option name="urlTemplate" value="https://billingsdk.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-bklit" />
+        <option name="name" value="Bklit" />
+        <option name="namespace" value="@bklit" />
+        <option name="baseUrl" value="https://ui.bklit.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Open-source composable chart components for React — line, area, bar, pie, radar, maps, and more. Built with Visx, Motion, and shadcn/ui." />
+        <option name="homepage" value="https://ui.bklit.com" />
+        <option name="urlTemplate" value="https://ui.bklit.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-blocks-so" />
+        <option name="name" value="Blocks-so" />
+        <option name="namespace" value="@blocks-so" />
+        <option name="baseUrl" value="https://blocks.so/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A set of clean, modern application building blocks for you in your applications. Free and Open Source" />
+        <option name="homepage" value="https://blocks.so" />
+        <option name="urlTemplate" value="https://blocks.so/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-blockus" />
+        <option name="name" value="Blockus" />
+        <option name="namespace" value="@blockus" />
+        <option name="baseUrl" value="https://blockus.lndevui.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Production-ready React blocks built on shadcn/ui and Tailwind — drop them in, swap the copy, ship the page. Heroes, pricing and footer sections crafted by hand." />
+        <option name="homepage" value="https://blockus.lndevui.com" />
+        <option name="urlTemplate" value="https://blockus.lndevui.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-boldkit" />
+        <option name="name" value="Boldkit" />
+        <option name="namespace" value="@boldkit" />
+        <option name="baseUrl" value="https://boldkit.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Neubrutalism component library with 43 components, 42 SVG shapes, thick borders, and hard shadows. Supports React, Vue, and Nuxt. Built on shadcn/ui." />
+        <option name="homepage" value="https://boldkit.dev" />
+        <option name="urlTemplate" value="https://boldkit.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-bundui" />
+        <option name="name" value="Bundui" />
+        <option name="namespace" value="@bundui" />
+        <option name="baseUrl" value="https://bundui.io/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A collection of 150+ handcrafted UI components built with Tailwind CSS and shadcn/ui, covering marketing, e-commerce, dashboards, real estate, and more." />
+        <option name="homepage" value="https://bundui.io" />
+        <option name="urlTemplate" value="https://bundui.io/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-cardcn" />
+        <option name="name" value="Cardcn" />
+        <option name="namespace" value="@cardcn" />
+        <option name="baseUrl" value="https://cardcn.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A set of beautifully-designed shadcn card components" />
+        <option name="homepage" value="https://cardcn.dev" />
+        <option name="urlTemplate" value="https://cardcn.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-chamaac" />
+        <option name="name" value="Chamaac" />
+        <option name="namespace" value="@chamaac" />
+        <option name="baseUrl" value="https://chamaac.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A collection of beautiful, animated components to elevate your web projects instantly." />
+        <option name="homepage" value="https://chamaac.com" />
+        <option name="urlTemplate" value="https://chamaac.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-clerk" />
+        <option name="name" value="Clerk" />
+        <option name="namespace" value="@clerk" />
+        <option name="baseUrl" value="https://clerk.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="The easiest way to add authentication and user management to your application. Purpose-built for React, Next.js, Remix, and The Modern Web." />
+        <option name="homepage" value="https://clerk.com/docs/guides/development/shadcn-cli" />
+        <option name="urlTemplate" value="https://clerk.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-cognicatch" />
+        <option name="name" value="Cognicatch" />
+        <option name="namespace" value="@cognicatch" />
+        <option name="baseUrl" value="https://cognicatch.dev/registry" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Adaptive Error Boundaries and graceful fallback UIs (Banners, Modals, Toasts)." />
+        <option name="homepage" value="https://cognicatch.dev" />
+        <option name="urlTemplate" value="https://cognicatch.dev/registry/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-commercn" />
+        <option name="name" value="Commercn" />
+        <option name="namespace" value="@commercn" />
+        <option name="baseUrl" value="https://commercn.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Shadcn UI Blocks for Ecommerce websites" />
+        <option name="homepage" value="https://commercn.com" />
+        <option name="urlTemplate" value="https://commercn.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-componentry" />
+        <option name="name" value="Componentry" />
+        <option name="namespace" value="@componentry" />
+        <option name="baseUrl" value="https://componentry.fun/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Beautiful, interactive React + Tailwind components for modern product UIs." />
+        <option name="homepage" value="https://componentry.fun" />
+        <option name="urlTemplate" value="https://componentry.fun/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-contentbit" />
+        <option name="name" value="Contentbit" />
+        <option name="namespace" value="@contentbit" />
+        <option name="baseUrl" value="https://contentbit.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="React components that render Content Blocks: plain Markdown with schema-validated directive blocks. Built for content written by humans, CMSes, and LLMs." />
+        <option name="homepage" value="https://contentbit.dev" />
+        <option name="urlTemplate" value="https://contentbit.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-corr" />
+        <option name="name" value="Corr" />
+        <option name="namespace" value="@corr" />
+        <option name="baseUrl" value="https://ui.corr.sh/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A collection of shadcn-based React components, charts, animated components, and blocks built over time." />
+        <option name="homepage" value="https://ui.corr.sh" />
+        <option name="urlTemplate" value="https://ui.corr.sh/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-coss" />
+        <option name="name" value="Coss" />
+        <option name="namespace" value="@coss" />
+        <option name="baseUrl" value="https://coss.com/ui/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A new, modern UI component library built on top of Base UI. Built for developers and AI." />
+        <option name="homepage" value="https://coss.com/ui" />
+        <option name="urlTemplate" value="https://coss.com/ui/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-creative-tim" />
+        <option name="name" value="Creative-tim" />
+        <option name="namespace" value="@creative-tim" />
+        <option name="baseUrl" value="https://www.creative-tim.com/ui/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A collection of open-source UI components, blocks and AI Agents. Integrate them in v0, Lovable, Claude or in your application." />
+        <option name="homepage" value="https://www.creative-tim.com/ui" />
+        <option name="urlTemplate" value="https://www.creative-tim.com/ui/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-cubby-ui" />
+        <option name="name" value="Cubby-ui" />
+        <option name="namespace" value="@cubby-ui" />
+        <option name="baseUrl" value="https://www.cubby-ui.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="An opinionated component library with curated styling and simplified patterns for common use cases. Built on Base UI and Tailwind CSS 4." />
+        <option name="homepage" value="https://www.cubby-ui.dev" />
+        <option name="urlTemplate" value="https://www.cubby-ui.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-cult-ui" />
+        <option name="name" value="Cult-ui" />
+        <option name="namespace" value="@cult-ui" />
+        <option name="baseUrl" value="https://cult-ui.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Cult UI is a rare, curated set of shadcn-compatible, headless and composable components—tastefully animated with Framer Motion." />
+        <option name="homepage" value="https://www.cult-ui.com" />
+        <option name="urlTemplate" value="https://cult-ui.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-darx" />
+        <option name="name" value="Darx" />
+        <option name="namespace" value="@darx" />
+        <option name="baseUrl" value="https://darshitdev.in/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Magic 3D Tabs component featuring mouse-interactive 3D rotation, floating particles background effect, and smooth spring animations." />
+        <option name="homepage" value="https://darshitdev.in/arts" />
+        <option name="urlTemplate" value="https://darshitdev.in/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-delego" />
+        <option name="name" value="Delego" />
+        <option name="namespace" value="@delego" />
+        <option name="baseUrl" value="https://raw.githubusercontent.com/Delego-Dev/registry/main/public/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Design-system registry for Delego — intent-bound action authorization for AI agents. Theme (OKLCH) plus signature components: decision pill, signed receipt, status badge, field." />
+        <option name="homepage" value="https://github.com/Delego-Dev/registry" />
+        <option name="urlTemplate" value="https://raw.githubusercontent.com/Delego-Dev/registry/main/public/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-delta" />
+        <option name="name" value="Delta" />
+        <option name="namespace" value="@delta" />
+        <option name="baseUrl" value="https://deltacomponents.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A shadcn registry for AI and media-rich interfaces — streaming LLM chat, zoomable images, swipeable card decks, interactive maps, plus dashboard and landing-page blocks." />
+        <option name="homepage" value="https://deltacomponents.dev" />
+        <option name="urlTemplate" value="https://deltacomponents.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-devl" />
+        <option name="name" value="Devl" />
+        <option name="namespace" value="@devl" />
+        <option name="baseUrl" value="https://devl.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Hand-crafted layouts and UI primitives for shipping fast." />
+        <option name="homepage" value="https://devl.dev" />
+        <option name="urlTemplate" value="https://devl.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-diceui" />
+        <option name="name" value="Diceui" />
+        <option name="namespace" value="@diceui" />
+        <option name="baseUrl" value="https://diceui.com/r/{style}" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Accessible shadcn/ui components built with React, TypeScript, and Tailwind CSS. Copy-paste ready, and customizable." />
+        <option name="homepage" value="https://www.diceui.com/" />
+        <option name="urlTemplate" value="https://diceui.com/r/{style}/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-dominik-ui" />
+        <option name="name" value="Dominik-ui" />
+        <option name="namespace" value="@dominik-ui" />
+        <option name="baseUrl" value="https://dominikkoch.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Opinionated components and tools for building modern AI interfaces." />
+        <option name="homepage" value="https://dominikkoch.dev" />
+        <option name="urlTemplate" value="https://dominikkoch.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-doras-ui" />
+        <option name="name" value="Doras-ui" />
+        <option name="namespace" value="@doras-ui" />
+        <option name="baseUrl" value="https://ui.doras.to/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A collection of beautiful, reusable component blocks built with React" />
+        <option name="homepage" value="https://ui.doras.to/" />
+        <option name="urlTemplate" value="https://ui.doras.to/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-dotmatrix" />
+        <option name="name" value="Dotmatrix" />
+        <option name="namespace" value="@dotmatrix" />
+        <option name="baseUrl" value="https://dotmatrix.zzzzshawn.cloud/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Production-ready dot-matrix loading components for React, featuring square, circular, and triangle animations with polished motion." />
+        <option name="homepage" value="https://dotmatrix.zzzzshawn.cloud" />
+        <option name="urlTemplate" value="https://dotmatrix.zzzzshawn.cloud/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-dsikeres1" />
+        <option name="name" value="Dsikeres1" />
+        <option name="namespace" value="@dsikeres1" />
+        <option name="baseUrl" value="https://dsikeres1.github.io/react-date-range-picker/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A headless, composable date &amp; date range picker for React. 5 picker types, 15 locales, dark mode, accessible. Zero dependencies." />
+        <option name="homepage" value="https://dsikeres1.github.io/react-date-range-picker/" />
+        <option name="urlTemplate" value="https://dsikeres1.github.io/react-date-range-picker/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-efferd" />
+        <option name="name" value="Efferd" />
+        <option name="namespace" value="@efferd" />
+        <option name="baseUrl" value="https://efferd.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A collection of beautifully crafted Shadcn/UI blocks, designed to help developers build modern websites with ease." />
+        <option name="homepage" value="https://efferd.com/" />
+        <option name="urlTemplate" value="https://efferd.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-einui" />
+        <option name="name" value="Einui" />
+        <option name="namespace" value="@einui" />
+        <option name="baseUrl" value="https://ui.eindev.ir/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Beautiful, responsive Shadcn components with frosted glass morphism. Built for modern web applications with full dark mode support." />
+        <option name="homepage" value="https://ui.eindev.ir" />
+        <option name="urlTemplate" value="https://ui.eindev.ir/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-eldoraui" />
+        <option name="name" value="Eldoraui" />
+        <option name="namespace" value="@eldoraui" />
+        <option name="baseUrl" value="https://eldoraui.site/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="An open-source, modern UI component library for React, built with TypeScript, Tailwind CSS, and Framer Motion. Eldora UI offers beautifully crafted, reusable components designed for performance and elegance." />
+        <option name="homepage" value="https://eldoraui.site" />
+        <option name="urlTemplate" value="https://eldoraui.site/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-elements" />
+        <option name="name" value="Elements" />
+        <option name="namespace" value="@elements" />
+        <option name="baseUrl" value="https://www.tryelements.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Full-stack shadcn/ui components that go beyond UI. Add auth, monetization, uploads, and AI to your app in seconds." />
+        <option name="homepage" value="https://www.tryelements.dev" />
+        <option name="urlTemplate" value="https://www.tryelements.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-elevenlabs-ui" />
+        <option name="name" value="Elevenlabs-ui" />
+        <option name="namespace" value="@elevenlabs-ui" />
+        <option name="baseUrl" value="https://ui.elevenlabs.io/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A collection of Open Source agent and audio components that you can customize and extend." />
+        <option name="homepage" value="https://ui.elevenlabs.io" />
+        <option name="urlTemplate" value="https://ui.elevenlabs.io/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-emerald-ui" />
+        <option name="name" value="Emerald-ui" />
+        <option name="namespace" value="@emerald-ui" />
+        <option name="baseUrl" value="https://emerald-ui.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Emerald UI - collection of components built with Motion, GSAP, Tailwind CSS and shadcn/ui." />
+        <option name="homepage" value="https://emerald-ui.com" />
+        <option name="urlTemplate" value="https://emerald-ui.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-evilbuttons" />
+        <option name="name" value="Evilbuttons" />
+        <option name="namespace" value="@evilbuttons" />
+        <option name="baseUrl" value="https://evilbuttons.radiumcoders.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A shadcn/ui registry featuring a collection of animated buttons built with Motion. Each component is designed to add punchy, interactive feedback to your UI with minimal setup." />
+        <option name="homepage" value="https://evilbuttons.radiumcoders.com/docs" />
+        <option name="urlTemplate" value="https://evilbuttons.radiumcoders.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-evilcharts" />
+        <option name="name" value="Evilcharts" />
+        <option name="namespace" value="@evilcharts" />
+        <option name="baseUrl" value="https://evilcharts.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="EvilCharts is an open-source chart UI website built with shadcn and Recharts, beautifully designed and handcrafted." />
+        <option name="homepage" value="https://evilcharts.com" />
+        <option name="urlTemplate" value="https://evilcharts.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-exabase" />
+        <option name="name" value="Exabase" />
+        <option name="namespace" value="@exabase" />
+        <option name="baseUrl" value="https://exawizards.com/exabase/design/registry" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A collection of UI components based on the exaBase Design System, built with React and Tailwind CSS." />
+        <option name="homepage" value="https://exawizards.com/exabase/design/" />
+        <option name="urlTemplate" value="https://exawizards.com/exabase/design/registry/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-extend" />
+        <option name="name" value="Extend" />
+        <option name="namespace" value="@extend" />
+        <option name="baseUrl" value="https://ui.extend.ai/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A collection of UI components for building document agents and human-in-the-loop review workflows." />
+        <option name="homepage" value="https://ui.extend.ai" />
+        <option name="urlTemplate" value="https://ui.extend.ai/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-fab-ui" />
+        <option name="name" value="Fab-ui" />
+        <option name="namespace" value="@fab-ui" />
+        <option name="baseUrl" value="https://fab-ui.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A collection of beautifully designed UI components for building modern web applications." />
+        <option name="homepage" value="https://fab-ui.com" />
+        <option name="urlTemplate" value="https://fab-ui.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-flightcn" />
+        <option name="name" value="Flightcn" />
+        <option name="namespace" value="@flightcn" />
+        <option name="baseUrl" value="https://flightcn.yencheng.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Flight routes on interactive maps with great-circle arcs, airport markers, multi-leg journeys, and optional animation, built for mapcn." />
+        <option name="homepage" value="https://flightcn.yencheng.dev" />
+        <option name="urlTemplate" value="https://flightcn.yencheng.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-flowkit-ui" />
+        <option name="name" value="Flowkit-ui" />
+        <option name="namespace" value="@flowkit-ui" />
+        <option name="baseUrl" value="https://flowkit-ui.vzkiss.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Opinionated, accessible components on Base UI and shadcn-style primitives — starting with a Creatable Combobox." />
+        <option name="homepage" value="https://flowkit-ui.vzkiss.com" />
+        <option name="urlTemplate" value="https://flowkit-ui.vzkiss.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-fluid" />
+        <option name="name" value="Fluid" />
+        <option name="namespace" value="@fluid" />
+        <option name="baseUrl" value="https://www.fluidfunctionalism.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Fluid components used exclusively in service of functional clarity. Proximity hover, spring animations, font-weight transitions, and animated focus rings." />
+        <option name="homepage" value="https://www.fluidfunctionalism.com" />
+        <option name="urlTemplate" value="https://www.fluidfunctionalism.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-flx" />
+        <option name="name" value="Flx" />
+        <option name="namespace" value="@flx" />
+        <option name="baseUrl" value="https://ui.flexnative.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A collection of customizable UI blocks with interactive live previews" />
+        <option name="homepage" value="https://ui.flexnative.com" />
+        <option name="urlTemplate" value="https://ui.flexnative.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-fonttrio" />
+        <option name="name" value="Fonttrio" />
+        <option name="namespace" value="@fonttrio" />
+        <option name="baseUrl" value="https://www.fonttrio.xyz/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Curated font pairing registry for shadcn. Three fonts. One command. Install perfectly configured typography (heading + body + mono) with shadcn add. Includes editorial-grade type scales, CSS variables, and a live preview site." />
+        <option name="homepage" value="https://www.fonttrio.xyz" />
+        <option name="urlTemplate" value="https://www.fonttrio.xyz/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-forgeui" />
+        <option name="name" value="Forgeui" />
+        <option name="namespace" value="@forgeui" />
+        <option name="baseUrl" value="https://forgeui.in/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source." />
+        <option name="homepage" value="https://forgeui.in/" />
+        <option name="urlTemplate" value="https://forgeui.in/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-formcn" />
+        <option name="name" value="Formcn" />
+        <option name="namespace" value="@formcn" />
+        <option name="baseUrl" value="https://formcn.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Build production-ready forms with a few clicks using shadcn components and modern tools." />
+        <option name="homepage" value="https://formcn.dev" />
+        <option name="urlTemplate" value="https://formcn.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-framecn" />
+        <option name="name" value="Framecn" />
+        <option name="namespace" value="@framecn" />
+        <option name="baseUrl" value="https://framecn.vercel.app/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Beautiful videos, made simple. Ready to use, customizable video components for React." />
+        <option name="homepage" value="https://framecn.vercel.app" />
+        <option name="urlTemplate" value="https://framecn.vercel.app/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-gaia" />
+        <option name="name" value="Gaia" />
+        <option name="namespace" value="@gaia" />
+        <option name="baseUrl" value="https://ui.heygaia.io/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Production-ready UI components designed for building beautiful AI assistants and conversational interfaces, from the team behind GAIA." />
+        <option name="homepage" value="https://ui.heygaia.io" />
+        <option name="urlTemplate" value="https://ui.heygaia.io/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-gamekitui" />
+        <option name="name" value="Gamekitui" />
+        <option name="namespace" value="@gamekitui" />
+        <option name="baseUrl" value="https://gamekitui.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Drop-in, themeable browser games for shadcn — Snake, 2048, Minesweeper, and more. Each is a single self-contained file with zero dependencies." />
+        <option name="homepage" value="https://gamekitui.com" />
+        <option name="urlTemplate" value="https://gamekitui.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-gamifykit" />
+        <option name="name" value="Gamifykit" />
+        <option name="namespace" value="@gamifykit" />
+        <option name="baseUrl" value="https://gamifykit.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A collection of fully composable components that extend shadcn/ui with a focus on common gamification UI patterns." />
+        <option name="homepage" value="https://gamifykit.com" />
+        <option name="urlTemplate" value="https://gamifykit.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-gammaui" />
+        <option name="name" value="Gammaui" />
+        <option name="namespace" value="@gammaui" />
+        <option name="baseUrl" value="https://www.gammaui.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Beautifully designed landing page components built with React &amp; Tailwind CSS &amp; Motion." />
+        <option name="homepage" value="https://www.gammaui.com" />
+        <option name="urlTemplate" value="https://www.gammaui.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-gc-solid" />
+        <option name="name" value="Gc-solid" />
+        <option name="namespace" value="@gc-solid" />
+        <option name="baseUrl" value="https://binnodon.github.io/gc-solid-ui/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="SolidJS port of shadcn-ui components built with Kobalte primitives. 57+ components with full TypeScript support and Vega theme." />
+        <option name="homepage" value="https://binnodon.github.io/gc-solid-ui" />
+        <option name="urlTemplate" value="https://binnodon.github.io/gc-solid-ui/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-glass-ui" />
+        <option name="name" value="Glass-ui" />
+        <option name="namespace" value="@glass-ui" />
+        <option name="baseUrl" value="https://glass-ui.crenspire.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A shadcn-ui compatible registry distributing 40+ glassmorphic React/TypeScript components with Apple-inspired design. Components include enhanced visual effects (glow, shimmer, ripple), theme support, and customizable glassmorphism styling." />
+        <option name="homepage" value="https://glass-ui.crenspire.com" />
+        <option name="urlTemplate" value="https://glass-ui.crenspire.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-glasscn" />
+        <option name="name" value="Glasscn" />
+        <option name="namespace" value="@glasscn" />
+        <option name="baseUrl" value="https://glasscn-components.vercel.app/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A shadcn-compatible registry of glassmorphism components inspired by Apple" />
+        <option name="homepage" value="https://glasscn-components.vercel.app/" />
+        <option name="urlTemplate" value="https://glasscn-components.vercel.app/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-gooseui" />
+        <option name="name" value="Gooseui" />
+        <option name="namespace" value="@gooseui" />
+        <option name="baseUrl" value="https://gooseui.pro/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Open source component library with animated components, beautiful effects, and custom toast notifications. Built with Radix UI and Tailwind CSS." />
+        <option name="homepage" value="https://gooseui.pro" />
+        <option name="urlTemplate" value="https://gooseui.pro/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-gpt-vis" />
+        <option name="name" value="Gpt-vis" />
+        <option name="namespace" value="@gpt-vis" />
+        <option name="baseUrl" value="https://gpt-vis.antv.vision/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="AI-native visualization components for LLM projects. Render 26 chart types from vis syntax strings or config objects." />
+        <option name="homepage" value="https://gpt-vis.antv.vision" />
+        <option name="urlTemplate" value="https://gpt-vis.antv.vision/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-gymnopedies" />
+        <option name="name" value="Gymnopedies" />
+        <option name="namespace" value="@gymnopedies" />
+        <option name="baseUrl" value="https://gymnopedies.shoota.work/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A dark, serif, glow-leaning shadcn registry of read-only components for blogs, essays, and long-form reading experiences — inspired by the quiet, candlelit cabaret of Erik Satie's Gymnopédies." />
+        <option name="homepage" value="https://gymnopedies.shoota.work" />
+        <option name="urlTemplate" value="https://gymnopedies.shoota.work/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-grootstudio" />
+        <option name="name" value="Grootstudio" />
+        <option name="namespace" value="@grootstudio" />
+        <option name="baseUrl" value="https://grootstudio.vercel.app/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A premium, open source component registry for SEO-friendly, high-performance React applications" />
+        <option name="homepage" value="https://grootstudio.vercel.app" />
+        <option name="urlTemplate" value="https://grootstudio.vercel.app/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-ha-components" />
+        <option name="name" value="Ha-components" />
+        <option name="namespace" value="@ha-components" />
+        <option name="baseUrl" value="https://hacomponents.keshuac.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A collection of customisable components to build Home Assistant dashboards." />
+        <option name="homepage" value="https://hacomponents.keshuac.com" />
+        <option name="urlTemplate" value="https://hacomponents.keshuac.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-headcodecms" />
+        <option name="name" value="Headcodecms" />
+        <option name="namespace" value="@headcodecms" />
+        <option name="baseUrl" value="https://headcodecms.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A Minimalistic Web CMS for Next.js, optimized for Cache Components." />
+        <option name="homepage" value="https://headcodecms.com" />
+        <option name="urlTemplate" value="https://headcodecms.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-heroicons-animated" />
+        <option name="name" value="Heroicons-animated" />
+        <option name="namespace" value="@heroicons-animated" />
+        <option name="baseUrl" value="https://www.heroicons-animated.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="An open-source collection of 316 beautifully animated heroicons for your projects." />
+        <option name="homepage" value="https://www.heroicons-animated.com/" />
+        <option name="urlTemplate" value="https://www.heroicons-animated.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-hextaui" />
+        <option name="name" value="Hextaui" />
+        <option name="namespace" value="@hextaui" />
+        <option name="baseUrl" value="https://hextaui.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Ready-to-use foundation components/blocks built on top of shadcn/ui." />
+        <option name="homepage" value="https://hextaui.com" />
+        <option name="urlTemplate" value="https://hextaui.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-iconiq" />
+        <option name="name" value="Iconiq" />
+        <option name="namespace" value="@iconiq" />
+        <option name="baseUrl" value="https://iconiqui.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Iconiq is a collection of icons designed for web applications. It is a modern, clean, and minimalistic icon set that is perfect for web applications." />
+        <option name="homepage" value="https://iconiqui.com" />
+        <option name="urlTemplate" value="https://iconiqui.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-icons-animated" />
+        <option name="name" value="Icons-animated" />
+        <option name="namespace" value="@icons-animated" />
+        <option name="baseUrl" value="https://icons.lndev.me/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="An open-source library of meticulously animated icons (Tabler, Phosphor, and more) for your projects, inspired by lucide-animated.com" />
+        <option name="homepage" value="https://icons.lndev.me" />
+        <option name="urlTemplate" value="https://icons.lndev.me/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-indiacn" />
+        <option name="name" value="Indiacn" />
+        <option name="namespace" value="@indiacn" />
+        <option name="baseUrl" value="https://indiacn.in/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="UX4G 2.0 design system for India — many accessible React components and an 8-color theme preset for native apps." />
+        <option name="homepage" value="https://indiacn.in" />
+        <option name="urlTemplate" value="https://indiacn.in/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-inferencesh" />
+        <option name="name" value="Inferencesh" />
+        <option name="namespace" value="@inferencesh" />
+        <option name="baseUrl" value="https://ui.inference.sh/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="batteries-included agent components by inference.sh. chat interfaces with streaming, tool invocation rendering, syntax-highlighted code blocks, markdown renderer, and more." />
+        <option name="homepage" value="https://ui.inference.sh" />
+        <option name="urlTemplate" value="https://ui.inference.sh/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-intentui" />
+        <option name="name" value="Intentui" />
+        <option name="namespace" value="@intentui" />
+        <option name="baseUrl" value="https://intentui.com/r" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Accessible React component library to copy, customize, and own your UI." />
+        <option name="homepage" value="https://intentui.com" />
+        <option name="urlTemplate" value="https://intentui.com/r/{name}" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-jalco" />
+        <option name="name" value="Jalco" />
+        <option name="namespace" value="@jalco" />
+        <option name="baseUrl" value="https://ui.justinlevine.me/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A curated collection of GitHub-integrated, documentation, and developer-facing components. Self-contained, zero-dependency, and production-ready." />
+        <option name="homepage" value="https://ui.justinlevine.me" />
+        <option name="urlTemplate" value="https://ui.justinlevine.me/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-jolyui" />
+        <option name="name" value="Jolyui" />
+        <option name="namespace" value="@jolyui" />
+        <option name="baseUrl" value="https://www.jolyui.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="JolyUI is a modern React component library built with TypeScript and Tailwind CSS." />
+        <option name="homepage" value="https://www.jolyui.dev" />
+        <option name="urlTemplate" value="https://www.jolyui.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-joyco" />
+        <option name="name" value="Joyco" />
+        <option name="namespace" value="@joyco" />
+        <option name="baseUrl" value="https://registry.joyco.studio/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Components including MobileMenu, ScrollArea with gradients, Chat UI, HLSVideoPlayer, and Marquee." />
+        <option name="homepage" value="https://registry.joyco.studio" />
+        <option name="urlTemplate" value="https://registry.joyco.studio/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-kanpeki" />
+        <option name="name" value="Kanpeki" />
+        <option name="namespace" value="@kanpeki" />
+        <option name="baseUrl" value="https://kanpeki.vercel.app/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A set of perfect-designed components built on top of React Aria and Motion." />
+        <option name="homepage" value="https://kanpeki.vercel.app" />
+        <option name="urlTemplate" value="https://kanpeki.vercel.app/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-kapwa" />
+        <option name="name" value="Kapwa" />
+        <option name="namespace" value="@kapwa" />
+        <option name="baseUrl" value="https://kapwa-two.vercel.app/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Cleanly designed components purposely built for open-source government portals." />
+        <option name="homepage" value="https://kapwa-two.vercel.app" />
+        <option name="urlTemplate" value="https://kapwa-two.vercel.app/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-kibo-ui" />
+        <option name="name" value="Kibo-ui" />
+        <option name="namespace" value="@kibo-ui" />
+        <option name="baseUrl" value="https://www.kibo-ui.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Kibo UI is a custom registry of composable, accessible and open source components designed for use with shadcn/ui." />
+        <option name="homepage" value="https://www.kibo-ui.com/" />
+        <option name="urlTemplate" value="https://www.kibo-ui.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-kokonutui" />
+        <option name="name" value="Kokonutui" />
+        <option name="namespace" value="@kokonutui" />
+        <option name="baseUrl" value="https://kokonutui.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Collection of stunning components built with Tailwind CSS, shadcn/ui and Motion to use on your websites." />
+        <option name="homepage" value="https://kokonutui.com" />
+        <option name="urlTemplate" value="https://kokonutui.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-launchui" />
+        <option name="name" value="Launchui" />
+        <option name="namespace" value="@launchui" />
+        <option name="baseUrl" value="https://www.launchuicomponents.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Carefully crafted landing page components and templates built with React, Shadcn/ui and Tailwind." />
+        <option name="homepage" value="https://www.launchuicomponents.com/" />
+        <option name="urlTemplate" value="https://www.launchuicomponents.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-lens-blocks" />
+        <option name="name" value="Lens-blocks" />
+        <option name="namespace" value="@lens-blocks" />
+        <option name="baseUrl" value="https://lensblocks.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A collection of social media components for use with Lens Social Protocol." />
+        <option name="homepage" value="https://lensblocks.com" />
+        <option name="urlTemplate" value="https://lensblocks.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-limeplay" />
+        <option name="name" value="Limeplay" />
+        <option name="namespace" value="@limeplay" />
+        <option name="baseUrl" value="https://limeplay.winoffrg.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Modern UI Library for building media players in React. Powered by Shaka Player." />
+        <option name="homepage" value="https://limeplay.winoffrg.dev" />
+        <option name="urlTemplate" value="https://limeplay.winoffrg.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-lmscn" />
+        <option name="name" value="Lmscn" />
+        <option name="namespace" value="@lmscn" />
+        <option name="baseUrl" value="https://lmscn.vercel.app/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="LMS components for building interactive learning experiences — quiz, flashcards, matching, fill-in-the-blank, word scramble, sequencing, reading comprehension, spaced repetition and more." />
+        <option name="homepage" value="https://lmscn.vercel.app" />
+        <option name="urlTemplate" value="https://lmscn.vercel.app/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-loading-ui" />
+        <option name="name" value="Loading-ui" />
+        <option name="namespace" value="@loading-ui" />
+        <option name="baseUrl" value="https://loading-ui.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Spinners, loaders, and loading animations for modern web apps. Free and open-source." />
+        <option name="homepage" value="https://loading-ui.com" />
+        <option name="urlTemplate" value="https://loading-ui.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-lucide-animated" />
+        <option name="name" value="Lucide-animated" />
+        <option name="namespace" value="@lucide-animated" />
+        <option name="baseUrl" value="https://lucide-animated.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="An open-source collection of smooth animated lucide icons for your projects" />
+        <option name="homepage" value="https://lucide-animated.com" />
+        <option name="urlTemplate" value="https://lucide-animated.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-lumiui" />
+        <option name="name" value="Lumiui" />
+        <option name="namespace" value="@lumiui" />
+        <option name="baseUrl" value="https://www.lumiui.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Composable React components powered by Base UI and Tailwind CSS — Build fast, customize everything." />
+        <option name="homepage" value="https://www.lumiui.dev" />
+        <option name="urlTemplate" value="https://www.lumiui.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-lytenyte" />
+        <option name="name" value="Lytenyte" />
+        <option name="namespace" value="@lytenyte" />
+        <option name="baseUrl" value="https://www.1771technologies.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="LyteNyte Grid is a high performance, light weight, headless, React data grid. Our registry provides LyteNyte Grid themed using Tailwind and the Shadcn theme variables." />
+        <option name="homepage" value="https://www.1771technologies.com" />
+        <option name="urlTemplate" value="https://www.1771technologies.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-magicui" />
+        <option name="name" value="Magicui" />
+        <option name="namespace" value="@magicui" />
+        <option name="baseUrl" value="https://magicui.design/r" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="UI Library for Design Engineers. 150+ free and open-source animated components and effects built with React, Typescript, Tailwind CSS, and Motion. Perfect companion for shadcn/ui." />
+        <option name="homepage" value="https://magicui.design" />
+        <option name="urlTemplate" value="https://magicui.design/r/{name}" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-manifest" />
+        <option name="name" value="Manifest" />
+        <option name="namespace" value="@manifest" />
+        <option name="baseUrl" value="https://ui.manifest.build/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Agentic UI toolkit for building MCP Apps. Open-source components and blocks ready to use within your chat app." />
+        <option name="homepage" value="https://ui.manifest.build" />
+        <option name="urlTemplate" value="https://ui.manifest.build/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-mapcn" />
+        <option name="name" value="Mapcn" />
+        <option name="namespace" value="@mapcn" />
+        <option name="baseUrl" value="https://mapcn.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Beautiful maps, made simple. Ready to use, customizable map components for React. Built on MapLibre. Styled with Tailwind CSS." />
+        <option name="homepage" value="https://mapcn.dev" />
+        <option name="urlTemplate" value="https://mapcn.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-mksingh" />
+        <option name="name" value="Mksingh" />
+        <option name="namespace" value="@mksingh" />
+        <option name="baseUrl" value="https://mksingh.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A personal registry of production-ready ShadCN components and utilities. Everything is built to drop into your existing ShadCN project with no extra setup." />
+        <option name="homepage" value="https://mksingh.dev/docs" />
+        <option name="urlTemplate" value="https://mksingh.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-moleculeui" />
+        <option name="name" value="Moleculeui" />
+        <option name="namespace" value="@moleculeui" />
+        <option name="baseUrl" value="https://www.moleculeui.design/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A modern React component library focused on intuitive interactions and seamless user experiences." />
+        <option name="homepage" value="https://www.moleculeui.design/" />
+        <option name="urlTemplate" value="https://www.moleculeui.design/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-motion-primitives" />
+        <option name="name" value="Motion-primitives" />
+        <option name="namespace" value="@motion-primitives" />
+        <option name="baseUrl" value="https://motion-primitives.com/c" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Beautifully designed motions components. Easy copy-paste. Customizable. Open Source. Built for engineers and designers." />
+        <option name="homepage" value="https://www.motion-primitives.com" />
+        <option name="urlTemplate" value="https://motion-primitives.com/c/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-mui-treasury" />
+        <option name="name" value="Mui-treasury" />
+        <option name="namespace" value="@mui-treasury" />
+        <option name="baseUrl" value="https://mui-treasury.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A collection of hand-crafted interfaces built on top of MUI components" />
+        <option name="homepage" value="https://www.mui-treasury.com" />
+        <option name="urlTemplate" value="https://mui-treasury.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-ncdai" />
+        <option name="name" value="Ncdai" />
+        <option name="namespace" value="@ncdai" />
+        <option name="baseUrl" value="https://chanhdai.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Pixel-perfect, uniquely crafted." />
+        <option name="homepage" value="https://chanhdai.com/components" />
+        <option name="urlTemplate" value="https://chanhdai.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-neobrutalism" />
+        <option name="name" value="Neobrutalism" />
+        <option name="namespace" value="@neobrutalism" />
+        <option name="baseUrl" value="https://www.neobrutalism.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A collection of neobrutalism-styled components based on shadcn/ui" />
+        <option name="homepage" value="https://www.neobrutalism.dev" />
+        <option name="urlTemplate" value="https://www.neobrutalism.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-nessra-ui" />
+        <option name="name" value="Nessra-ui" />
+        <option name="namespace" value="@nessra-ui" />
+        <option name="baseUrl" value="https://nessra-ui.vercel.app/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Beautiful, accessible components built with Tailwind CSS v4 and Radix UI. Includes auth blocks, data tables, and TanStack Form integration." />
+        <option name="homepage" value="https://nessra-ui.vercel.app" />
+        <option name="urlTemplate" value="https://nessra-ui.vercel.app/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-nexus-elements" />
+        <option name="name" value="Nexus-elements" />
+        <option name="namespace" value="@nexus-elements" />
+        <option name="baseUrl" value="https://elements.nexus.availproject.org/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Ready-made React components for almost any use case. Use as is or customise and go to market fast" />
+        <option name="homepage" value="https://elements.nexus.availproject.org/docs/view-components" />
+        <option name="urlTemplate" value="https://elements.nexus.availproject.org/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-nexus-labs" />
+        <option name="name" value="Nexus-labs" />
+        <option name="namespace" value="@nexus-labs" />
+        <option name="baseUrl" value="https://nexus-ui.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Motion-native animated components for Next.js — backgrounds, heroes, inputs, carousels, and more. Open source. Copy-ready TypeScript." />
+        <option name="homepage" value="https://nexus-ui.com" />
+        <option name="urlTemplate" value="https://nexus-ui.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-nexus-ui" />
+        <option name="name" value="Nexus-ui" />
+        <option name="namespace" value="@nexus-ui" />
+        <option name="baseUrl" value="https://nexus-ui.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Open-source component library of composable, copy-paste primitives for building AI interfaces (chat, streaming, multimodal)" />
+        <option name="homepage" value="https://nexus-ui.dev" />
+        <option name="urlTemplate" value="https://nexus-ui.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-nordaun" />
+        <option name="name" value="Nordaun" />
+        <option name="namespace" value="@nordaun" />
+        <option name="baseUrl" value="https://ui.nordaun.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Simple components for your extraordinary creations." />
+        <option name="homepage" value="https://ui.nordaun.com" />
+        <option name="urlTemplate" value="https://ui.nordaun.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-nteract" />
+        <option name="name" value="Nteract" />
+        <option name="namespace" value="@nteract" />
+        <option name="baseUrl" value="https://nteract-elements.vercel.app/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Components for interactive computing notebooks." />
+        <option name="homepage" value="https://nteract-elements.vercel.app/" />
+        <option name="urlTemplate" value="https://nteract-elements.vercel.app/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-nuqs" />
+        <option name="name" value="Nuqs" />
+        <option name="namespace" value="@nuqs" />
+        <option name="baseUrl" value="https://nuqs.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Custom parsers, adapters and utilities from the community for type-safe URL state management." />
+        <option name="homepage" value="https://nuqs.dev/registry" />
+        <option name="urlTemplate" value="https://nuqs.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-odysseyui" />
+        <option name="name" value="Odysseyui" />
+        <option name="namespace" value="@odysseyui" />
+        <option name="baseUrl" value="https://www.odysseyui.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A design focused component library for Next.js, built for speed, flexibility and developer experience." />
+        <option name="homepage" value="https://www.odysseyui.com/docs" />
+        <option name="urlTemplate" value="https://www.odysseyui.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-ogimagecn" />
+        <option name="name" value="Ogimagecn" />
+        <option name="namespace" value="@ogimagecn" />
+        <option name="baseUrl" value="https://ogimagecn.vercel.app/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Beautiful OG images, made simple. Ready to use, customizable Open Graph image components for React." />
+        <option name="homepage" value="https://ogimagecn.vercel.app" />
+        <option name="urlTemplate" value="https://ogimagecn.vercel.app/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-openpolicy" />
+        <option name="name" value="Openpolicy" />
+        <option name="namespace" value="@openpolicy" />
+        <option name="baseUrl" value="https://www.openpolicy.sh/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Open-source components for building terms, privacy policies and cookie banners." />
+        <option name="homepage" value="https://www.openpolicy.sh" />
+        <option name="urlTemplate" value="https://www.openpolicy.sh/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-openstatus" />
+        <option name="name" value="Openstatus" />
+        <option name="namespace" value="@openstatus" />
+        <option name="baseUrl" value="https://openstatus.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Hand-crafted, accessible components for building beautiful status pages." />
+        <option name="homepage" value="https://openstatus.dev/registry" />
+        <option name="urlTemplate" value="https://openstatus.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-optics" />
+        <option name="name" value="Optics" />
+        <option name="namespace" value="@optics" />
+        <option name="baseUrl" value="https://optics.agusmayol.com.ar/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A design system that distributes re-styled components, utilities, and hooks ready to use." />
+        <option name="homepage" value="https://optics.agusmayol.com.ar" />
+        <option name="urlTemplate" value="https://optics.agusmayol.com.ar/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-oui" />
+        <option name="name" value="Oui" />
+        <option name="namespace" value="@oui" />
+        <option name="baseUrl" value="https://oui.mw10013.workers.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="React Aria Components with shadcn characteristics.Copy-and-paste react aria components that run side-by-side with shadcn components." />
+        <option name="homepage" value="https://oui.mw10013.workers.dev" />
+        <option name="urlTemplate" value="https://oui.mw10013.workers.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-pacekit" />
+        <option name="name" value="Pacekit" />
+        <option name="namespace" value="@pacekit" />
+        <option name="baseUrl" value="https://ui.pacekit.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Carefully built UI blocks for real apps and dashboards, designed to integrate smoothly from early ideas to production releases." />
+        <option name="homepage" value="https://ui.pacekit.dev" />
+        <option name="urlTemplate" value="https://ui.pacekit.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-pacekit-gsap" />
+        <option name="name" value="Pacekit-gsap" />
+        <option name="namespace" value="@pacekit-gsap" />
+        <option name="baseUrl" value="https://gsap.pacekit.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Animated GSAP components crafted for smooth interaction and rich detail." />
+        <option name="homepage" value="https://gsap.pacekit.dev" />
+        <option name="urlTemplate" value="https://gsap.pacekit.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-paddle" />
+        <option name="name" value="Paddle" />
+        <option name="namespace" value="@paddle" />
+        <option name="baseUrl" value="https://developer.paddle.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Drop-in components for building checkouts, pricing pages, and subscription management screens using Paddle Billing." />
+        <option name="homepage" value="https://developer.paddle.com/" />
+        <option name="urlTemplate" value="https://developer.paddle.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-paletteui" />
+        <option name="name" value="Paletteui" />
+        <option name="namespace" value="@paletteui" />
+        <option name="baseUrl" value="https://paletteui.xyz/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Curated OKLCH color themes for shadcn/ui + visual theme editor with CSS, Tailwind v4, and Figma export." />
+        <option name="homepage" value="https://paletteui.xyz" />
+        <option name="urlTemplate" value="https://paletteui.xyz/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-pastecn" />
+        <option name="name" value="Pastecn" />
+        <option name="namespace" value="@pastecn" />
+        <option name="baseUrl" value="https://pastecn.com/r" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="pastebin + shadcn = pastecn. Paste your code and get a shadcn-compatible registry URL instantly." />
+        <option name="homepage" value="https://pastecn.com" />
+        <option name="urlTemplate" value="https://pastecn.com/r/{name}" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-paykit-sdk" />
+        <option name="name" value="Paykit-sdk" />
+        <option name="namespace" value="@paykit-sdk" />
+        <option name="baseUrl" value="https://www.usepaykit.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Unified payments SDK for builders — handle checkout, billing, and webhooks across Stripe, PayPal, Adyen, and regional gateways with a single integration." />
+        <option name="homepage" value="https://www.usepaykit.dev" />
+        <option name="urlTemplate" value="https://www.usepaykit.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-phucbm" />
+        <option name="name" value="Phucbm" />
+        <option name="namespace" value="@phucbm" />
+        <option name="baseUrl" value="https://phucbm.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A collection of modern React UI components with GSAP animations." />
+        <option name="homepage" value="https://phucbm.com/components" />
+        <option name="urlTemplate" value="https://phucbm.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-pixelact-ui" />
+        <option name="name" value="Pixelact-ui" />
+        <option name="namespace" value="@pixelact-ui" />
+        <option name="baseUrl" value="https://pixelactui.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Playful pixel art style components library built on top of shadcn. Perfect for retro style projects and games." />
+        <option name="homepage" value="https://pixelactui.com" />
+        <option name="urlTemplate" value="https://pixelactui.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-plate" />
+        <option name="name" value="Plate" />
+        <option name="namespace" value="@plate" />
+        <option name="baseUrl" value="https://platejs.org/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="AI-powered rich text editor for React." />
+        <option name="homepage" value="https://platejs.org" />
+        <option name="urlTemplate" value="https://platejs.org/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-prompt-kit" />
+        <option name="name" value="Prompt-kit" />
+        <option name="namespace" value="@prompt-kit" />
+        <option name="baseUrl" value="https://www.prompt-kit.com/c" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Core building blocks for AI apps. High-quality, accessible, and customizable components for AI interfaces." />
+        <option name="homepage" value="https://www.prompt-kit.com" />
+        <option name="urlTemplate" value="https://www.prompt-kit.com/c/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-prosekit" />
+        <option name="name" value="Prosekit" />
+        <option name="namespace" value="@prosekit" />
+        <option name="baseUrl" value="https://prosekit.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Powerful and flexible rich text editor for React, Vue, Preact, Svelte, and SolidJS." />
+        <option name="homepage" value="https://prosekit.dev" />
+        <option name="urlTemplate" value="https://prosekit.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-pulkitxm" />
+        <option name="name" value="Pulkitxm" />
+        <option name="namespace" value="@pulkitxm" />
+        <option name="baseUrl" value="https://pulkitxm.com/components" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Animated shadcn components powered by GSAP and Framer Motion. Built for expressive UIs." />
+        <option name="homepage" value="https://pulkitxm.com" />
+        <option name="urlTemplate" value="https://pulkitxm.com/components/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-pureui" />
+        <option name="name" value="Pureui" />
+        <option name="namespace" value="@pureui" />
+        <option name="baseUrl" value="https://pure.kam-ui.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Pure UI is a curated collection of refined, animated, and accessible components built with Base UI, Tailwind CSS, Motion, and other high-quality open source libraries." />
+        <option name="homepage" value="https://pure.kam-ui.com/" />
+        <option name="urlTemplate" value="https://pure.kam-ui.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-ramonclaudio-coderabbit" />
+        <option name="name" value="Ramonclaudio-coderabbit" />
+        <option name="namespace" value="@ramonclaudio-coderabbit" />
+        <option name="baseUrl" value="https://coderabbit-shadcn-registry.vercel.app/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A framework-agnostic API client, pluggable storage adapters (LocalStorage, Convex, Supabase, PostgreSQL, MySQL), and React components for generating developer activity reports." />
+        <option name="homepage" value="https://ramonclaudio.com/registries/coderabbit" />
+        <option name="urlTemplate" value="https://coderabbit-shadcn-registry.vercel.app/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-react-aria" />
+        <option name="name" value="React-aria" />
+        <option name="namespace" value="@react-aria" />
+        <option name="baseUrl" value="https://react-aria.adobe.com/registry" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Customizable Tailwind and Vanilla CSS components with adaptive interactions, top-tier accessibility, and internationalization." />
+        <option name="homepage" value="https://react-aria.adobe.com" />
+        <option name="urlTemplate" value="https://react-aria.adobe.com/registry/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-react-bits" />
+        <option name="name" value="React-bits" />
+        <option name="namespace" value="@react-bits" />
+        <option name="baseUrl" value="https://reactbits.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A large collection of animated, interactive &amp; fully customizable React components for building memorable websites. From smooth text animations all the way to eye-catching backgrounds, you can find it here." />
+        <option name="homepage" value="https://reactbits.dev" />
+        <option name="urlTemplate" value="https://reactbits.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-react-easy-modals" />
+        <option name="name" value="React-easy-modals" />
+        <option name="namespace" value="@react-easy-modals" />
+        <option name="baseUrl" value="https://react-easy-modals-docs.vercel.app/r/styles/{style}" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Modal component for react-easy-modals. Integrates with shadcn Dialog for a simple, powerful modal system with TypeScript support and promise-based API." />
+        <option name="homepage" value="https://react-easy-modals-docs.vercel.app" />
+        <option name="urlTemplate" value="https://react-easy-modals-docs.vercel.app/r/styles/{style}/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-react-slot" />
+        <option name="name" value="React-slot" />
+        <option name="namespace" value="@react-slot" />
+        <option name="baseUrl" value="https://react-slot.vercel.app/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Vue-style slot composition for React - Fine-grained control over component composition" />
+        <option name="homepage" value="https://react-slot.vercel.app/" />
+        <option name="urlTemplate" value="https://react-slot.vercel.app/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-remocn" />
+        <option name="name" value="Remocn" />
+        <option name="namespace" value="@remocn" />
+        <option name="baseUrl" value="https://www.remocn.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Production-ready components for Remotion - text animations, backgrounds, transitions, UI blocks, and full scene compositions" />
+        <option name="homepage" value="https://www.remocn.dev/" />
+        <option name="urlTemplate" value="https://www.remocn.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-rescript-shadcn" />
+        <option name="name" value="Rescript-shadcn" />
+        <option name="namespace" value="@rescript-shadcn" />
+        <option name="baseUrl" value="https://rescript-shadcn.miriad.studio/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Shadcn components rewritten in Rescript, compatible with shadcn CLI." />
+        <option name="homepage" value="https://rescript-shadcn.miriad.studio" />
+        <option name="urlTemplate" value="https://rescript-shadcn.miriad.studio/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-retroui" />
+        <option name="name" value="Retroui" />
+        <option name="namespace" value="@retroui" />
+        <option name="baseUrl" value="https://retroui.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A Neobrutalism styled React + TailwindCSS UI library for building bold, modern web apps. Perfect for any project using Shadcn/ui." />
+        <option name="homepage" value="https://retroui.dev" />
+        <option name="urlTemplate" value="https://retroui.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-reui" />
+        <option name="name" value="Reui" />
+        <option name="namespace" value="@reui" />
+        <option name="baseUrl" value="https://reui.io/r/{style}" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Free &amp; open-source library of 1,000+ components and patterns to 10x your productivity in shadcn projects." />
+        <option name="homepage" value="https://reui.io" />
+        <option name="urlTemplate" value="https://reui.io/r/{style}/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-roiui" />
+        <option name="name" value="Roiui" />
+        <option name="namespace" value="@roiui" />
+        <option name="baseUrl" value="https://roiui.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Roi UI is a library that offers UI components and blocks built with Base UI primitives. Some blocks and components use motion (framer). Everything is open-source and will be forever." />
+        <option name="homepage" value="https://roiui.com" />
+        <option name="urlTemplate" value="https://roiui.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-sabraman" />
+        <option name="name" value="Sabraman" />
+        <option name="namespace" value="@sabraman" />
+        <option name="baseUrl" value="https://sabraman.ru/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Legacy skeuomorphic UI components and blocks for shadcn." />
+        <option name="homepage" value="https://sabraman.ru/components" />
+        <option name="urlTemplate" value="https://sabraman.ru/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-satoriui" />
+        <option name="name" value="Satoriui" />
+        <option name="namespace" value="@satoriui" />
+        <option name="baseUrl" value="https://satoriui.site/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A comprehensive suite of high-fidelity interaction components. It offers motion-driven components that designed with motion-react and tailwindcss, that blends seamlessly." />
+        <option name="homepage" value="https://satoriui.site" />
+        <option name="urlTemplate" value="https://satoriui.site/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-scrollxui" />
+        <option name="name" value="Scrollxui" />
+        <option name="namespace" value="@scrollxui" />
+        <option name="baseUrl" value="https://www.scrollxui.dev/registry" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="ScrollX UI is an open-source React and shadcn-compatible component library for animated, interactive, and customizable user interfaces. It offers motion-driven components that blend seamlessly with modern ShadCN setups." />
+        <option name="homepage" value="https://www.scrollxui.dev" />
+        <option name="urlTemplate" value="https://www.scrollxui.dev/registry/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-shadcn-editor" />
+        <option name="name" value="Shadcn-editor" />
+        <option name="namespace" value="@shadcn-editor" />
+        <option name="baseUrl" value="https://raw.githubusercontent.com/htmujahid/shadcn-editor/refs/heads/main/public/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Accessible, Customizable, Rich Text Editor. Made with Lexical and Shadcn/UI. Open Source. Open Code." />
+        <option name="homepage" value="https://shadcn-editor.vercel.app" />
+        <option name="urlTemplate" value="https://raw.githubusercontent.com/htmujahid/shadcn-editor/refs/heads/main/public/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-shadcn-map" />
+        <option name="name" value="Shadcn-map" />
+        <option name="namespace" value="@shadcn-map" />
+        <option name="baseUrl" value="http://shadcn-map.vercel.app/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A map component for shadcn/ui. Built with Leaflet and React Leaflet." />
+        <option name="homepage" value="https://shadcn-map.vercel.app" />
+        <option name="urlTemplate" value="http://shadcn-map.vercel.app/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-shadcn-space" />
+        <option name="name" value="Shadcn-space" />
+        <option name="namespace" value="@shadcn-space" />
+        <option name="baseUrl" value="https://shadcnspace.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="ShadcnSpace is a collection of extra-ordinary, highly customizable shadcn/ui components, blocks, and themes to build modern UIs with speed and clarity." />
+        <option name="homepage" value="https://shadcnspace.com" />
+        <option name="urlTemplate" value="https://shadcnspace.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-shadcn-studio" />
+        <option name="name" value="Shadcn-studio" />
+        <option name="namespace" value="@shadcn-studio" />
+        <option name="baseUrl" value="https://shadcnstudio.com/r/{style}" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="An open-source set of shadcn/ui components, blocks, and templates with a powerful theme generator." />
+        <option name="homepage" value="https://shadcnstudio.com" />
+        <option name="urlTemplate" value="https://shadcnstudio.com/r/{style}/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-shadcnblocks" />
+        <option name="name" value="Shadcnblocks" />
+        <option name="namespace" value="@shadcnblocks" />
+        <option name="baseUrl" value="https://shadcnblocks.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A shadcn/ui registry with 1429 blocks, 1189 component variants, 14 templates, themes, and admin dashboard patterns." />
+        <option name="homepage" value="https://shadcnblocks.com" />
+        <option name="urlTemplate" value="https://shadcnblocks.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-shadcncraft" />
+        <option name="name" value="Shadcncraft" />
+        <option name="namespace" value="@shadcncraft" />
+        <option name="baseUrl" value="https://shadcncraft.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A starter collection of polished shadcn/ui components and blocks built to production standards. Part of a larger Figma + React system designed to scale with your product." />
+        <option name="homepage" value="https://shadcncraft.com" />
+        <option name="urlTemplate" value="https://shadcncraft.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-shadcndesign" />
+        <option name="name" value="Shadcndesign" />
+        <option name="namespace" value="@shadcndesign" />
+        <option name="baseUrl" value="https://shadcndesign-free.vercel.app/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A growing collection of high-quality blocks and themes for shadcn/ui." />
+        <option name="homepage" value="https://www.shadcndesign.com" />
+        <option name="urlTemplate" value="https://shadcndesign-free.vercel.app/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-shadcnhooks" />
+        <option name="name" value="Shadcnhooks" />
+        <option name="namespace" value="@shadcnhooks" />
+        <option name="baseUrl" value="https://shadcn-hooks.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A comprehensive React Hooks Collection built with Shadcn." />
+        <option name="homepage" value="https://shadcn-hooks.com" />
+        <option name="urlTemplate" value="https://shadcn-hooks.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-shadcnmaps" />
+        <option name="name" value="Shadcnmaps" />
+        <option name="namespace" value="@shadcnmaps" />
+        <option name="baseUrl" value="https://shadcnmaps.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Beautiful map components powered by pure SVG." />
+        <option name="homepage" value="https://shadcnmaps.com" />
+        <option name="urlTemplate" value="https://shadcnmaps.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-shadcnstore" />
+        <option name="name" value="Shadcnstore" />
+        <option name="namespace" value="@shadcnstore" />
+        <option name="baseUrl" value="https://shadcnstore.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A growing collection of shadcn/ui components, blocks, and templates for building modern web apps." />
+        <option name="homepage" value="https://www.shadcnstore.com" />
+        <option name="urlTemplate" value="https://shadcnstore.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-shadcnui-blocks" />
+        <option name="name" value="Shadcnui-blocks" />
+        <option name="namespace" value="@shadcnui-blocks" />
+        <option name="baseUrl" value="https://shadcnui-blocks.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A collection of premium, production-ready shadcn/ui blocks, components and templates." />
+        <option name="homepage" value="https://shadcnui-blocks.com" />
+        <option name="urlTemplate" value="https://shadcnui-blocks.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-shadcnuikit" />
+        <option name="name" value="Shadcnuikit" />
+        <option name="namespace" value="@shadcnuikit" />
+        <option name="baseUrl" value="https://shadcnuikit.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Launch your projects faster with admin dashboards, website templates, components, blocks, and pre-built real-world examples." />
+        <option name="homepage" value="https://shadcnuikit.com" />
+        <option name="urlTemplate" value="https://shadcnuikit.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-shark" />
+        <option name="name" value="Shark" />
+        <option name="namespace" value="@shark" />
+        <option name="baseUrl" value="https://shark.vini.one/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="shadcn/ui-style components built on Ark UI." />
+        <option name="homepage" value="https://shark.vini.one" />
+        <option name="urlTemplate" value="https://shark.vini.one/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-shieldcn" />
+        <option name="name" value="Shieldcn" />
+        <option name="namespace" value="@shieldcn" />
+        <option name="baseUrl" value="https://shieldcn.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Beautiful README badges as a service. A shields.io alternative with the visual quality of shadcn/ui. Drop-in SVG badge components for npm, GitHub, Discord, and more." />
+        <option name="homepage" value="https://shieldcn.dev" />
+        <option name="urlTemplate" value="https://shieldcn.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-skiper-ui" />
+        <option name="name" value="Skiper-ui" />
+        <option name="namespace" value="@skiper-ui" />
+        <option name="baseUrl" value="https://skiper-ui.com/registry" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Brand new uncommon components for your Next.js project. Use with ease through shadcn CLI 3.0, featuring fast-growing components and collections that are easy to edit and use." />
+        <option name="homepage" value="https://skiper-ui.com/" />
+        <option name="urlTemplate" value="https://skiper-ui.com/registry/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-slide-cn" />
+        <option name="name" value="Slide-cn" />
+        <option name="namespace" value="@slide-cn" />
+        <option name="baseUrl" value="https://slide-cn.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A component library to build slide decks using code." />
+        <option name="homepage" value="https://slide-cn.com" />
+        <option name="urlTemplate" value="https://slide-cn.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-smoothui" />
+        <option name="name" value="Smoothui" />
+        <option name="namespace" value="@smoothui" />
+        <option name="baseUrl" value="https://smoothui.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A collection of beautifully crafted motion components built with React, Framer Motion, and TailwindCSS. Designed to elevate microinteractions, each component focuses on smooth animations, subtle feedback, and delightful UX. Perfect for designers and developers who want to add refined motion to their interfaces — copy, paste, and make your UI come alive." />
+        <option name="homepage" value="https://smoothui.dev" />
+        <option name="urlTemplate" value="https://smoothui.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-solaceui" />
+        <option name="name" value="Solaceui" />
+        <option name="namespace" value="@solaceui" />
+        <option name="baseUrl" value="https://www.solaceui.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Production-ready and tastefully crafted sections, animated components, and full-page templates for Next.js, Tailwind CSS &amp; Motion" />
+        <option name="homepage" value="https://www.solaceui.com" />
+        <option name="urlTemplate" value="https://www.solaceui.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-sona-ui" />
+        <option name="name" value="Sona-ui" />
+        <option name="namespace" value="@sona-ui" />
+        <option name="baseUrl" value="https://sona-ui.vercel.app/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A modern UI component library built with React and TailwindCSS to help you build beautiful and accessible web applications faster." />
+        <option name="homepage" value="https://sona-ui.vercel.app" />
+        <option name="urlTemplate" value="https://sona-ui.vercel.app/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-soralabs" />
+        <option name="name" value="Soralabs" />
+        <option name="namespace" value="@soralabs" />
+        <option name="baseUrl" value="https://ui.soralabs.io.vn/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Motion-first React primitives and animated UI components for shadcn/ui. Copy, customize, and ship fluid interfaces." />
+        <option name="homepage" value="https://ui.soralabs.io.vn" />
+        <option name="urlTemplate" value="https://ui.soralabs.io.vn/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-soundcn" />
+        <option name="name" value="Soundcn" />
+        <option name="namespace" value="@soundcn" />
+        <option name="baseUrl" value="https://soundcn.xyz/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Large collection of game, interface, retro, and voice sound effects for web applications" />
+        <option name="homepage" value="https://soundcn.xyz" />
+        <option name="urlTemplate" value="https://soundcn.xyz/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-spectrumui" />
+        <option name="name" value="Spectrumui" />
+        <option name="namespace" value="@spectrumui" />
+        <option name="baseUrl" value="https://ui.spectrumhq.in/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A modern component library built with shadcn/ui and Tailwind CSS. Spectrum UI offers elegant, responsive components and smooth animations designed for high-quality interfaces." />
+        <option name="homepage" value="https://ui.spectrumhq.in" />
+        <option name="urlTemplate" value="https://ui.spectrumhq.in/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-spell" />
+        <option name="name" value="Spell" />
+        <option name="namespace" value="@spell" />
+        <option name="baseUrl" value="https://spell.sh/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Beautiful, sophisticated UI components designed for modern React and Tailwind CSS applications." />
+        <option name="homepage" value="https://spell.sh" />
+        <option name="urlTemplate" value="https://spell.sh/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-square-ui" />
+        <option name="name" value="Square-ui" />
+        <option name="namespace" value="@square-ui" />
+        <option name="baseUrl" value="https://square.lndev.me/registry" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Collection of beautifully crafted open-source layouts UI built with shadcn/ui." />
+        <option name="homepage" value="https://square.lndev.me" />
+        <option name="urlTemplate" value="https://square.lndev.me/registry/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-stepper" />
+        <option name="name" value="Stepper" />
+        <option name="namespace" value="@stepper" />
+        <option name="baseUrl" value="https://francozeta-stepper.vercel.app" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A modern, accessible and composable Stepper component for React and Tailwind CSS. Built for shadcn/ui-style workflows with registry-first distribution." />
+        <option name="homepage" value="https://francozeta-stepper.vercel.app" />
+        <option name="urlTemplate" value="https://francozeta-stepper.vercel.app/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-supabase" />
+        <option name="name" value="Supabase" />
+        <option name="namespace" value="@supabase" />
+        <option name="baseUrl" value="https://supabase.com/ui/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A collection of React components and blocks built on the shadcn/ui library that connect your front-end to your Supabase back-end via a single command." />
+        <option name="homepage" value="https://supabase.com/ui" />
+        <option name="urlTemplate" value="https://supabase.com/ui/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-svgl" />
+        <option name="name" value="Svgl" />
+        <option name="namespace" value="@svgl" />
+        <option name="baseUrl" value="https://svgl.app/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A beautiful library with SVG logos." />
+        <option name="homepage" value="https://svgl.app" />
+        <option name="urlTemplate" value="https://svgl.app/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-systaliko-ui" />
+        <option name="name" value="Systaliko-ui" />
+        <option name="namespace" value="@systaliko-ui" />
+        <option name="baseUrl" value="https://systaliko-ui.vercel.app/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="UI component library, Designed for flexibility, built for customization, and crafted to scale across variants and use cases." />
+        <option name="homepage" value="https://systaliko-ui.vercel.app" />
+        <option name="urlTemplate" value="https://systaliko-ui.vercel.app/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-tailark" />
+        <option name="name" value="Tailark" />
+        <option name="namespace" value="@tailark" />
+        <option name="baseUrl" value="https://tailark.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Shadcn blocks designed for building modern marketing websites." />
+        <option name="homepage" value="https://tailark.com" />
+        <option name="urlTemplate" value="https://tailark.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-tailgrids" />
+        <option name="name" value="Tailgrids" />
+        <option name="namespace" value="@tailgrids" />
+        <option name="baseUrl" value="https://tailgrids.com/docs/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="React UI Components, Powered by Tailwind CSS" />
+        <option name="homepage" value="https://tailgrids.com" />
+        <option name="urlTemplate" value="https://tailgrids.com/docs/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-tailwind-admin" />
+        <option name="name" value="Tailwind-admin" />
+        <option name="namespace" value="@tailwind-admin" />
+        <option name="baseUrl" value="https://tailwind-admin.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Tailwind Builder provides free tailwind admin dashboard templates, components and ui-blocks built with React, Next.js, Tailwind CSS, and shadcn/ui to help you build admin panels quickly and efficiently." />
+        <option name="homepage" value="https://tailwind-admin.com/" />
+        <option name="urlTemplate" value="https://tailwind-admin.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-tailwind-builder" />
+        <option name="name" value="Tailwind-builder" />
+        <option name="namespace" value="@tailwind-builder" />
+        <option name="baseUrl" value="https://tailwindbuilder.ai/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Tailwind Builder is a collection of free ui blocks and components and provide ai tools to generate production-ready forms, tables, and charts in seconds. Built with React, Next.js, Tailwind &amp; ShadCN." />
+        <option name="homepage" value="https://tailwindbuilder.ai/" />
+        <option name="urlTemplate" value="https://tailwindbuilder.ai/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-taki" />
+        <option name="name" value="Taki" />
+        <option name="namespace" value="@taki" />
+        <option name="baseUrl" value="https://taki-ui.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Beautifully designed, accessible components that you can copy and paste into your apps. Made with React Aria Components and Shadcn tokens." />
+        <option name="homepage" value="https://taki-ui.com" />
+        <option name="urlTemplate" value="https://taki-ui.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-termcn" />
+        <option name="name" value="Termcn" />
+        <option name="namespace" value="@termcn" />
+        <option name="baseUrl" value="https://termcn.vercel.app/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Beautiful terminal UIs, made simple. Ready to use, customizable terminal UI components for React." />
+        <option name="homepage" value="https://termcn.vercel.app" />
+        <option name="urlTemplate" value="https://termcn.vercel.app/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-terrae" />
+        <option name="name" value="Terrae" />
+        <option name="namespace" value="@terrae" />
+        <option name="baseUrl" value="https://www.terrae.dev" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Composable, animated map components for React. Built with TypeScript, Tailwind CSS, Mapbox GL JS, and MapLibre GL. Perfect companion for shadcn/ui." />
+        <option name="homepage" value="https://www.terrae.dev" />
+        <option name="urlTemplate" value="https://www.terrae.dev/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-text-ui" />
+        <option name="name" value="Text-ui" />
+        <option name="namespace" value="@text-ui" />
+        <option name="baseUrl" value="https://joelachance.github.io/text-ui/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A shadcn/ui registry with EchoText (`echo-text`): layered stroke text that follows the pointer—minimal setup, drop-in component." />
+        <option name="homepage" value="https://joelachance.github.io/text-ui/docs" />
+        <option name="urlTemplate" value="https://joelachance.github.io/text-ui/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-thegridcn" />
+        <option name="name" value="Thegridcn" />
+        <option name="namespace" value="@thegridcn" />
+        <option name="baseUrl" value="https://thegridcn.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A Tron-inspired shadcn/ui theme system with Greek god color schemes, glow intensity levels, and sci-fi components like DataCard, HUD, Radar, and more." />
+        <option name="homepage" value="https://thegridcn.com" />
+        <option name="urlTemplate" value="https://thegridcn.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-toc-cn" />
+        <option name="name" value="Toc-cn" />
+        <option name="namespace" value="@toc-cn" />
+        <option name="baseUrl" value="https://tocn.vercel.app/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Documentation-style in-page table of contents with scroll spy, animated SVG tree indicator, and mobile sticky collapsible." />
+        <option name="homepage" value="https://tocn.vercel.app" />
+        <option name="urlTemplate" value="https://tocn.vercel.app/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-tokenui" />
+        <option name="name" value="Tokenui" />
+        <option name="namespace" value="@tokenui" />
+        <option name="baseUrl" value="https://www.tokenui.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Beautiful, interactive documentation components for your design tokens following industry standards." />
+        <option name="homepage" value="https://www.tokenui.dev" />
+        <option name="urlTemplate" value="https://www.tokenui.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-tool-ui" />
+        <option name="name" value="Tool-ui" />
+        <option name="namespace" value="@tool-ui" />
+        <option name="baseUrl" value="https://www.tool-ui.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Open source React components for rendering AI tool call widgets and rich assistant outputs." />
+        <option name="homepage" value="https://www.tool-ui.com" />
+        <option name="urlTemplate" value="https://www.tool-ui.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-tour" />
+        <option name="name" value="Tour" />
+        <option name="namespace" value="@tour" />
+        <option name="baseUrl" value="https://onboarding-tour.vercel.app/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A component for building onboarding tours. Designed to integrate with shadcn/ui." />
+        <option name="homepage" value="https://onboarding-tour.vercel.app" />
+        <option name="urlTemplate" value="https://onboarding-tour.vercel.app/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-trophy-ui" />
+        <option name="name" value="Trophy-ui" />
+        <option name="namespace" value="@trophy-ui" />
+        <option name="baseUrl" value="https://ui.trophy.so/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Open-source gamification UI components for streaks, achievements, leaderboards, points, and more. Built on shadcn/ui and Tailwind CSS." />
+        <option name="homepage" value="https://ui.trophy.so" />
+        <option name="urlTemplate" value="https://ui.trophy.so/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-turbopills-ui" />
+        <option name="name" value="Turbopills-ui" />
+        <option name="namespace" value="@turbopills-ui" />
+        <option name="baseUrl" value="https://ui.turbopills.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Beautiful, accessible, and customizable React components for your telehealth applications." />
+        <option name="homepage" value="https://www.turbopills.com/ui/docs" />
+        <option name="urlTemplate" value="https://ui.turbopills.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-typedora-ui" />
+        <option name="name" value="Typedora-ui" />
+        <option name="namespace" value="@typedora-ui" />
+        <option name="baseUrl" value="https://typedora-ui.netlify.app/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Typedora UI is a next-generation extension layer for shadcn/ui, designed to bring full type-safety to your UI components." />
+        <option name="homepage" value="https://typedora-ui.netlify.app" />
+        <option name="urlTemplate" value="https://typedora-ui.netlify.app/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-ui-layouts" />
+        <option name="name" value="Ui-layouts" />
+        <option name="namespace" value="@ui-layouts" />
+        <option name="baseUrl" value="https://ui-layouts.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="UI Layouts offers components, effects, design tools, and ready-made blocks that make building modern interfaces more efficient—built with React, Next.js, Tailwind CSS, and shadcn/ui." />
+        <option name="homepage" value="https://ui-layouts.com/" />
+        <option name="urlTemplate" value="https://ui-layouts.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-uicapsule" />
+        <option name="name" value="Uicapsule" />
+        <option name="namespace" value="@uicapsule" />
+        <option name="baseUrl" value="https://uicapsule.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A curated collection of components that spark joy. Featuring interactive concepts, design experiments, and components in the intersection of AI/UI." />
+        <option name="homepage" value="https://uicapsule.com" />
+        <option name="urlTemplate" value="https://uicapsule.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-uitripled" />
+        <option name="name" value="Uitripled" />
+        <option name="namespace" value="@uitripled" />
+        <option name="baseUrl" value="https://ui.tripled.work/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="An open-source, Production-ready UI components and blocks powered by shadcn/ui and Framer Motion" />
+        <option name="homepage" value="https://ui.tripled.work" />
+        <option name="urlTemplate" value="https://ui.tripled.work/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-unlumen-ui" />
+        <option name="name" value="Unlumen-ui" />
+        <option name="namespace" value="@unlumen-ui" />
+        <option name="baseUrl" value="https://ui.unlumen.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Primitives and components with serious attention to animation and design. Copy, own, ship." />
+        <option name="homepage" value="https://ui.unlumen.com" />
+        <option name="urlTemplate" value="https://ui.unlumen.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-untld" />
+        <option name="name" value="Untld" />
+        <option name="namespace" value="@untld" />
+        <option name="baseUrl" value="https://ui.untldlabs.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A set of beautifully designed components for modern web applications." />
+        <option name="homepage" value="https://ui.untldlabs.com" />
+        <option name="urlTemplate" value="https://ui.untldlabs.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-uselayouts" />
+        <option name="name" value="Uselayouts" />
+        <option name="namespace" value="@uselayouts" />
+        <option name="baseUrl" value="https://uselayouts.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A collection of premium animated React components and micro-interactions built with Motion for building fluid, professional interfaces." />
+        <option name="homepage" value="https://uselayouts.com" />
+        <option name="urlTemplate" value="https://uselayouts.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-utilcn" />
+        <option name="name" value="Utilcn" />
+        <option name="namespace" value="@utilcn" />
+        <option name="baseUrl" value="https://utilcn.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Fullstack registry items to start those big features. Utilcn has ChatGPT Apps, file uploading (with progress bars) and downloading, and a way to make your env vars typesafe on the backend." />
+        <option name="homepage" value="https://utilcn.dev" />
+        <option name="urlTemplate" value="https://utilcn.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-w3-kit" />
+        <option name="name" value="W3-kit" />
+        <option name="namespace" value="@w3-kit" />
+        <option name="baseUrl" value="https://w3-kit.com/registry" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Web3 UI components for blockchain dApps. Includes wallet connection, token swaps, NFT cards, staking interfaces, and 20+ more crypto components." />
+        <option name="homepage" value="https://w3-kit.com" />
+        <option name="urlTemplate" value="https://w3-kit.com/registry/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-wandry-ui" />
+        <option name="name" value="Wandry-ui" />
+        <option name="namespace" value="@wandry-ui" />
+        <option name="baseUrl" value="https://ui.wandry.com.ua/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A set of open source fully controlled React Inertia form elements" />
+        <option name="homepage" value="http://ui.wandry.com.ua/" />
+        <option name="urlTemplate" value="https://ui.wandry.com.ua/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-waves-cn" />
+        <option name="name" value="Waves-cn" />
+        <option name="namespace" value="@waves-cn" />
+        <option name="baseUrl" value="https://waves-cn.vercel.app/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A collection of wave players and waveform components built with wavesurfer.js and shadcn/ui." />
+        <option name="homepage" value="https://waves-cn.vercel.app" />
+        <option name="urlTemplate" value="https://waves-cn.vercel.app/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-wds" />
+        <option name="name" value="Wds" />
+        <option name="namespace" value="@wds" />
+        <option name="baseUrl" value="https://wds-shadcn-registry.netlify.app/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A collection of accessible components built for use with Shadcn." />
+        <option name="homepage" value="https://wds-shadcn-registry.netlify.app/" />
+        <option name="urlTemplate" value="https://wds-shadcn-registry.netlify.app/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-wensity" />
+        <option name="name" value="Wensity" />
+        <option name="namespace" value="@wensity" />
+        <option name="baseUrl" value="https://raw.githubusercontent.com/ksparth12/wensity-shadcn-registry/main" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Motion-rich React components for AI interfaces, SaaS blocks, and cinematic interactions. Free Wensity components only." />
+        <option name="homepage" value="https://wensity.com" />
+        <option name="urlTemplate" value="https://raw.githubusercontent.com/ksparth12/wensity-shadcn-registry/main/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-wigggle-ui" />
+        <option name="name" value="Wigggle-ui" />
+        <option name="namespace" value="@wigggle-ui" />
+        <option name="baseUrl" value="https://wigggle-ui.vercel.app/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="A beautiful collection of copy-and-paste widgets for your next project." />
+        <option name="homepage" value="https://wigggle-ui.vercel.app" />
+        <option name="urlTemplate" value="https://wigggle-ui.vercel.app/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-heatmap" />
+        <option name="name" value="Heatmap" />
+        <option name="namespace" value="@heatmap" />
+        <option name="baseUrl" value="https://shadcn-heatmap.pages.dev/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Beautiful, accessible heatmap components for React: GitHub-style calendar, weekday x hour matrix, date x hour, and status timeline. Built with shadcn/ui conventions." />
+        <option name="homepage" value="https://shadcn-heatmap.pages.dev" />
+        <option name="urlTemplate" value="https://shadcn-heatmap.pages.dev/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-xcn" />
+        <option name="name" value="Xcn" />
+        <option name="namespace" value="@xcn" />
+        <option name="baseUrl" value="https://ui.radiumcoders.com/r/xcn" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Hand-crafted, beautiful, and minimal UI components built with Tailwind CSS and Motion." />
+        <option name="homepage" value="https://ui.radiumcoders.com" />
+        <option name="urlTemplate" value="https://ui.radiumcoders.com/r/xcn/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-saaskit" />
+        <option name="name" value="Saaskit" />
+        <option name="namespace" value="@saaskit" />
+        <option name="baseUrl" value="https://saaskit-theta.vercel.app/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="10 essential shadcn/ui components for B2B SaaS: Pricing, Billing, Usage, and Onboarding. Minimalist Soft Brutalist design." />
+        <option name="homepage" value="https://saaskit-theta.vercel.app" />
+        <option name="urlTemplate" value="https://saaskit-theta.vercel.app/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-zippystarter" />
+        <option name="name" value="Zippystarter" />
+        <option name="namespace" value="@zippystarter" />
+        <option name="baseUrl" value="https://zippystarter.com/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Expertly crafted blocks, components &amp; themes for shadcn/ui." />
+        <option name="homepage" value="https://zippystarter.com" />
+        <option name="urlTemplate" value="https://zippystarter.com/r/{name}.json" />
+      </RegistryConfigState>
+      <RegistryConfigState>
+        <option name="id" value="central-kaui" />
+        <option name="name" value="Kaui" />
+        <option name="namespace" value="@kaui" />
+        <option name="baseUrl" value="https://kaui-shadcn-registry.vercel.app/r" />
+        <option name="stylePath" value="/{name}.json" />
+        <option name="type" value="community" />
+        <option name="enabled" value="false" />
+        <option name="description" value="Personal well crafted components for Shadcn ui" />
+        <option name="homepage" value="https://kaui-shadcn-registry.vercel.app" />
+        <option name="urlTemplate" value="https://kaui-shadcn-registry.vercel.app/r/{name}.json" />
+      </RegistryConfigState>
+    </registryConfigs>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 2019e4c..bbf37cc 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -3,14 +3,30 @@
   <component name="ChangeListManager">
     <list default="true" id="89f9fc3a-63ad-41cb-8d25-f07df352eb98" name="Changes" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/lib/zip-processing.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/zip-processing.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/agents.md" beforeDir="false" afterPath="$PROJECT_DIR$/agents.md" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/pnpm-lock.yaml" beforeDir="false" afterPath="$PROJECT_DIR$/pnpm-lock.yaml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/lib/components/Button.svelte" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/lib/components/Card.svelte" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/lib/components/ProcessedZipArchiveEditor.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/components/ProcessedZipArchiveEditor.svelte" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/lib/components/ZipDropzone.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/components/ZipDropzone.svelte" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/lib/nom-theme.css" beforeDir="false" />
       <change beforePath="$PROJECT_DIR$/src/routes/+page.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/routes/+page.svelte" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/routes/layout.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/routes/layout.css" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
     <option name="LAST_RESOLUTION" value="IGNORE" />
   </component>
+  <component name="FileTemplateManagerImpl">
+    <option name="RECENT_TEMPLATES">
+      <list>
+        <option value="CSS File" />
+        <option value="TypeScript File" />
+      </list>
+    </option>
+  </component>
   <component name="Git.Settings">
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
   </component>
@@ -20,29 +36,33 @@
   &quot;fromUser&quot;: false
 }</component>
   <component name="ProjectId" id="3Ez6dWfFxFKqFN56n3L3nruEC06" />
+  <component name="ProjectLevelVcsManager">
+    <ConfirmationsSetting value="1" id="Add" />
+  </component>
   <component name="ProjectViewState">
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent"><![CDATA[{
-  "keyToString": {
-    "ModuleVcsDetector.initialDetectionPerformed": "true",
-    "RunOnceActivity.ShowReadmeOnStart": "true",
-    "RunOnceActivity.TerminalTabsStorage.copyFrom.TerminalArrangementManager.252": "true",
-    "RunOnceActivity.cidr.known.project.marker": "true",
-    "RunOnceActivity.git.unshallow": "true",
-    "RunOnceActivity.readMode.enableVisualFormatting": "true",
-    "RunOnceActivity.typescript.service.memoryLimit.init": "true",
-    "cidr.known.project.marker": "true",
-    "codeWithMe.voiceChat.enabledByDefault": "false",
-    "git-widget-placeholder": "features/zip-processing",
-    "last_opened_file_path": "/home/rehlert/repos/juri-merger",
-    "nodejs_package_manager_path": "pnpm",
-    "settings.editor.selected.configurable": "proofread",
-    "ts.external.directory.path": "/home/rehlert/repos/juri-merger/node_modules/typescript/lib",
-    "vue.rearranger.settings.migration": "true"
+  <component name="PropertiesComponent">{
+  &quot;keyToString&quot;: {
+    &quot;ModuleVcsDetector.initialDetectionPerformed&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.TerminalTabsStorage.copyFrom.TerminalArrangementManager.252&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.cidr.known.project.marker&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.readMode.enableVisualFormatting&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.typescript.service.memoryLimit.init&quot;: &quot;true&quot;,
+    &quot;cidr.known.project.marker&quot;: &quot;true&quot;,
+    &quot;codeWithMe.voiceChat.enabledByDefault&quot;: &quot;false&quot;,
+    &quot;git-widget-placeholder&quot;: &quot;features/shadcn&quot;,
+    &quot;last_opened_file_path&quot;: &quot;/home/rehlert/repos/juri-merger&quot;,
+    &quot;list.type.of.created.stylesheet&quot;: &quot;CSS&quot;,
+    &quot;nodejs_package_manager_path&quot;: &quot;pnpm&quot;,
+    &quot;settings.editor.selected.configurable&quot;: &quot;preferences.pluginManager&quot;,
+    &quot;ts.external.directory.path&quot;: &quot;/home/rehlert/repos/juri-merger/node_modules/typescript/lib&quot;,
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
   }
-}]]></component>
+}</component>
   <component name="TaskManager">
     <task active="true" id="Default" summary="Default task">
       <changelist id="89f9fc3a-63ad-41cb-8d25-f07df352eb98" name="Changes" comment="" />
@@ -55,6 +75,8 @@
       <workItem from="1781349431536" duration="3602000" />
       <workItem from="1781378743498" duration="306000" />
       <workItem from="1781534483559" duration="2103000" />
+      <workItem from="1781597500009" duration="2733000" />
+      <workItem from="1781621908149" duration="4121000" />
     </task>
     <task id="LOCAL-00001" summary="adapts styling of rvg.legal">
       <option name="closed" value="true" />
diff --git a/components.json b/components.json
new file mode 100644
index 0000000..eaea37d
--- /dev/null
+++ b/components.json
@@ -0,0 +1,20 @@
+{
+	"$schema": "https://shadcn-svelte.com/schema.json",
+	"tailwind": {
+		"css": "src/routes/layout.css",
+		"baseColor": "neutral"
+	},
+	"aliases": {
+		"components": "$lib/components",
+		"utils": "$lib/utils",
+		"ui": "$lib/components/ui",
+		"hooks": "$lib/hooks",
+		"lib": "$lib"
+	},
+	"typescript": true,
+	"registry": "https://shadcn-svelte.com/registry",
+	"style": "nova",
+	"iconLibrary": "lucide",
+	"menuColor": "default",
+	"menuAccent": "subtle"
+}
diff --git a/package.json b/package.json
index 73440b7..0646071 100644
--- a/package.json
+++ b/package.json
@@ -14,18 +14,27 @@
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
+		"@fontsource-variable/geist": "^5.2.9",
+		"@lucide/svelte": "^1.18.0",
 		"@sveltejs/adapter-auto": "^7.0.1",
 		"@sveltejs/kit": "^2.63.0",
 		"@sveltejs/vite-plugin-svelte": "^7.1.2",
 		"@tailwindcss/forms": "^0.5.11",
 		"@tailwindcss/typography": "^0.5.19",
 		"@tailwindcss/vite": "^4.3.0",
+		"bits-ui": "2.18.1",
+		"class-variance-authority": "0.7.1",
+		"clsx": "2.1.1",
 		"prettier": "^3.8.3",
 		"prettier-plugin-svelte": "^4.1.0",
 		"prettier-plugin-tailwindcss": "^0.8.0",
+		"shadcn-svelte": "1.3.0",
 		"svelte": "^5.56.1",
 		"svelte-check": "^4.6.0",
+		"tailwind-merge": "3.6.0",
+		"tailwind-variants": "^3.2.2",
 		"tailwindcss": "^4.3.0",
+		"tw-animate-css": "^1.4.0",
 		"typescript": "^6.0.3",
 		"vite": "^8.0.16"
 	},
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f2d5523..bbfb053 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,6 +18,12 @@ importers:
         specifier: ^6.0.227
         version: 6.0.227
     devDependencies:
+      '@fontsource-variable/geist':
+        specifier: ^5.2.9
+        version: 5.2.9
+      '@lucide/svelte':
+        specifier: ^1.18.0
+        version: 1.18.0(svelte@5.56.3)
       '@sveltejs/adapter-auto':
         specifier: ^7.0.1
         version: 7.0.1(@sveltejs/kit@2.64.0(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.56.3)(vite@8.0.16(jiti@2.7.0)))(svelte@5.56.3)(typescript@6.0.3)(vite@8.0.16(jiti@2.7.0)))
@@ -36,6 +42,15 @@ importers:
       '@tailwindcss/vite':
         specifier: ^4.3.0
         version: 4.3.0(vite@8.0.16(jiti@2.7.0))
+      bits-ui:
+        specifier: 2.18.1
+        version: 2.18.1(@internationalized/date@3.12.2)(@sveltejs/kit@2.64.0(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.56.3)(vite@8.0.16(jiti@2.7.0)))(svelte@5.56.3)(typescript@6.0.3)(vite@8.0.16(jiti@2.7.0)))(svelte@5.56.3)
+      class-variance-authority:
+        specifier: 0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
       prettier:
         specifier: ^3.8.3
         version: 3.8.4
@@ -45,15 +60,27 @@ importers:
       prettier-plugin-tailwindcss:
         specifier: ^0.8.0
         version: 0.8.0(prettier-plugin-svelte@4.1.0(prettier@3.8.4)(svelte@5.56.3))(prettier@3.8.4)
+      shadcn-svelte:
+        specifier: 1.3.0
+        version: 1.3.0(svelte@5.56.3)
       svelte:
         specifier: ^5.56.1
         version: 5.56.3
       svelte-check:
         specifier: ^4.6.0
         version: 4.6.0(picomatch@4.0.4)(svelte@5.56.3)(typescript@6.0.3)
+      tailwind-merge:
+        specifier: 3.6.0
+        version: 3.6.0
+      tailwind-variants:
+        specifier: ^3.2.2
+        version: 3.2.2(tailwind-merge@3.6.0)(tailwindcss@4.3.0)
       tailwindcss:
         specifier: ^4.3.0
         version: 4.3.0
+      tw-animate-css:
+        specifier: ^1.4.0
+        version: 1.4.0
       typescript:
         specifier: ^6.0.3
         version: 6.0.3
@@ -72,6 +99,21 @@ packages:
   '@emnapi/wasi-threads@1.2.1':
     resolution: {integrity: sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==}
 
+  '@floating-ui/core@1.7.5':
+    resolution: {integrity: sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==}
+
+  '@floating-ui/dom@1.7.6':
+    resolution: {integrity: sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==}
+
+  '@floating-ui/utils@0.2.11':
+    resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
+
+  '@fontsource-variable/geist@5.2.9':
+    resolution: {integrity: sha512-TP+QSBG3wxKGPE33CbMy/L0Nu3qvJ6Fy81Yc4LnQ95xH+i+cfEp8fyU8/kfV14YwszxIFPhnoMTbjL71waVpyQ==}
+
+  '@internationalized/date@3.12.2':
+    resolution: {integrity: sha512-FY1Y+H64NDs+HAF6omlnWxm3mEpfgaCSWtL5l551ZZfImA+kGjPFgrnJrGjH6lfmLL0g8Z/mBu1R3kufeCp6Jw==}
+
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
@@ -88,6 +130,11 @@ packages:
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
+  '@lucide/svelte@1.18.0':
+    resolution: {integrity: sha512-S1cjiJflMLIirDZtZ8ou2Vy0xMrOqEQzYzDo29AUxoJiOjUfMHUeClvprJsGUEr60RYDJzEgkjSkWm1nlN9iyQ==}
+    peerDependencies:
+      svelte: ^5
+
   '@napi-rs/canvas-android-arm64@1.0.0':
     resolution: {integrity: sha512-3hNKJObUK7JsCF9aJlVCs1J0/KE/gGfZNeK8MO1ge6bB3aicr5walGme9t9No1f/oyk9GgvdAT/rjSdsx3gbIw==}
     engines: {node: '>= 10'}
@@ -319,6 +366,9 @@ packages:
       svelte: ^5.46.4
       vite: ^8.0.0-beta.7 || ^8.0.0
 
+  '@swc/helpers@0.5.23':
+    resolution: {integrity: sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw==}
+
   '@tailwindcss/forms@0.5.11':
     resolution: {integrity: sha512-h9wegbZDPurxG22xZSoWtdzc41/OlNEUQERNqI/0fOwa2aVlWGu7C35E/x6LDyD3lgtztFSSjKZyuVM0hxhbgA==}
     peerDependencies:
@@ -448,14 +498,28 @@ packages:
     resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
     engines: {node: '>= 0.4'}
 
+  bits-ui@2.18.1:
+    resolution: {integrity: sha512-KkemzKFH4T3gt3H+P86JcnAWExjByv/6vlwjm/BoCwTPHu03yiCdxbghdJLvFReQTe0acCAiRcKfmixxD6XvlA==}
+    engines: {node: '>=20'}
+    peerDependencies:
+      '@internationalized/date': ^3.8.1
+      svelte: ^5.33.0
+
   chokidar@4.0.3:
     resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
     engines: {node: '>= 14.16.0'}
 
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
   clsx@2.1.1:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
 
+  commander@14.0.3:
+    resolution: {integrity: sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==}
+    engines: {node: '>=20'}
+
   cookie@0.6.0:
     resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==}
     engines: {node: '>= 0.6'}
@@ -469,6 +533,10 @@ packages:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
 
+  dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+
   detect-libc@2.1.2:
     resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
@@ -511,6 +579,9 @@ packages:
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
+  inline-style-parser@0.2.7:
+    resolution: {integrity: sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==}
+
   is-reference@3.0.3:
     resolution: {integrity: sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==}
 
@@ -599,6 +670,10 @@ packages:
   locate-character@3.0.0:
     resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
 
+  lz-string@1.5.0:
+    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
+    hasBin: true
+
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
@@ -619,6 +694,9 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  node-fetch-native@1.6.7:
+    resolution: {integrity: sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==}
+
   obug@2.1.2:
     resolution: {integrity: sha512-AWGB9WFcRXOQs48Z/udjI5ZcZMHXwX8XPByNpOydgcGsDLIzjGizhoMWJyKAWze7AVW/2W1i+/gPX4YtKe5cyg==}
     engines: {node: '>=12.20.0'}
@@ -724,6 +802,15 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
+  runed@0.35.1:
+    resolution: {integrity: sha512-2F4Q/FZzbeJTFdIS/PuOoPRSm92sA2LhzTnv6FXhCoENb3huf5+fDuNOg1LNvGOouy3u/225qxmuJvcV3IZK5Q==}
+    peerDependencies:
+      '@sveltejs/kit': ^2.21.0
+      svelte: ^5.7.0
+    peerDependenciesMeta:
+      '@sveltejs/kit':
+        optional: true
+
   sade@1.8.1:
     resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
     engines: {node: '>=6'}
@@ -731,6 +818,12 @@ packages:
   set-cookie-parser@3.1.0:
     resolution: {integrity: sha512-kjnC1DXBHcxaOaOXBHBeRtltsDG2nUiUni+jP92M9gYdW12rsmx92UsfpH7o5tDRs7I1ZZPSQJQGv3UaRfCiuw==}
 
+  shadcn-svelte@1.3.0:
+    resolution: {integrity: sha512-Pd4ICWTkTks/b2YU4c9vF2XsX1x5HFPRl5bKszS1LcnWS83x+7T4WiIvbWz8Qh9knkcGZ+SCz1+Dmhdq+AYooA==}
+    hasBin: true
+    peerDependencies:
+      svelte: ^5.0.0
+
   sirv@3.0.2:
     resolution: {integrity: sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==}
     engines: {node: '>=18'}
@@ -739,6 +832,9 @@ packages:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
+  style-to-object@1.0.14:
+    resolution: {integrity: sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==}
+
   svelte-check@4.6.0:
     resolution: {integrity: sha512-KhVnDFDSid57mmZtHz8gfW8AAGylOZ0vPnOIzVmAL+urzwK8sBYXRss953gD8T0OdgAQ11mdWhE6uadmtOz8TQ==}
     engines: {node: '>= 18.0.0'}
@@ -747,10 +843,32 @@ packages:
       svelte: ^4.0.0 || ^5.0.0-next.0
       typescript: '>=5.0.0'
 
+  svelte-toolbelt@0.10.6:
+    resolution: {integrity: sha512-YWuX+RE+CnWYx09yseAe4ZVMM7e7GRFZM6OYWpBKOb++s+SQ8RBIMMe+Bs/CznBMc0QPLjr+vDBxTAkozXsFXQ==}
+    engines: {node: '>=18', pnpm: '>=8.7.0'}
+    peerDependencies:
+      svelte: ^5.30.2
+
   svelte@5.56.3:
     resolution: {integrity: sha512-w7JvrM5IFl5cmfbY0TLik9o7mjRUJmRMhOR51tBPu708Gr/MjbGs7VnJnr/B0CaXeI4vtnOh7RKxDr0cwhMdDA==}
     engines: {node: '>=18'}
 
+  tabbable@6.4.0:
+    resolution: {integrity: sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==}
+
+  tailwind-merge@3.6.0:
+    resolution: {integrity: sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==}
+
+  tailwind-variants@3.2.2:
+    resolution: {integrity: sha512-Mi4kHeMTLvKlM98XPnK+7HoBPmf4gygdFmqQPaDivc3DpYS6aIY6KiG/PgThrGvii5YZJqRsPz0aPyhoFzmZgg==}
+    engines: {node: '>=16.x', pnpm: '>=7.x'}
+    peerDependencies:
+      tailwind-merge: '>=3.0.0'
+      tailwindcss: '*'
+    peerDependenciesMeta:
+      tailwind-merge:
+        optional: true
+
   tailwindcss@4.3.0:
     resolution: {integrity: sha512-y6nxMGB1nMW9R6k96e5gdIFzcfL/gTJRNaqGes1YvkLnPVXzWgbqFF2yLC0T8G774n24cx3Pe8XrKoniCOAH+Q==}
 
@@ -772,6 +890,9 @@ packages:
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
+  tw-animate-css@1.4.0:
+    resolution: {integrity: sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==}
+
   typescript@6.0.3:
     resolution: {integrity: sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==}
     engines: {node: '>=14.17'}
@@ -852,6 +973,23 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@floating-ui/core@1.7.5':
+    dependencies:
+      '@floating-ui/utils': 0.2.11
+
+  '@floating-ui/dom@1.7.6':
+    dependencies:
+      '@floating-ui/core': 1.7.5
+      '@floating-ui/utils': 0.2.11
+
+  '@floating-ui/utils@0.2.11': {}
+
+  '@fontsource-variable/geist@5.2.9': {}
+
+  '@internationalized/date@3.12.2':
+    dependencies:
+      '@swc/helpers': 0.5.23
+
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -871,6 +1009,10 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  '@lucide/svelte@1.18.0(svelte@5.56.3)':
+    dependencies:
+      svelte: 5.56.3
+
   '@napi-rs/canvas-android-arm64@1.0.0':
     optional: true
 
@@ -1030,6 +1172,10 @@ snapshots:
       vite: 8.0.16(jiti@2.7.0)
       vitefu: 1.1.3(vite@8.0.16(jiti@2.7.0))
 
+  '@swc/helpers@0.5.23':
+    dependencies:
+      tslib: 2.8.1
+
   '@tailwindcss/forms@0.5.11(tailwindcss@4.3.0)':
     dependencies:
       mini-svg-data-uri: 1.4.4
@@ -1125,18 +1271,39 @@ snapshots:
 
   axobject-query@4.1.0: {}
 
+  bits-ui@2.18.1(@internationalized/date@3.12.2)(@sveltejs/kit@2.64.0(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.56.3)(vite@8.0.16(jiti@2.7.0)))(svelte@5.56.3)(typescript@6.0.3)(vite@8.0.16(jiti@2.7.0)))(svelte@5.56.3):
+    dependencies:
+      '@floating-ui/core': 1.7.5
+      '@floating-ui/dom': 1.7.6
+      '@internationalized/date': 3.12.2
+      esm-env: 1.2.2
+      runed: 0.35.1(@sveltejs/kit@2.64.0(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.56.3)(vite@8.0.16(jiti@2.7.0)))(svelte@5.56.3)(typescript@6.0.3)(vite@8.0.16(jiti@2.7.0)))(svelte@5.56.3)
+      svelte: 5.56.3
+      svelte-toolbelt: 0.10.6(@sveltejs/kit@2.64.0(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.56.3)(vite@8.0.16(jiti@2.7.0)))(svelte@5.56.3)(typescript@6.0.3)(vite@8.0.16(jiti@2.7.0)))(svelte@5.56.3)
+      tabbable: 6.4.0
+    transitivePeerDependencies:
+      - '@sveltejs/kit'
+
   chokidar@4.0.3:
     dependencies:
       readdirp: 4.1.2
 
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
   clsx@2.1.1: {}
 
+  commander@14.0.3: {}
+
   cookie@0.6.0: {}
 
   cssesc@3.0.0: {}
 
   deepmerge@4.3.1: {}
 
+  dequal@2.0.3: {}
+
   detect-libc@2.1.2: {}
 
   devalue@5.8.1: {}
@@ -1163,6 +1330,8 @@ snapshots:
 
   graceful-fs@4.2.11: {}
 
+  inline-style-parser@0.2.7: {}
+
   is-reference@3.0.3:
     dependencies:
       '@types/estree': 1.0.9
@@ -1222,6 +1391,8 @@ snapshots:
 
   locate-character@3.0.0: {}
 
+  lz-string@1.5.0: {}
+
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -1234,6 +1405,8 @@ snapshots:
 
   nanoid@3.3.12: {}
 
+  node-fetch-native@1.6.7: {}
+
   obug@2.1.2: {}
 
   pako@1.0.11: {}
@@ -1300,12 +1473,29 @@ snapshots:
       '@rolldown/binding-win32-arm64-msvc': 1.0.3
       '@rolldown/binding-win32-x64-msvc': 1.0.3
 
+  runed@0.35.1(@sveltejs/kit@2.64.0(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.56.3)(vite@8.0.16(jiti@2.7.0)))(svelte@5.56.3)(typescript@6.0.3)(vite@8.0.16(jiti@2.7.0)))(svelte@5.56.3):
+    dependencies:
+      dequal: 2.0.3
+      esm-env: 1.2.2
+      lz-string: 1.5.0
+      svelte: 5.56.3
+    optionalDependencies:
+      '@sveltejs/kit': 2.64.0(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.56.3)(vite@8.0.16(jiti@2.7.0)))(svelte@5.56.3)(typescript@6.0.3)(vite@8.0.16(jiti@2.7.0))
+
   sade@1.8.1:
     dependencies:
       mri: 1.2.0
 
   set-cookie-parser@3.1.0: {}
 
+  shadcn-svelte@1.3.0(svelte@5.56.3):
+    dependencies:
+      commander: 14.0.3
+      node-fetch-native: 1.6.7
+      postcss: 8.5.15
+      svelte: 5.56.3
+      tailwind-merge: 3.6.0
+
   sirv@3.0.2:
     dependencies:
       '@polka/url': 1.0.0-next.29
@@ -1314,6 +1504,10 @@ snapshots:
 
   source-map-js@1.2.1: {}
 
+  style-to-object@1.0.14:
+    dependencies:
+      inline-style-parser: 0.2.7
+
   svelte-check@4.6.0(picomatch@4.0.4)(svelte@5.56.3)(typescript@6.0.3):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.31
@@ -1327,6 +1521,15 @@ snapshots:
     transitivePeerDependencies:
       - picomatch
 
+  svelte-toolbelt@0.10.6(@sveltejs/kit@2.64.0(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.56.3)(vite@8.0.16(jiti@2.7.0)))(svelte@5.56.3)(typescript@6.0.3)(vite@8.0.16(jiti@2.7.0)))(svelte@5.56.3):
+    dependencies:
+      clsx: 2.1.1
+      runed: 0.35.1(@sveltejs/kit@2.64.0(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.56.3)(vite@8.0.16(jiti@2.7.0)))(svelte@5.56.3)(typescript@6.0.3)(vite@8.0.16(jiti@2.7.0)))(svelte@5.56.3)
+      style-to-object: 1.0.14
+      svelte: 5.56.3
+    transitivePeerDependencies:
+      - '@sveltejs/kit'
+
   svelte@5.56.3:
     dependencies:
       '@jridgewell/remapping': 2.3.5
@@ -1348,6 +1551,16 @@ snapshots:
     transitivePeerDependencies:
       - '@typescript-eslint/types'
 
+  tabbable@6.4.0: {}
+
+  tailwind-merge@3.6.0: {}
+
+  tailwind-variants@3.2.2(tailwind-merge@3.6.0)(tailwindcss@4.3.0):
+    dependencies:
+      tailwindcss: 4.3.0
+    optionalDependencies:
+      tailwind-merge: 3.6.0
+
   tailwindcss@4.3.0: {}
 
   tapable@2.3.3: {}
@@ -1361,8 +1574,9 @@ snapshots:
 
   tslib@1.14.1: {}
 
-  tslib@2.8.1:
-    optional: true
+  tslib@2.8.1: {}
+
+  tw-animate-css@1.4.0: {}
 
   typescript@6.0.3: {}
 
diff --git a/src/lib/actions/ripple.ts b/src/lib/actions/ripple.ts
new file mode 100644
index 0000000..c934a96
--- /dev/null
+++ b/src/lib/actions/ripple.ts
@@ -0,0 +1,31 @@
+export function ripple(node: HTMLElement) {
+    function handleClick(event: MouseEvent) {
+        const circle = document.createElement("span");
+
+        const rect = node.getBoundingClientRect();
+        const size = Math.max(rect.width, rect.height);
+
+        circle.style.width = `${size}px`;
+        circle.style.height = `${size}px`;
+
+        circle.style.left = `${event.clientX - rect.left - size / 2}px`;
+        circle.style.top = `${event.clientY - rect.top - size / 2}px`;
+
+        circle.className =
+            "absolute rounded-full bg-white/30 animate-ripple pointer-events-none";
+
+        node.appendChild(circle);
+
+        circle.addEventListener("animationend", () => {
+            circle.remove();
+        });
+    }
+
+    node.addEventListener("click", handleClick);
+
+    return {
+        destroy() {
+            node.removeEventListener("click", handleClick);
+        }
+    };
+}
\ No newline at end of file
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
deleted file mode 100644
index 9f09578..0000000
--- a/src/lib/components/Button.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts">
-    // Define the types for your props
-    type ButtonType = 'button' | 'submit' | 'reset'
-    type ButtonVariant = 'primary' | 'secondary'
-
-    // Define the props object including the Snippet for children
-    let {
-        type = 'button',
-        disabled = false,
-        variant = 'primary',
-        children
-    }: {
-        type?: ButtonType;
-        disabled?: boolean;
-        variant?: ButtonVariant
-        children: import('svelte').Snippet
-    } = $props();
-    
-    const getBgColor = (variant: ButtonVariant) => {
-        return variant === 'primary' ? '#122f62' : 'transparent'
-    }
-    
-    const getTextColor = (variant: ButtonVariant) => {
-        return variant === 'primary' ? 'white': 'primary-900'
-    }
-    
-    let bgColor = $derived(getBgColor(variant))
-    let textColor = $derived(getTextColor(variant))
-    
-</script>
-
-<button
-        type="{type}"
-        class="rounded-container not-disabled:bg-[{bgColor}] disabled:bg-[#0000001f] not-disabled:text-{textColor} disabled:text-[#00000042] whitespace-nowrap text-center text-[14px] leading-9 font-bold px-4 py-0 focus:outline-none focus:ring-2 focus:ring-primary-300 shadow-sm"
-        disabled={disabled}
->
-    {@render children()}
-</button>
diff --git a/src/lib/components/Card.svelte b/src/lib/components/Card.svelte
deleted file mode 100644
index 7b26b8e..0000000
--- a/src/lib/components/Card.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script lang="ts">
-    import type {Snippet} from "svelte";
-
-    type Props = {
-        title?: Snippet
-        content?: Snippet
-        footer?: Snippet
-        class?: string
-    }
-    let {title, content, footer, class: className = ""}: Props = $props()
-</script>
-
-<div class="bg-white rounded-2xl shadow-sm py-2 px-2 {className}">
-    {#if title}
-        <header>{@render title()}</header>
-    {/if}
-    {#if content}
-        <main class="flex grow items-center">{@render content()}</main>
-    {/if}
-    {#if footer}
-        <footer>{@render footer()}</footer>
-    {/if}
-</div>
\ No newline at end of file
diff --git a/src/lib/components/ProcessedZipArchiveEditor.svelte b/src/lib/components/ProcessedZipArchiveEditor.svelte
index bd55993..1b417d2 100644
--- a/src/lib/components/ProcessedZipArchiveEditor.svelte
+++ b/src/lib/components/ProcessedZipArchiveEditor.svelte
@@ -1,200 +1,204 @@
 <script lang="ts">
-    import AttachmentPreview from "$lib/components/AttachmentPreview.svelte";
-    import { mergeProcessedZipArchive, type ProcessedZipArchive, type ZipAttachment } from "$lib/zip-processing";
+	import AttachmentPreview from '$lib/components/AttachmentPreview.svelte';
+	import Button from '$lib/components/ui/button.svelte';
+	import {
+		mergeProcessedZipArchive,
+		type ProcessedZipArchive,
+		type ZipAttachment
+	} from '$lib/zip-processing';
 
-    type Props = {
-        archive: ProcessedZipArchive;
-        thumbnailWidth: number;
-        onArchiveChange?: (archive: ProcessedZipArchive) => void;
-    };
+	type Props = {
+		archive: ProcessedZipArchive;
+		thumbnailWidth: number;
+		onArchiveChange?: (archive: ProcessedZipArchive) => void;
+	};
 
-    let {
-        archive,
-        thumbnailWidth = 200,
-        onArchiveChange = () => {
-        }
-    }: Props = $props();
+	let { archive, thumbnailWidth = 200, onArchiveChange = () => {} }: Props = $props();
 
-    let attachments = $state<ZipAttachment[]>([]);
-    let archiveName = $state("");
-    let dragIndex = $state<number | null>(null);
-    let dropIndex = $state<number | null>(null);
-    let isMerging = $state(false);
-    let mergeError = $state<string | null>(null);
+	let attachments = $state<ZipAttachment[]>([]);
+	let archiveName = $state('');
+	let dragIndex = $state<number | null>(null);
+	let dropIndex = $state<number | null>(null);
+	let isMerging = $state(false);
+	let mergeError = $state<string | null>(null);
 
-    const toArrayBuffer = (bytes: Uint8Array) => {
-        const copy = new Uint8Array(bytes.byteLength);
-        copy.set(bytes);
-        return copy.buffer;
-    };
+	const toArrayBuffer = (bytes: Uint8Array) => {
+		const copy = new Uint8Array(bytes.byteLength);
+		copy.set(bytes);
+		return copy.buffer;
+	};
 
-    $effect(() => {
-        archiveName = archive.name;
-        attachments = archive.attachments.map((attachment) => ({...attachment}));
-    });
+	$effect(() => {
+		archiveName = archive.name;
+		attachments = archive.attachments.map((attachment) => ({ ...attachment }));
+	});
 
-    const emitArchiveChange = () => {
-        onArchiveChange({
-            ...archive,
-            name: archiveName,
-            attachments: attachments.map((attachment) => ({...attachment})),
-        });
-    };
+	const emitArchiveChange = () => {
+		onArchiveChange({
+			...archive,
+			name: archiveName,
+			attachments: attachments.map((attachment) => ({ ...attachment }))
+		});
+	};
 
-    const downloadMergedPdf = async () => {
-        if (attachments.length === 0 || isMerging) {
-            return;
-        }
+	const downloadMergedPdf = async () => {
+		if (attachments.length === 0 || isMerging) {
+			return;
+		}
 
-        isMerging = true;
-        mergeError = null;
+		isMerging = true;
+		mergeError = null;
 
-        try {
-            const mergedBytes = await mergeProcessedZipArchive({
-                ...archive,
-                name: archiveName,
-                attachments: attachments.map((attachment) => ({...attachment}))
-            });
+		try {
+			const mergedBytes = await mergeProcessedZipArchive({
+				...archive,
+				name: archiveName,
+				attachments: attachments.map((attachment) => ({ ...attachment }))
+			});
 
-            const pdfBlob = new Blob([toArrayBuffer(mergedBytes)], {type: "application/pdf"});
-            const objectUrl = URL.createObjectURL(pdfBlob);
-            const downloadLink = document.createElement("a");
-            downloadLink.href = objectUrl;
-            downloadLink.download = archiveName.toLowerCase().endsWith(".pdf") ? archiveName : `${archiveName}.pdf`;
-            downloadLink.rel = "noopener";
-            downloadLink.click();
-            window.setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
-        } catch (error) {
-            console.error(`Failed to merge archive ${archive.name}`, error);
-            mergeError = "PDF konnte nicht erstellt werden.";
-        } finally {
-            isMerging = false;
-        }
-    };
+			const pdfBlob = new Blob([toArrayBuffer(mergedBytes)], { type: 'application/pdf' });
+			const objectUrl = URL.createObjectURL(pdfBlob);
+			const downloadLink = document.createElement('a');
+			downloadLink.href = objectUrl;
+			downloadLink.download = archiveName.toLowerCase().endsWith('.pdf')
+				? archiveName
+				: `${archiveName}.pdf`;
+			downloadLink.rel = 'noopener';
+			downloadLink.click();
+			window.setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
+		} catch (error) {
+			console.error(`Failed to merge archive ${archive.name}`, error);
+			mergeError = 'PDF konnte nicht erstellt werden.';
+		} finally {
+			isMerging = false;
+		}
+	};
 
-    const moveAttachment = (fromIndex: number, toIndex: number) => {
-        if (
-            fromIndex === toIndex ||
-            fromIndex < 0 ||
-            toIndex < 0 ||
-            fromIndex >= attachments.length ||
-            toIndex >= attachments.length
-        ) {
-            return;
-        }
+	const moveAttachment = (fromIndex: number, toIndex: number) => {
+		if (
+			fromIndex === toIndex ||
+			fromIndex < 0 ||
+			toIndex < 0 ||
+			fromIndex >= attachments.length ||
+			toIndex >= attachments.length
+		) {
+			return;
+		}
 
-        const nextAttachments = [...attachments];
-        const [movedAttachment] = nextAttachments.splice(fromIndex, 1);
-        nextAttachments.splice(toIndex, 0, movedAttachment);
+		const nextAttachments = [...attachments];
+		const [movedAttachment] = nextAttachments.splice(fromIndex, 1);
+		nextAttachments.splice(toIndex, 0, movedAttachment);
 
-        attachments = nextAttachments;
-        emitArchiveChange();
-    };
+		attachments = nextAttachments;
+		emitArchiveChange();
+	};
 
-    const handleDragStart = (index: number, event: DragEvent) => {
-        dragIndex = index;
-        dropIndex = index;
+	const handleDragStart = (index: number, event: DragEvent) => {
+		dragIndex = index;
+		dropIndex = index;
 
-        if (event.dataTransfer) {
-            event.dataTransfer.effectAllowed = "move";
-            event.dataTransfer.setData("text/plain", String(index));
-        }
-    };
+		if (event.dataTransfer) {
+			event.dataTransfer.effectAllowed = 'move';
+			event.dataTransfer.setData('text/plain', String(index));
+		}
+	};
 
-    const handleDragOver = (index: number, event: DragEvent) => {
-        event.preventDefault();
-        dropIndex = index;
-    };
+	const handleDragOver = (index: number, event: DragEvent) => {
+		event.preventDefault();
+		dropIndex = index;
+	};
 
-    const handleDrop = (index: number, event: DragEvent) => {
-        event.preventDefault();
+	const handleDrop = (index: number, event: DragEvent) => {
+		event.preventDefault();
 
-        const dataTransferIndex = Number(event.dataTransfer?.getData("text/plain"));
-        const fromIndex = Number.isFinite(dataTransferIndex) ? dataTransferIndex : dragIndex;
+		const dataTransferIndex = Number(event.dataTransfer?.getData('text/plain'));
+		const fromIndex = Number.isFinite(dataTransferIndex) ? dataTransferIndex : dragIndex;
 
-        if (fromIndex === null) {
-            return;
-        }
+		if (fromIndex === null) {
+			return;
+		}
 
-        moveAttachment(fromIndex, index);
-        dragIndex = null;
-        dropIndex = null;
-    };
+		moveAttachment(fromIndex, index);
+		dragIndex = null;
+		dropIndex = null;
+	};
 
-    const handleDragEnd = () => {
-        dragIndex = null;
-        dropIndex = null;
-    };
+	const handleDragEnd = () => {
+		dragIndex = null;
+		dropIndex = null;
+	};
 </script>
 
-<section class="flex flex-col gap-4 rounded-2xl border border-primary-100 bg-white px-4 py-4 shadow-sm">
-    <header class="flex flex-wrap items-baseline justify-between gap-2">
-        <div class="min-w-0 flex-1">
-            <label class="block min-w-0">
-                <span class="sr-only">Archivname</span>
-                <input
-                        class="w-full max-w-xl rounded-md border border-primary-200 bg-white px-3 py-2 text-[16px] font-bold text-primary-900 outline-none transition focus:border-primary-400 focus:ring-2 focus:ring-primary-200"
-                        type="text"
-                        value={archiveName}
-                        oninput={(event) => {
-                        archiveName = (event.currentTarget as HTMLInputElement).value;
-                        emitArchiveChange();
-                    }}
-                />
-            </label>
-            <p class="mt-1 text-[13px] text-primary-700">
-                {attachments.length} relevante Datei{attachments.length === 1 ? "" : "en"}
-            </p>
-        </div>
+<section
+	class="flex flex-col gap-4 rounded-2xl border border-primary-100 bg-white px-4 py-4 shadow-sm"
+>
+	<header class="flex flex-wrap items-baseline justify-between gap-2 text-primary">
+		<div class="min-w-0 flex-1">
+			<label class="block min-w-0">
+				<span class="sr-only">Archivname</span>
+				<input
+					class="w-full max-w-xl rounded-md border border-primary-200 bg-white px-3 py-2 text-[16px] font-bold text-primary-900 outline-none transition focus:border-primary-400 focus:ring-2 focus:ring-primary-200"
+					type="text"
+					value={archiveName}
+					oninput={(event) => {
+						archiveName = (event.currentTarget as HTMLInputElement).value;
+						emitArchiveChange();
+					}}
+				/>
+			</label>
+			<p class="mt-1 text-[13px] text-primary">
+				{attachments.length} relevante Datei{attachments.length === 1 ? '' : 'en'}
+			</p>
+		</div>
 
-        <button
-                class="rounded-container whitespace-nowrap bg-primary-900 px-4 py-2 text-[14px] font-bold leading-6 text-white shadow-sm transition hover:bg-primary-800 disabled:cursor-not-allowed disabled:bg-primary-300"
-                type="button"
-                disabled={attachments.length === 0 || isMerging}
-                onclick={downloadMergedPdf}
-        >
-            {isMerging ? "PDF wird erstellt" : "PDF herunterladen"}
-        </button>
-    </header>
+		<Button
+			class="bg-primary"
+			type="button"
+			disabled={attachments.length === 0 || isMerging}
+			onclick={downloadMergedPdf}
+		>
+			{isMerging ? 'PDF wird erstellt' : 'PDF herunterladen'}
+		</Button>
+	</header>
 
-    {#if mergeError}
-        <div class="rounded-container bg-red-50 px-4 py-3 text-[14px] font-medium text-red-900">
-            {mergeError}
-        </div>
-    {/if}
+	{#if mergeError}
+		<div class="rounded-container bg-red-50 px-4 py-3 text-[14px] font-medium text-red-900">
+			{mergeError}
+		</div>
+	{/if}
 
-    <ul class="flex gap-3 overflow-x-auto pb-1">
-        {#each attachments as attachment, index (attachment.path)}
-            <li
-                    class={`flex flex-col shrink-0 items-stretch gap-2 rounded-xl border bg-primary-50 p-2 ${
-                    dropIndex === index ? "border-primary-400 ring-1 ring-primary-200" : "border-primary-100"
-                } ${dragIndex === index ? "opacity-60" : ""}`}
-                    style={`width: ${thumbnailWidth}px;`}
-                    draggable="true"
-                    ondragstart={(event) => handleDragStart(index, event)}
-                    ondragover={(event) => handleDragOver(index, event)}
-                    ondrop={(event) => handleDrop(index, event)}
-                    ondragend={handleDragEnd}
-            >
-                <div class="flex min-w-0 flex-1 flex-row gap-2 py-1 items-baseline">
-                    <button
-                            class="w-fit cursor-grab rounded-md border border-primary-200 bg-white px-2 py-1 text-sm font-semibold leading-none text-primary-700 active:cursor-grabbing"
-                            draggable="false"
-                            type="button"
-                            aria-label="Datei verschieben"
-                    >
-                        ::
-                    </button>
+	<ul class="flex gap-3 overflow-x-auto pb-1">
+		{#each attachments as attachment, index (attachment.path)}
+			<li
+				class={`flex flex-col shrink-0 items-stretch gap-2 rounded-xl border text-primary bg-accent p-2 ${
+					dropIndex === index ? 'border-primary-400 ring-1 ring-primary-200' : 'border-primary-100'
+				} ${dragIndex === index ? 'opacity-60' : ''}`}
+				style={`width: ${thumbnailWidth}px;`}
+				draggable="true"
+				ondragstart={(event) => handleDragStart(index, event)}
+				ondragover={(event) => handleDragOver(index, event)}
+				ondrop={(event) => handleDrop(index, event)}
+				ondragend={handleDragEnd}
+			>
+				<div class="flex min-w-0 flex-1 flex-row gap-2 py-1 items-baseline">
+					<button
+						class="w-fit cursor-grab rounded-md border border-primary-200 bg-white px-2 py-1 text-sm font-semibold leading-none text-primary-700 active:cursor-grabbing"
+						draggable="false"
+						type="button"
+						aria-label="Datei verschieben"
+					>
+						::
+					</button>
 
-                    <div
-                            class="truncate text-[13px] font-medium leading-tight text-primary-900"
-                            title={attachment.name}
-                    >
-                        {attachment.name}
-                    </div>
-                </div>
-                <AttachmentPreview {attachment} />
-            </li>
-        {/each}
-    </ul>
+					<div
+						class="truncate text-[13px] font-medium leading-tight text-primary-900"
+						title={attachment.name}
+					>
+						{attachment.name}
+					</div>
+				</div>
+				<AttachmentPreview {attachment} />
+			</li>
+		{/each}
+	</ul>
 </section>
diff --git a/src/lib/components/ZipDropzone.svelte b/src/lib/components/ZipDropzone.svelte
index 213f926..ae4e919 100644
--- a/src/lib/components/ZipDropzone.svelte
+++ b/src/lib/components/ZipDropzone.svelte
@@ -62,7 +62,7 @@
 
 <button
         type="button"
-        class="flex min-h-[calc(-180px+100vh)] w-full grow cursor-pointer flex-col justify-center border-0 bg-transparent p-0 text-center text-inherit appearance-none focus:outline-none transition-colors rounded-2xl {isDragging ? 'bg-gray-100 border-2 border-dashed border-primary-500' : ''} {className}"
+        class="flex min-h-[calc(-180px+100vh)] w-full grow cursor-pointer flex-col justify-center border-0 text-primary bg-transparent p-0 text-center appearance-none focus:outline-none transition-colors rounded-2xl {isDragging ? 'bg-gray-100 border-2 border-dashed border-primary-500' : ''} {className}"
         aria-label="ZIP-Dateien hinzufügen"
         onclick={openFileDialog}
         ondragover={handleDragOver}
@@ -70,8 +70,7 @@
         ondrop={handleDrop}
 >
     <div class="flex flex-row items-baseline justify-center gap-2">
-        <!-- Changed h1 to span for better semantic HTML inside a button -->
-        <span class="text-[20px] font-bold text-primary-900">Dateien hinzufügen</span>
-        <span class="text-[20px] font-extrabold text-primary-900">+</span>
+        <span class="text-[20px] font-bold">Dateien hinzufügen</span>
+        <span class="text-[20px] font-extrabold">+</span>
     </div>
 </button>
diff --git a/src/lib/components/ui/button.svelte b/src/lib/components/ui/button.svelte
new file mode 100644
index 0000000..1d5e7e7
--- /dev/null
+++ b/src/lib/components/ui/button.svelte
@@ -0,0 +1,78 @@
+<script lang="ts" module>
+	import { ripple } from "$lib/actions/ripple";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const buttonVariants = tv({
+		base: "relative overflow-hidden font-bold w-fit hover:not-disabled:cursor-pointer disabled:bg-[#E6E7EA] disabled:text-[#0B1F4366]",
+		variants: {
+			variant: {
+				primary: "bg-primary text-primary-foreground",
+				secondary: "bg-linear-to-r from-secondary to-[#FF6F6D] text-primary-foreground",
+				bordered: "text-primary border-[#E6E7EA] border-2 bg-white hover:bg-[#122F621A]",
+				tertiary: "text-primary hover:bg-[#122F621A]",
+				success: "text-white bg-[#0FAD80]"
+			},
+			size: {
+				standard: "px-6 h-8 rounded-[16px]",
+				large: "px-8 h-12 rounded-[24px]"
+			},
+		},
+		defaultVariants: {
+			variant: "primary",
+			size: "standard",
+		},
+	});
+
+	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+			WithElementRef<HTMLAnchorAttributes> & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		class: className,
+		variant = "primary",
+		size = "standard",
+		ref = $bindable(null),
+		href = undefined,
+		type = "button",
+		disabled,
+		children,
+		...restProps
+	}: ButtonProps = $props();
+</script>
+
+{#if href}
+	<a
+			use:ripple
+			bind:this={ref}
+			data-slot="button"
+			class={cn(buttonVariants({ variant, size }), className)}
+			href={disabled ? undefined : href}
+			aria-disabled={disabled}
+			role={disabled ? "link" : undefined}
+			tabindex={disabled ? -1 : undefined}
+			{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+			use:ripple
+			bind:this={ref}
+			data-slot="button"
+			class={" " + cn(buttonVariants({ variant, size }), className)}
+			{type}
+			{disabled}
+			{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}
diff --git a/src/lib/components/ui/card/card-action.svelte b/src/lib/components/ui/card/card-action.svelte
new file mode 100644
index 0000000..7c48844
--- /dev/null
+++ b/src/lib/components/ui/card/card-action.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-action"
+	class={cn(
+		"cn-card-action col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/card/card-content.svelte b/src/lib/components/ui/card/card-content.svelte
new file mode 100644
index 0000000..4f60ee3
--- /dev/null
+++ b/src/lib/components/ui/card/card-content.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-content"
+	class={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/card/card-description.svelte b/src/lib/components/ui/card/card-description.svelte
new file mode 100644
index 0000000..9b20ac7
--- /dev/null
+++ b/src/lib/components/ui/card/card-description.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
+</script>
+
+<p
+	bind:this={ref}
+	data-slot="card-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</p>
diff --git a/src/lib/components/ui/card/card-footer.svelte b/src/lib/components/ui/card/card-footer.svelte
new file mode 100644
index 0000000..1efff6d
--- /dev/null
+++ b/src/lib/components/ui/card/card-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-footer"
+	class={cn("bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/card/card-header.svelte b/src/lib/components/ui/card/card-header.svelte
new file mode 100644
index 0000000..7eb69e1
--- /dev/null
+++ b/src/lib/components/ui/card/card-header.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-header"
+	class={cn(
+		"gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/card/card-title.svelte b/src/lib/components/ui/card/card-title.svelte
new file mode 100644
index 0000000..1523fc5
--- /dev/null
+++ b/src/lib/components/ui/card/card-title.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-title"
+	class={cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/card/card.svelte b/src/lib/components/ui/card/card.svelte
new file mode 100644
index 0000000..2b4f81a
--- /dev/null
+++ b/src/lib/components/ui/card/card.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		size = "default",
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { size?: "default" | "sm" } = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card"
+	data-size={size}
+	class={cn("ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/card/index.ts b/src/lib/components/ui/card/index.ts
new file mode 100644
index 0000000..4d3fce4
--- /dev/null
+++ b/src/lib/components/ui/card/index.ts
@@ -0,0 +1,25 @@
+import Root from "./card.svelte";
+import Content from "./card-content.svelte";
+import Description from "./card-description.svelte";
+import Footer from "./card-footer.svelte";
+import Header from "./card-header.svelte";
+import Title from "./card-title.svelte";
+import Action from "./card-action.svelte";
+
+export {
+	Root,
+	Content,
+	Description,
+	Footer,
+	Header,
+	Title,
+	Action,
+	//
+	Root as Card,
+	Content as CardContent,
+	Description as CardDescription,
+	Footer as CardFooter,
+	Header as CardHeader,
+	Title as CardTitle,
+	Action as CardAction,
+};
diff --git a/src/lib/nom-theme.css b/src/lib/nom-theme.css
deleted file mode 100644
index 67d7e22..0000000
--- a/src/lib/nom-theme.css
+++ /dev/null
@@ -1,108 +0,0 @@
-[data-theme='nominandum'] {
-    --text-scaling: 1.067;
-
-    --base-font-color: var(--color-surface-900);
-    --base-font-color-dark: var(--color-surface-50);
-    --base-font-family: Nunito, Helvetica Neue, sans-serif;
-    --base-font-size: inherit;
-    --base-line-height: 1.5;
-    --base-font-weight: 400;
-
-    --heading-font-color: var(--color-primary-900);
-    --heading-font-color-dark: var(--color-primary-900);
-    --heading-font-family: Nunito, Helvetica Neue, sans-serif;
-    --heading-font-weight: 400;
-
-    --anchor-font-color: var(--color-primary-600);
-    --anchor-font-color-dark: var(--color-primary-300);
-    --anchor-text-decoration: none;
-    --anchor-text-decoration-hover: underline;
-
-    --spacing: 0.25rem;
-    --radius-base: 0.5rem;
-    --radius-container: 24px;
-
-    --default-border-width: 1px;
-    --default-divide-width: 1px;
-    --default-ring-width: 2px;
-
-    --body-background-color: #EEF4F6;
-    --body-background-color-dark: #0f172a;
-
-    /* Primary: Material Blue */
-    /* Very Light / Ghostly */
-    --color-primary-50:  oklch(96.8% 0.010 253deg);
-    --color-primary-100: oklch(92.8% 0.020 253deg);
-    --color-primary-200: oklch(86.5% 0.040 253deg);
-    --color-primary-300: oklch(77.5% 0.060 253deg);
-    --color-primary-400: oklch(68.5% 0.080 253deg);
-
-    /* Mid-range / Muted Tones */
-    --color-primary-500: oklch(59.5% 0.090 253deg);
-    --color-primary-600: oklch(52.5% 0.095 253deg);
-    --color-primary-700: oklch(45.5% 0.095 253deg);
-
-    /* Dark Range (Matching your base color) */
-    --color-primary-800: oklch(38.5% 0.090 253deg);
-    --color-primary-900: oklch(31.5% 0.090 253deg); /* YOUR BASE COLOR */
-    --color-primary-950: oklch(23.5% 0.070 253deg);
-
-    --color-primary-contrast-dark: var(--color-primary-950);
-    --color-primary-contrast-light: white;
-    --color-primary-contrast-50: var(--color-primary-contrast-dark);
-    --color-primary-contrast-100: var(--color-primary-contrast-dark);
-    --color-primary-contrast-200: var(--color-primary-contrast-dark);
-    --color-primary-contrast-300: var(--color-primary-contrast-dark);
-    --color-primary-contrast-400: white;
-    --color-primary-contrast-500: white;
-    --color-primary-contrast-600: white;
-    --color-primary-contrast-700: white;
-    --color-primary-contrast-800: white;
-    --color-primary-contrast-900: white;
-    --color-primary-contrast-950: white;
-
-    /* Secondary: dezentes Blau-Grau */
-    --color-secondary-50: oklch(97% 0.01 250deg);
-    --color-secondary-100: oklch(93.5% 0.015 250deg);
-    --color-secondary-200: oklch(88.5% 0.022 250deg);
-    --color-secondary-300: oklch(80% 0.035 250deg);
-    --color-secondary-400: oklch(68% 0.045 250deg);
-    --color-secondary-500: oklch(56% 0.055 250deg);
-    --color-secondary-600: oklch(48% 0.05 250deg);
-    --color-secondary-700: oklch(40% 0.045 250deg);
-    --color-secondary-800: oklch(32% 0.04 250deg);
-    --color-secondary-900: oklch(24% 0.035 250deg);
-    --color-secondary-950: oklch(17% 0.03 250deg);
-
-    --color-secondary-contrast-dark: var(--color-secondary-950);
-    --color-secondary-contrast-light: white;
-
-    /* Tertiary: Akzent Cyan */
-    --color-tertiary-50: oklch(97% 0.025 220deg);
-    --color-tertiary-100: oklch(93% 0.045 220deg);
-    --color-tertiary-200: oklch(87% 0.07 220deg);
-    --color-tertiary-300: oklch(78% 0.105 220deg);
-    --color-tertiary-400: oklch(69% 0.135 220deg);
-    --color-tertiary-500: oklch(60% 0.15 220deg);
-    --color-tertiary-600: oklch(52% 0.135 220deg);
-    --color-tertiary-700: oklch(44% 0.115 220deg);
-    --color-tertiary-800: oklch(36% 0.09 220deg);
-    --color-tertiary-900: oklch(29% 0.065 220deg);
-    --color-tertiary-950: oklch(21% 0.045 220deg);
-
-    /* Surface: Material-nahe kühle Grautöne */
-    --color-surface-50: oklch(98.5% 0.004 255deg);
-    --color-surface-100: oklch(96.5% 0.006 255deg);
-    --color-surface-200: oklch(92.5% 0.01 255deg);
-    --color-surface-300: oklch(86.5% 0.015 255deg);
-    --color-surface-400: oklch(74% 0.02 255deg);
-    --color-surface-500: oklch(62% 0.025 255deg);
-    --color-surface-600: oklch(50% 0.025 255deg);
-    --color-surface-700: oklch(39% 0.025 255deg);
-    --color-surface-800: oklch(29% 0.025 255deg);
-    --color-surface-900: oklch(21% 0.025 255deg);
-    --color-surface-950: oklch(14% 0.025 255deg);
-
-    --color-surface-contrast-dark: var(--color-surface-950);
-    --color-surface-contrast-light: white;
-}
\ No newline at end of file
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..55b3a91
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,13 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChild<T> = T extends { child?: any } ? Omit<T, "child"> : T;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, "children"> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null };
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index d60f7a7..52e8ac8 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,11 +1,16 @@
 <script lang="ts">
-    import {onMount} from "svelte";
-    import Card from "$lib/components/Card.svelte";
-    import ProcessedZipArchiveEditor from "$lib/components/ProcessedZipArchiveEditor.svelte";
-    import ZipDropzone from "$lib/components/ZipDropzone.svelte";
-    import {extractZipArchives, mergeProcessedZipArchive, type ProcessedZipArchive} from "$lib/zip-processing";
+    import {onMount} from 'svelte';
+    import Button from '$lib/components/ui/button.svelte';
+    import ProcessedZipArchiveEditor from '$lib/components/ProcessedZipArchiveEditor.svelte';
+    import ZipDropzone from '$lib/components/ZipDropzone.svelte';
+    import {
+        extractZipArchives,
+        mergeProcessedZipArchive,
+        type ProcessedZipArchive
+    } from '$lib/zip-processing';
+    import * as Card from "$lib/components/ui/card/index";
 
-    const THUMBNAIL_WIDTH_STORAGE_KEY = "thumbnailWidth";
+    const THUMBNAIL_WIDTH_STORAGE_KEY = 'thumbnailWidth';
 
     let selectedZipFiles: File[] = $state([]);
     let processedZipFiles: ProcessedZipArchive[] = $state([]);
@@ -45,13 +50,13 @@
     };
 
     const downloadPdfBytes = (bytes: Uint8Array, fileName: string) => {
-        const pdfBlob = new Blob([toArrayBuffer(bytes)], {type: "application/pdf"});
+        const pdfBlob = new Blob([toArrayBuffer(bytes)], {type: 'application/pdf'});
         const objectUrl = URL.createObjectURL(pdfBlob);
-        const downloadLink = document.createElement("a");
+        const downloadLink = document.createElement('a');
 
         downloadLink.href = objectUrl;
-        downloadLink.download = fileName.toLowerCase().endsWith(".pdf") ? fileName : `${fileName}.pdf`;
-        downloadLink.rel = "noopener";
+        downloadLink.download = fileName.toLowerCase().endsWith('.pdf') ? fileName : `${fileName}.pdf`;
+        downloadLink.rel = 'noopener';
         downloadLink.click();
         window.setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
     };
@@ -86,7 +91,7 @@
 
     const updateProcessedZipFile = (index: number, archive: ProcessedZipArchive) => {
         processedZipFiles = processedZipFiles.map((existingArchive, existingIndex) =>
-            existingIndex === index ? archive : existingArchive,
+            existingIndex === index ? archive : existingArchive
         );
     };
 
@@ -111,39 +116,49 @@
 
 {#snippet content()}
     {#if selectedZipFiles.length === 0}
-        <ZipDropzone onFilesSelected={handleFilesSelected}/>
+        <Card.Root>
+            <Card.Content>
+                <ZipDropzone onFilesSelected={handleFilesSelected}/>
+            </Card.Content>
+        </Card.Root>
     {:else}
         <details class="fixed bottom-4 right-4 z-20">
             <summary
-                    class="flex h-12 w-12 cursor-pointer list-none items-center justify-center rounded-full border border-primary-200 bg-white text-lg font-semibold text-primary-800 shadow-lg transition hover:border-primary-300 hover:bg-primary-50">
+                    class="flex h-12 w-12 cursor-pointer list-none items-center justify-center rounded-full border border-primary-200 bg-white text-lg font-semibold text-primary-800 shadow-lg transition hover:border-primary-300 hover:bg-primary-50"
+            >
                 <span class="sr-only">Settings</span>
                 <span>⚙️</span>
             </summary>
 
-            <div class="absolute bottom-14 right-0 w-72 rounded-xl border border-primary-100 bg-white p-4 shadow-lg">
+            <div
+                    class="absolute bottom-14 right-0 w-72 rounded-xl border border-primary-100 bg-white p-4 shadow-lg"
+            >
                 <div class="flex flex-col gap-3">
                     <div class="flex gap-2">
-                        <button
-                                class="flex-1 rounded-container bg-primary-900 px-3 py-2 text-[13px] font-bold leading-5 text-white shadow-sm transition hover:bg-primary-800 disabled:cursor-not-allowed disabled:bg-primary-300"
+                        <Button
+                                class="flex-1"
                                 type="button"
                                 disabled={processedZipFiles.length === 0}
                                 onclick={exportAllZipArchivesAsPdf}
                         >
                             Alle ZIP-Archive als PDF exportieren
-                        </button>
+                        </Button>
 
-                        <button
-                                class="flex-1 rounded-container bg-red-600 px-3 py-2 text-[13px] font-bold leading-5 text-white shadow-sm transition hover:bg-red-500 disabled:cursor-not-allowed disabled:bg-red-300"
+                        <Button
+                                class="flex-1"
                                 type="button"
                                 disabled={selectedZipFiles.length === 0}
+                                variant="secondary"
                                 onclick={deleteAllZipArchives}
                         >
                             Alle ZIP-Archive löschen
-                        </button>
+                        </Button>
                     </div>
 
                     <label class="flex flex-col gap-2">
-                        <div class="flex items-center justify-between gap-3 text-sm font-medium text-primary-900">
+                        <div
+                                class="flex items-center justify-between gap-3 text-sm font-medium text-primary-900"
+                        >
                             <span>Thumbnail Breite</span>
                             <span class="tabular-nums text-primary-700">{thumbnailWidth}px</span>
                         </div>
@@ -160,11 +175,15 @@
                 </div>
             </div>
         </details>
-        <div class="flex min-h-[calc(-180px+100vh)] w-full grow flex-col justify-center gap-4 px-4 py-6">
+        <div
+                class="flex min-h-[calc(-180px+100vh)] w-full grow flex-col justify-center gap-4 px-4 py-6"
+        >
             <div class="mx-auto flex w-full flex-col gap-3">
                 {#if pendingZipCount > 0}
-                    <div class="rounded-container bg-primary-50 px-4 py-3 text-[14px] font-medium text-primary-900">
-                        Noch {pendingZipCount} ZIP-Datei{pendingZipCount === 1 ? "" : "en"} in Bearbeitung.
+                    <div
+                            class="rounded-container bg-primary-50 px-4 py-3 text-[14px] font-medium text-primary-900"
+                    >
+                        Noch {pendingZipCount} ZIP-Datei{pendingZipCount === 1 ? '' : 'en'} in Bearbeitung.
                     </div>
                 {/if}
 
@@ -188,5 +207,5 @@
     <div class="flex flex-wrap items-center justify-between gap-3 py-6">
         <h1 class="h1 text-[20px] font-bold text-primary-900">beA-Edit</h1>
     </div>
-    <Card {content} class="h-full"/>
+    {@render content()}
 </section>
diff --git a/src/routes/layout.css b/src/routes/layout.css
index 562f021..e2394e6 100644
--- a/src/routes/layout.css
+++ b/src/routes/layout.css
@@ -1,13 +1,161 @@
 @import 'tailwindcss';
-@import '../lib/nom-theme.css';
+/*@import '../globals.css';*/
+@import "tw-animate-css";
+@import "shadcn-svelte/tailwind.css";
+@import "@fontsource-variable/geist";
+
+@custom-variant dark (&:is(.dark *));
 
 @plugin '@tailwindcss/forms';
 @plugin '@tailwindcss/typography';
 
+@font-face {
+	font-family: 'Nunito';
+	font-style: normal;
+	font-weight: 100 900;
+	src: url('$lib/assets/Nunito-VariableFont_wght.ttf') format('truetype');
+}
 
-@font-face{
-    font-family: 'Nunito';
-    font-style: normal;
-    font-weight: 100 900;
-    src: url('$lib/assets/Nunito-VariableFont_wght.ttf') format("truetype");
-}
\ No newline at end of file
+:root {
+	--background: #EEF4F6;
+	--foreground: #122F62;
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+	--primary: #122f62;
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: #EA544B;
+	--secondary-end: #FF6F6D;
+	--secondary-foreground: oklch(0.205 0 0);
+	--muted: oklch(0.97 0 0);
+	--muted-foreground: oklch(0.556 0 0);
+	--accent: #d6dce5;
+	--accent-foreground: oklch(0.205 0 0);
+	--destructive: #ff0027;
+	--border: oklch(0.922 0 0);
+	--input: oklch(0.922 0 0);
+	--ring: oklch(0.708 0 0);
+	--chart-1: oklch(0.87 0 0);
+	--chart-2: oklch(0.556 0 0);
+	--chart-3: oklch(0.439 0 0);
+	--chart-4: oklch(0.371 0 0);
+	--chart-5: oklch(0.269 0 0);
+	--radius: 16px;
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.145 0 0);
+	--sidebar-primary: oklch(0.205 0 0);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.97 0 0);
+	--sidebar-accent-foreground: oklch(0.205 0 0);
+	--sidebar-border: oklch(0.922 0 0);
+	--sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+	--background: #212121;
+	--foreground: #FFFFFF;
+	--card: oklch(0.205 0 0);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.205 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: #92b2eb;
+	--primary-foreground: oklch(0.205 0 0);
+	--secondary: linear-gradient(90deg, #EA544B 0%, #FF6F6D 100%);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.269 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--accent: oklch(0.269 0 0);
+	--accent-foreground: oklch(0.985 0 0);
+	--destructive: #ff0027;
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.556 0 0);
+	--chart-1: oklch(0.87 0 0);
+	--chart-2: oklch(0.556 0 0);
+	--chart-3: oklch(0.439 0 0);
+	--chart-4: oklch(0.371 0 0);
+	--chart-5: oklch(0.269 0 0);
+	--sidebar: oklch(0.205 0 0);
+	--sidebar-foreground: oklch(0.985 0 0);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.269 0 0);
+	--sidebar-accent-foreground: oklch(0.985 0 0);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.556 0 0);
+}
+
+@theme inline {
+	--font-sans: 'Nunito', sans-serif;
+	--color-sidebar-ring: var(--sidebar-ring);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar: var(--sidebar);
+	--color-chart-5: var(--chart-5);
+	--color-chart-4: var(--chart-4);
+	--color-chart-3: var(--chart-3);
+	--color-chart-2: var(--chart-2);
+	--color-chart-1: var(--chart-1);
+	--color-ring: var(--ring);
+	--color-input: var(--input);
+	--color-border: var(--border);
+	--color-destructive: var(--destructive);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-accent: var(--accent);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-muted: var(--muted);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-secondary: var(--secondary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-primary: var(--primary);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-popover: var(--popover);
+	--color-card-foreground: var(--card-foreground);
+	--color-card: var(--card);
+	--color-foreground: var(--foreground);
+	--color-background: var(--background);
+	--radius-sm: calc(var(--radius) * 0.6);
+	--radius-md: calc(var(--radius) * 0.8);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) * 1.4);
+	--radius-2xl: calc(var(--radius) * 1.8);
+	--radius-3xl: calc(var(--radius) * 2.2);
+	--radius-4xl: calc(var(--radius) * 2.6);
+}
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+	html {
+		@apply font-sans;
+	}
+}
+
+
+/* ripple */
+
+@keyframes ripple {
+	from {
+		transform: scale(0);
+		opacity: 0.8;
+	}
+
+	to {
+		transform: scale(4);
+		opacity: 0;
+	}
+}
+
+.animate-ripple {
+	animation: ripple 600ms ease-out;
+}
+   
\ No newline at end of file