RetroUI Svelte

A comprehensive UI component library that brings the beautiful design system of RetroUI to the Svelte ecosystem.

🌐 Website • 📚 Documentation • 🐛 Issues

---

✨ Features

• 🎨 16 Beautiful Themes. Choose from a curated collection of themes including Green, Orange, Yellow, Teal, Purple, Gold, Coral, Cyan, Blue, Red, Pink, Indigo, Lime, Rose, Sky, and Slate
• 🌓 Light & Dark Mode. All themes support both light and dark modes with smooth transitions
• 🔧 Highly Customizable. Extensive customization options through props, CSS variables, and theme overrides
• 📚 Rich Documentation. Detailed documentation with examples and usage guides
• 🔄 Unofficial Port. Community-driven port from the original RetroUI library created by Mhamad6000

🚀 Quick Start

Prerequisites

Important: RetroUI Svelte requires shadcn-svelte to be installed and configured in your project.

Installation

# Install components
npx shadcn-svelte@latest add https://retroui-svelte.netlify.app/r/button.json
npx shadcn-svelte@latest add https://retroui-svelte.netlify.app/r/input.json
npx shadcn-svelte@latest add https://retroui-svelte.netlify.app/r/card.json

Usage

<script>
  import { Button } from '$lib/components/ui/button';
  import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
</script>

<Card class="w-96">
  <CardHeader>
    <CardTitle>Welcome to RetroUI</CardTitle>
  </CardHeader>
  <CardContent>
    <Button>Get Started</Button>
  </CardContent>
</Card>

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Original RetroUI: This is an unofficial port of the original RetroUI library
• shadcn-svelte: Built on top of the excellent shadcn-svelte registry system
• Community: Thanks to all contributors and users!