Beautiful UI components built with Tailwind 4 and Svelte 5
npm install fuchs> This is a public alpha release. Expect bugs and breaking changes.
svelte v5 + tailwind v4
Read more about the philosophy/aim of this project here.
``bash`
npx sv create my-project
`bash`
npm install fuchs
`css
@source "../node_modules/fuchs";
@theme {
--color-base-50: var(--color-zinc-50);
--color-base-100: var(--color-zinc-100);
--color-base-200: var(--color-zinc-200);
--color-base-300: var(--color-zinc-300);
--color-base-400: var(--color-zinc-400);
--color-base-500: var(--color-zinc-500);
--color-base-600: var(--color-zinc-600);
--color-base-700: var(--color-zinc-700);
--color-base-800: var(--color-zinc-800);
--color-base-900: var(--color-zinc-900);
--color-base-950: var(--color-zinc-950);
--color-accent-50: var(--color-emerald-50);
--color-accent-100: var(--color-emerald-100);
--color-accent-200: var(--color-emerald-200);
--color-accent-300: var(--color-emerald-300);
--color-accent-400: var(--color-emerald-400);
--color-accent-500: var(--color-emerald-500);
--color-accent-600: var(--color-emerald-600);
--color-accent-700: var(--color-emerald-700);
--color-accent-800: var(--color-emerald-800);
--color-accent-900: var(--color-emerald-900);
--color-accent-950: var(--color-emerald-950);
}
`
`svelte
`
If you want to contribute to the project, please open an issue first describing the feature you want to add.
Clone the repo, install dependencies and run the dev server
`bash`
git clone https://github.com/flo-bit/ui-kit.git
cd ui-kit
npm install
npm run dev
The ui-kit library is located in src/lib, the documentation is in src/docs`.