Quick Start
Public alpha
This is a public alpha release. Expect bugs and breaking changes.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 theme variables in your app.css
You can change the colors to your liking.
@source "../node_modules/@foxui"; @custom-variant dark (&:is(.dark *)); @theme { --color-base-50: var(--color-zinc-50); --color-base-100: var(--color-zinc-100); --color-base-200: var(--color-zinc-200); --color-base-300: var(--color-zinc-300); --color-base-400: var(--color-zinc-400); --color-base-500: var(--color-zinc-500); --color-base-600: var(--color-zinc-600); --color-base-700: var(--color-zinc-700); --color-base-800: var(--color-zinc-800); --color-base-900: var(--color-zinc-900); --color-base-950: var(--color-zinc-950); --color-accent-50: var(--color-emerald-50); --color-accent-100: var(--color-emerald-100); --color-accent-200: var(--color-emerald-200); --color-accent-300: var(--color-emerald-300); --color-accent-400: var(--color-emerald-400); --color-accent-500: var(--color-emerald-500); --color-accent-600: var(--color-emerald-600); --color-accent-700: var(--color-emerald-700); --color-accent-800: var(--color-emerald-800); --color-accent-900: var(--color-emerald-900); --color-accent-950: var(--color-emerald-950); }
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:
light mode only (default), for dark mode only, add the
dark
class to thehtml
element in your app.Allow users to switch between modes using the <ThemeToggle /> component (before being pressed will default mode to system settings).
automatically chooses the mode based on the system settings, simply remove the following from your app.css:
@custom-variant dark (&:is(.dark *));