UI & Styling

SveltePak was built with re-usable components built with Shadcn Svelte and Tailwind CSS, which relies on Bits UI and Melt UI.

Shadcn Svelte is an unofficial, community-led Svelte port of shadcn/ui. We are not affiliated with shadcn, but we did get his blessing before creating a Svelte version of his work. This project was born out of the need for a similar project for the Svelte ecosystem.

https://www.shadcn-svelte.com/docs

Bits UI is a collection of headless component primitives that enable you to build your own custom components. They have been thoughtfully designed to prioritize simplicity without compromising customizability.

https://www.bits-ui.com/docs/introduction

An open-source Svelte library for building high-quality, accessible design systems and web apps.

https://melt-ui.com/docs/introduction

Theme configuration

You can configure the theme by editing the app.css and tailwind.config.js files in the root directory.

The app.css file contains several variables for colors for the light and dark theme that are then exposed into the tailwind.config.js file.