Quick Start (tl;dr)

Install Dapper UI with your favorite package manager:

npm install @dapper-ui/core

yarn add @dapper-ui/core

pnpm add @dapper-ui/core

Wrap your code in the ThemeProvider component as high as possible in your component tree:

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>

Install and import the default fonts (for example in the +layout.svelte file):

npm install @fontsource/open-sans @fontsource/fira-mono

yarn add @fontsource/open-sans @fontsource/fira-mono

pnpm add @fontsource/open-sans @fontsource/fira-mono

1
2
3
4
5
6
7

<script>
    import "@fontsource/open-sans/400.css";
    import "@fontsource/open-sans/500.css";
    import "@fontsource/open-sans/600.css";
    import "@fontsource/open-sans/700.css";
    import "@fontsource/fira-mono/400.css";
</script>

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!