Svelte 5 Ui Lib: v0.4.12
Svelte 5 UI Lib is a UI library for Svelte 5 Runes. Explore our collection featuring over 36 components.
Installation
Svelte-5 Runes
After installing Svelte-5, update `svelte.config.js` to enable `runes`:import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: [vitePreprocess({})],
compilerOptions: {
runes: true
},
kit: {
adapter: adapter()
}
};
export default config;
Svelte-5-Ui-Lib
Install `svelte-5-ui-lib:pnpm i -D svelte-5-ui-lib
Flowbite-Svelte-Icons@next
Install flowbite-svelte-icons@2.0.0-next.1:pnpm i -D flowbite-svelte-icons@2.0.0-next.1
Tailwind
Install tailwindcss:npx svelte-add@latest tailwindcss
pnpm i
const config = {
content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/svelte-5-ui-lib/**/*.{html,js,svelte,ts}'],
darkMode: 'selector',
theme: {
extend: {
colors: {
// violet
primary: { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95'
}
}
}
}
};
module.exports = config;
Dependency info
- Svelte: 5.0.0-next.123
- SvelteKit: 2.5.7
- TailwindCSS: 3.4.3
Credits
- Flowbite
- Flowbite-Svelte