Ui
Varavel UI
@varavel/ui is the official UI library for the Varavel ecosystem.
It is built for Svelte 5 and Tailwind CSS v4, and ships with reusable components plus a shared Tailwind CSS configuration.
Install
npm install @varavel/ui
Required peer dependencies:
sveltev5+tailwindcssv4+
Quick Start
1) Configure your global stylesheet
In your main stylesheet (for example src/app.css):
@import "tailwindcss";
@import "@varavel/ui/theme.css";
@source "../node_modules/@varavel/ui";
2) Prevent FOUC with Theme Initialization
To ensure the theme is initialized correctly and prevent a Flash of Unstyled Content (FOUC), add the following script (use the CDN or download it) to your app.html (or main HTML file) inside the <head> tag, ideally before any other scripts:
<script src="https://cdn.jsdelivr.net/npm/@varavel/ui@0/static/theme-init.min.js"></script>
You can also use the unminified version during development:
<script src="https://cdn.jsdelivr.net/npm/@varavel/ui@0/static/theme-init.js"></script>
3) Mount UiProvider in your root layout
UiProvider should wrap your app once at the root so shared runtime behavior (dialogs, toasts, tooltip timing, etc.) works globally.
<script>
import "../app.css";
import { UiProvider } from "@varavel/ui";
let { children } = $props();
</script>
<UiProvider>{@render children()}</UiProvider>
4) Using Components, Blocks, and Layouts
Import from the library's specialized entry points. Layouts use Svelte 5 snippets to define structural regions like header, sidebar, and main:
<script lang="ts">
import { Button, Input } from "@varavel/ui";
import { Hero } from "@varavel/ui/blocks";
import { AppLayout } from "@varavel/ui/layouts";
import { toast } from "@varavel/ui/runtime";
</script>
<AppLayout>
{#snippet headerLeft()}
<span>My Application</span>
{/snippet}
{#snippet headerRight()}
<Button size="sm" onclick={() => toast.info("Refreshing...")}>
Refresh
</Button>
{/snippet}
{#snippet main()}
<Hero.Split
title="Modern UI"
description="Svelte 5 & Tailwind 4 components."
/>
<div class="p-6 max-w-sm">
<Input placeholder="Search..." />
</div>
{/snippet}
</AppLayout>
License
This project is released under the MIT License. See the LICENSE.
