Dapper UI
Download more icon variants from https://tabler-icons.io/i/brand-github View on GitHub
Download more icon variants from https://tabler-icons.io/i/notebook Getting Started
Quick Start (tl;dr)
Installation
Usage
Download more icon variants from https://tabler-icons.io/i/components Components
Button
TextField
Slider
Select
Checkbox
Text
Dialog
Modal
ProgressBar
Meter
Download more icon variants from https://tabler-icons.io/i/bulb Concepts
Theming
Colors
Icons
Styling
Dark Mode
Download more icon variants from https://tabler-icons.io/i/notebook Getting Started
Quick Start (tl;dr)
Installation
Usage
Download more icon variants from https://tabler-icons.io/i/components Components
Button
TextField
Slider
Select
Checkbox
Text
Dialog
Modal
ProgressBar
Meter
Download more icon variants from https://tabler-icons.io/i/bulb Concepts
Theming
Colors
Icons
Styling
Dark Mode

Usage

How to use Dapper UI after installation.

Theme Provider

After successfully installing Dapper UI and the default fonts, you must wrap your app with the ThemeProvider component. This component provides a default theme and adds the default style to the head of your document. It's best to do this as high up in the component tree as possible. If you are using SvelteKit, a good place to include the ThemeProvider is the main +layout.svelte file.
1
2
3
4
5
6
7
8
<script>
	import { ThemeProvider, Button } from '@dapper-ui/core';
</script>

<ThemeProvider>
	<!-- Your app here -->
	<Button>Example</Button>
</ThemeProvider>
If you want to customize the default theme, you can pass a custom theme object to the ThemeProvider component. You can find more information about the theme object in the Theming section.

Done!

You're all set! Take some time to explore the components and experiment with them. Keep in mind that Dapper UI is still in its early stages of development, so some components may be missing or incomplete. If you have any questions or ideas for the project, don't hesitate to create an issue on GitHub (Bastian/dapper-ui ). And if you enjoy using Dapper UI, we would greatly appreciate it if you could give the repository a star. It helps others discover the project and supports its continued development.
Thank you for using Dapper UI!