Installation

Prerequisites

FancyUI targets the current Svelte toolchain. Check these three before installing.

Install

Pick your package manager, wire up the stylesheet, then render your first component.

1. 1
   Install the package

   One package for every component. Switch tabs to copy the command for your package manager.

   pnpmnpmbun

   Copy

   pnpm add fancy-ui-svelte
2. 2
   Import the stylesheet

   Add the FancyUI stylesheet right after your Tailwind import.

   css Copy

   @import "tailwindcss";
   @import "fancy-ui-svelte/tailwind.css";

   In your global stylesheet, usually src/app.css.

3. 3
   Render a component

   Import from the package root and drop it into your markup.

   svelte Copy

   <script lang="ts">
   	import { RainbowButton } from 'fancy-ui-svelte';
   </script>
   
   <RainbowButton>Click me</RainbowButton>

Tailwind CSS setup

FancyUI is built on Tailwind CSS v4, which is configured in CSS instead of a JavaScript config file. If Tailwind already works in your project, there is nothing else to configure.

Import order matters: Tailwind first, FancyUI second, so FancyUI's layers and custom properties resolve on top of the defaults.

Usage

Every component is a named export of the package root, so there are no per-component import paths to remember.

<script lang="ts">
	import { BorderBeam, RainbowButton } from 'fancy-ui-svelte';
</script>

<div class="relative overflow-hidden rounded-xl border p-8">
	<RainbowButton>Click me</RainbowButton>
	<BorderBeam colorFrom="#9E7AFF" colorTo="#FE8BBB" />
</div>

Each component's page lists its props, live examples and accessibility notes.

TypeScript

Prop types are exported next to each component, so you can type wrappers and shared presets.

import { type BorderBeamProps } from 'fancy-ui-svelte';

const beam: BorderBeamProps = { colorFrom: "#9E7AFF", colorTo: "#FE8BBB" };

Types ship inside the package. There is no separate types package to install.

Peer dependencies

FancyUI expects these to already exist in your project:

A few components need extra runtime libraries. These ship with the package, so there is nothing more to install:

They are only pulled in by the components that use them.

Next steps