Quick Start

1. Create a new svelte project with tailwind css

		
npx sv create my-project

	

Also add the @tailwindcss/typography and @tailwindcss/forms plugins.

2. Install the core fox ui components by running:

		
npm install @foxui/core

	

3. Set up your app.css

Add the following to your app.css to import the theme (which includes the base/accent color system and all color classes):

		
@custom-variant dark (&:is(.dark *));

@import '@foxui/core/theme.css';

@source "../node_modules/@foxui";

	

4. Use a component

		
<script>
	import { Button } from '@foxui/core';
</script>

<Button>Click me</Button>

	

More info

Subpackages

Fox UI is split into multiple subpackages to minimize both the bundle size as well as the amount of dependencies. Simply install a package when you need it, or you can install all of them with:

		
npm install @foxui/core @foxui/3d @foxui/colors @foxui/social @foxui/text @foxui/time @foxui/visual

	

Dark mode

This ui kit is designed to be used in both light and dark mode, and can be used in the following ways:

1. light mode only (default), for dark mode only, add the dark class to the html element in your app.

2. Allow users to switch between modes using the <ThemeToggle /> component (before being pressed will default mode to system settings).

3. automatically chooses the mode based on the system settings, simply remove the following from your app.css:

		
@custom-variant dark (&:is(.dark *));