Installation
Get started with sappsui by following these simple steps to set up your Svelte project with Tailwind CSS and the sappsui component library.
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 sappsui
Install the sappsui 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, sappsui styles, and theme color variables.
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 sappsui. 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