A minimalist Svelte 5 component and utility library
BetterKit is designed to be a lightweight, easy-to-use library for SvelteKit applications. Built with Svelte 5 and Tailwind v4, it focuses on simplicity and developer experience while minimizing external dependencies.
Standalone UI components that work independently
Backend-integrated components for auth, database, and more
Ready-to-use API endpoints for common functionalities
To use BetterKit, first set up your app.css file with the following theme configuration. This will provide you with a consistent design system across your application:
@import 'tailwindcss';
@theme inline {
--color-main: var(--main);
--color-primary: var(--primary);
--color-primary-2: var(--primary-2);
--color-primary-3: var(--primary-3);
--color-primary-4: var(--primary-4);
--color-secondary: var(--secondary);
--color-secondary-2: var(--secondary-2);
--color-secondary-3: var(--secondary-3);
--color-secondary-4: var(--secondary-4);
--color-primary-accent: var(--primary-accent);
--color-secondary-accent: var(--secondary-accent);
--color-danger: var(--danger);
--color-success: var(--success);
--color-warning: var(--warning);
--color-neutral: var(--neutral);
}
@layer base {
:root {
--main: theme('colors.white');
--primary: theme('colors.slate.50');
--primary-2: theme('colors.slate.100');
--primary-3: theme('colors.slate.200');
--primary-4: theme('colors.slate.300');
--secondary: theme('colors.slate.900');
--secondary-2: theme('colors.slate.800');
--secondary-3: theme('colors.slate.700');
--secondary-4: theme('colors.slate.500');
--primary-accent: theme('colors.amber.500');
--secondary-accent: theme('colors.gray.900');
--danger: theme('colors.red.500');
--success: theme('colors.emerald.500');
--warning: theme('colors.orange.400');
--neutral: theme('colors.gray.500');
}
}
BetterKit is currently in beta, with new components and features being added regularly. This library's main focus is on: