@varavel/ui

v0.1.11

Published

23 days ago

The official Svelte & Tailwind UI library for Varavel

Downloads

400

0High
0Medium
0Low

eduardolat

varavel svelte ui components

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:

svelte v5+
tailwindcss v4+

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>

If you use AppLayout with sidebarResizableId, you can also add the optional AppLayout bootstrapper before your app mounts. It reads saved sidebar widths from localStorage and applies them as CSS variables before the first paint, preventing the sidebar from briefly rendering at its preset width and then shifting after hydration:

<script src="https://cdn.jsdelivr.net/npm/@varavel/ui@0/static/layout-app-init.js"></script>

This script is optional. If it is omitted, AppLayout still restores persisted sidebar widths after hydration; the only difference is that users may briefly see the preset sidebarWidth before the saved width is applied.

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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme