Use the Svelte CLI to create a new project. Replace project-name with your desired
project name.
Get started with ui-svelte by following these simple steps to set up your Svelte project with Tailwind CSS and the ui-svelte component library.
Create a new Svelte project
Use the Svelte CLI to create a new project. Replace project-name with your desired
project name.
Add Tailwind CSS
Navigate to your project directory and add Tailwind CSS using the Svelte CLI.
Install ui-svelte
Install the ui-svelte component library as a dependency in your project.
Configure your CSS file
Create or update your src/routes/layout.css file with the following configuration. This includes
Tailwind CSS, ui-svelte styles, and theme color variables.
Setup the Provider
Update your src/routes/+layout.svelte file to include the Provider component and import
your CSS. The Provider component handles toast notifications and view transitions.
toastPosition ('top-left' | 'top-right' | 'bottom-left' | 'bottom-right'), toastIcon (boolean), toastSolid (boolean)Install custom fonts (Optional)
You can use Fontsource to easily add custom fonts to your project. Follow these steps to add Montserrat Variable:
Install the font package:
Add the font-family to your src/routes/layout.css:
Import the font in your +layout.svelte:
🎉 You're all set!
Your Svelte project is now configured with ui-svelte. You can start using components in your pages.