Join our Discord Community
svelte icon

Open source and free shadcn templates using Svelte

6 templates • 5 contributors • Open source & free

6
Templates
5
Authors

Available Templates (6)

Shadcn Svelte template preview
Shadcn Svelte
Shadcn Svelte is an unofficial, community-led Svelte port of the popular shadcn/ui component library, bringing accessible and customizable copy-paste components to the Svelte ecosystem. Developed with the blessing of shadcn's original creator, this open-source project has garnered over 7,500 GitHub stars and provides Svelte developers with a comprehensive collection of beautifully designed UI components built with Tailwind CSS and Svelte's reactive primitives. The library follows the same philosophy as shadcn/ui, allowing developers to copy components directly into their Svelte or SvelteKit applications rather than installing them as dependencies, giving teams complete control to customize, modify, and own their component code. Each component is crafted with accessibility as a priority, supports Svelte's reactivity system, and integrates seamlessly with Tailwind CSS for easy styling and theming. Perfect for Svelte and SvelteKit projects, this library provides everything from basic UI elements like buttons and inputs to complex components like data tables, command palettes, and dialog systems, enabling developers to build their own component library with consistent, production-ready building blocks designed specifically for the Svelte framework.
Portr template preview
Portr
Portr is an open-source, self-hosted alternative to ngrok that enables development teams to securely expose local HTTP, TCP, and WebSocket servers to the public internet for testing webhooks and sharing development previews. Built with Go, Python, TypeScript, and Svelte, it provides an admin dashboard for team management, a request inspector for analyzing and replaying HTTP requests, and secure SSH-based remote port forwarding. Designed for small teams, Portr offers a cost-effective tunneling solution with full infrastructure control and data sovereignty. The request inspector lets developers examine incoming requests, replay them for debugging, and understand webhook payloads, making it valuable for testing payment gateways and third-party integrations. Supporting HTTP, TCP, and WebSocket connections, Portr handles diverse scenarios from web applications to database connections and real-time communication. Perfect for teams working on microservices, webhook integrations, or mobile backends, it provides commercial-grade tunneling with open-source transparency and control.
Franken UI template preview
Franken UI
Franken UI is an HTML-first, open-source component library built on UIkit 3 and extended with LitElement, featuring a design aesthetic inspired by shadcn/ui. Written primarily in TypeScript with Tailwind CSS styling, it provides a feature-complete collection of UI components optimized for Svelte and built with Vite. The library emphasizes an HTML-first approach, allowing developers to use components with minimal JavaScript while maintaining modern functionality through web components. Franken UI is currently in Version 2 and actively maintained with a focus on stability and gradual improvements. The MIT-licensed project offers a unique blend of UIkit's robust component foundation with modern web component architecture and shadcn/ui's clean design principles. Perfect for developers seeking HTML-centric components with the flexibility of web components, Franken UI provides a stable, well-maintained alternative for building modern web applications with Svelte, Tailwind CSS, and TypeScript.
Tauri UI template preview
Tauri UI
Aby Agmmnn
Tauri UI is a project scaffolding tool for creating modern, lightweight cross-platform desktop applications using Tauri and shadcn/ui with support for multiple frontend frameworks including React, Next.js, and SvelteKit. The CLI tool (create-tauri-ui) enables developers to quickly set up new desktop app projects with a single command, providing templates that include native-looking window controls, dark and light mode support, Radix UI primitives, Lucide/Radix icons, and optimized bundle sizes around 2-2.5 MB per platform. Built with TypeScript and Tailwind CSS, Tauri UI bridges web development and native desktop apps, allowing developers to build performant, system-native applications using familiar web technologies. The templates follow best practices for Tauri development while maintaining the flexibility and design consistency of shadcn/ui components. Perfect for developers looking to create desktop applications for Windows, macOS, and Linux without learning platform-specific languages, Tauri UI simplifies the setup process and provides a modern development experience with hot reload, TypeScript support, and production-ready configurations.
Edra template preview
Edra
Tby Tsuzat
Edra is a fully controllable rich text editor specifically designed for Svelte developers, built with Tiptap and offering extensive customization through flexible UI options and comprehensive formatting tools. The MIT-licensed editor provides rich text editing with markdown shortcuts, comprehensive formatting (bold, italic, underline), color picking and highlighting, table creation and manipulation, media embedding (images, videos, audio), code blocks with syntax highlighting, slash commands, math and LaTeX support, drag-and-drop functionality, and search and replace capabilities. Built with Svelte, TypeScript, and Tiptap with optional headless or Shadcn-based UI, Edra offers extensive configuration capabilities and seamless integration as a Svelte component. The editor emphasizes developer experience with the ability to add or remove features as needed while maintaining full control over functionality and appearance. Perfect for content management systems built with Svelte, blogging platforms, documentation sites, note-taking applications, or any Svelte project requiring sophisticated rich text editing with complete control over features and customization, Edra demonstrates Tiptap's power within the Svelte ecosystem.
Edra template preview
Edra
Tby Tsuzat
Edra is a fully controllable rich text editor specifically engineered for Svelte developers, built on the powerful Tiptap editor framework with TypeScript. This comprehensive editing solution offers two flexible UI options: a headless mode for complete customization and a shadcn-based interface for rapid implementation. The editor features markdown shortcuts, comprehensive text formatting (bold, italic, underline, strikethrough), color picking and highlighting, table creation and manipulation, media embedding (images, videos, audio), code blocks with syntax highlighting, drag-and-drop functionality, slash commands, and math/LaTeX support. With its bubble menu for quick editing and extensive extensibility, Edra addresses the lack of powerful, Svelte-native rich text editors in the ecosystem. Perfect for building content management systems, note-taking applications, documentation platforms, and any Svelte application requiring sophisticated text editing capabilities, Edra provides developers with a production-ready component that can be easily integrated and customized to match specific application requirements while maintaining full control over functionality and appearance.