UiSvelte

Installation

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.

Prerequisites: Make sure you have Bun installed on your system. If you don't have it, visit bun.sh to install it.

1. Create a new Svelte project

Use the Svelte CLI to create a new project. Replace project-name with your desired project name.

2. Add Tailwind CSS

Navigate to your project directory and add Tailwind CSS using the Svelte CLI.

3. Install ui-svelte

Install the ui-svelte component library as a dependency in your project.

4. Configure your CSS file

Create or update your src/app.css file with the following configuration. This includes Tailwind CSS, ui-svelte styles, and theme color variables.

Note: You can customize these color values to match your brand. See the Theme Colors section for more information.

5. Setup the Provider in your root layout

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.

Provider Props

  • toastPosition - Position of toast notifications: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
  • toastIcon - Show icons in toast notifications (boolean)
  • toastSolid - Use solid background for toast notifications (boolean)

6. Optional: Install custom fonts

You can use Fontsource to easily add custom fonts to your project. The example above uses Montserrat Variable.

Then import it in your layout file as shown in step 5. You can browse available fonts at fontsource.org.

🎉 You're all set!

Your Svelte project is now configured with ui-svelte. You can start using components in your pages.

Next Steps:

  • Explore the Theme Colors documentation
  • Learn about Icons integration
  • Browse the component documentation to see what's available

© 2025 UiSvelte