Dapper UI

Dapper UI is a sleek and modern UI component library for Svelte, offering full TypeScript support and extensive documentation. With its built-in dark mode and easy theming options, you can create a unique and personalized look for your application. Built with TailwindCSS, but compatible with any styling solution, Dapper UI offers sleek, accessible and user-friendly component for your next project.

Quick Start Browse Components

Customization

Dapper UI offers a high level of customizability. You can easily modify the global theme to change fonts, colors, border radiuses and more. Additionally, you can adjust the style of individual components to suit your specific needs. Give it a try by selecting another theme with the buttons below.

Password

Repeat Password

I agree to the Terms of Use

or login with

Built-in Dark Mode

Dapper UI has built-in support for dark mode, which is enabled by default and follows the user's system preference. The default dark color theme is beautiful and can be easily customized to your taste. Components like Text use the contrast prop to automatically adjust the text color based on the active mode (dark or light), reducing the overhead of specifying the text color explicitly.

Higher Contrast Text. High Contrast Text. Normal Contrast Text. Low Contrast Text. Lower Contrast Text.

<Text contrast="higher">Higher Contrast Text.</Text>
<Text contrast="high">High Contrast Text.</Text>
<Text>Normal Contrast Text.</Text>
<Text contrast="low">Low Contrast Text.</Text>
<Text contrast="lower">Lower Contrast Text.</Text>