···11111212**Work in progress, only for testing purposes**
13131414-1. setup a new svelte project with tailwind
1515-1616-2. install the main dependencies
1414+## 1. Create a new svelte project with tailwind css (including `@tailwindcss/typography` and `@tailwindcss/forms` plugins)
17151816```bash
1919-npm install bits-ui tailwind-variants @tailwindcss/forms @tailwindcss/typography @zerodevx/svelte-img
1717+npx sv create my-project
2018```
21192222-3. if you want to use the image component, add the plugin to your vite config
2020+## 2. Install fox-ui-svelte
23212424-```ts
2525-import { imagetools } from '@zerodevx/svelte-img/vite';
2626-2727-export default defineConfig({
2828- plugins: [sveltekit(), imagetools()]
2929-});
2222+```bash
2323+npm install fox-ui-svelte
3024```
31253232-4. set theme variables in your app.css (changing `gray` and `blue` to your preferred colors, using find and replace) and add the tailwind plugins
2626+## 3. set theme variables in your app.css (changing `gray` and `blue` to your preferred colors, using find and replace).
33273428```css
3535-@plugin '@tailwindcss/typography';
3636-@plugin '@tailwindcss/forms';
2929+@source "../node_modules/fox-ui-svelte";
37303831@theme {
3932 --color-base-50: var(--color-gray-50);
···6255}
6356```
64576565-5. copy `src/lib/utils.ts` to your projects lib folder (has to be exactly this name and path)
5858+## 4. Use the components
66596767-6. copy components from `src/lib/components` to your project
6868-6969-Some components might need additional dependencies, just install once you get an error (recommended), or install all of them at once:
7070-7171-```bash
7272-npm install bits-ui tailwind-variants @tailwindcss/forms @tailwindcss/typography layerchart plyr svelte-sonner tailwindcss-animate three @threlte/extras @threlte/core @types/three @zerodevx/svelte-img @number-flow/svelte wavesurfer.js hls.js @texel/color
6060+```svelte
6161+<script>
6262+ import { Button } from 'fox-ui-svelte';
6363+</script>
7364```
74657575-again tailwind plugins should be added to your `app.css`
76667777-```css
7878-// [other plugins...]
7979-@plugin 'tailwindcss-animate';
6767+If you want to use the image component, add the plugin to your vite config
6868+6969+```ts
7070+import { imagetools } from '@zerodevx/svelte-img/vite';
7171+7272+export default defineConfig({
7373+ plugins: [sveltekit(), imagetools()]
7474+});
8075```