Getting Started

1. First install the chocobytes package:

pnpm add -D chocobytes

2. Then add the choco preprocessor to your svelte.config.js:

import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
import { chocoPreprocess } from "chocobytes/preprocessor";

export default {
  preprocess: [chocoPreprocess(), vitePreprocess()],
  //... rest of your Svelte config
};

The preprocessor expands the use:choco shorthand syntax. Learn more

3. (Optional). To copy the component files to your own project folder, run:

npx chocobytes

The CLI will let you choose which components to copy to your project’s $lib/components folder. This way you own the files and can easily customize and tweak the Tailwind styles and overall implementations. Tailwind v4 is recommended for optimal results.

Also, copy-pasting examples from this documentation will just work out of the box, without adjusting the imports.