A comprehensive collection of modern, accessible, and customizable UI components built with SvelteKit and Tailwind CSS.
Made with โค๏ธ by Reckless98
npm install svelte-ui-toolkit
<script>
import { Button, Card, Input, Modal } from 'svelte-ui-toolkit';
let showModal = false;
let formData = { name: '', email: '' };
</script>
<Card title="Contact Form" variant="elevated">
<form class="space-y-4">
<Input label="Name" bind:value={formData.name} placeholder="Enter your name" required />
<Input
type="email"
label="Email"
bind:value={formData.email}
placeholder="Enter your email"
required
/>
<Button variant="primary" on:click={() => (showModal = true)}>Submit</Button>
</form>
</Card>
<Modal bind:show={showModal} title="Thank You!">
<p>Your form has been submitted successfully.</p>
</Modal>
The toolkit uses CSS custom properties for easy theming:
:root {
/* Primary Colors */
--color-primary: #3b82f6;
--color-primary-hover: #2563eb;
--color-accent: #10b981;
/* Neutral Colors */
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-900: #111827;
/* Component Specific */
--button-border-radius: 0.5rem;
--card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
--modal-backdrop: rgba(0, 0, 0, 0.5);
}
All components automatically support dark mode through CSS classes:
<div class="dark">
<!-- All components will use dark theme -->
<Button variant="primary">Dark Mode Button</Button>
</div>
Add the following to your tailwind.config.js
:
module.exports = {
content: [
'./src/**/*.{html,js,svelte,ts}',
'./node_modules/svelte-ui-toolkit/**/*.{html,js,svelte,ts}',
],
darkMode: 'class',
theme: {
extend: {
colors: {
accent: {
50: '#f0fdf4',
500: '#10b981',
600: '#059669',
700: '#047857',
},
},
},
},
};
This project includes a comprehensive component explorer accessible at /explorer
. The explorer provides:
To access the explorer:
npm run dev
# Navigate to http://localhost:5173/explorer
The components are thoroughly tested with:
Run tests:
npm run test
npm run test:accessibility
npm run test:visual
src/
โโโ lib/
โ โโโ components/
โ โ โโโ Button/
โ โ โ โโโ Button.svelte
โ โ โ โโโ index.js
โ โ โ โโโ README.md
โ โ โโโ [other components]/
โ โโโ layouts/
โ โ โโโ HeroLayout.svelte
โ โ โโโ ParallaxLayout.svelte
โ โโโ animations/
โ โโโ ScrollReveal.svelte
โ โโโ Parallax.svelte
โโโ routes/
โโโ explorer/
โโโ +page.svelte
โโโ Sidebar.svelte
โโโ components/
โโโ [component explorers]/
git checkout -b feature/new-component
When creating new components:
MIT License - see LICENSE file for details.