Getting Started

Fluid UI is a pragmatic Svelte 5 component library designed for flexibility and ease of use. It separates low-level semantic wrappers from high-level interactive components, giving you complete control over your application's architecture.

Library Structure

The library is organized into two distinct layers to handle different development needs:

Base Layer

Located in fluid-ui-svelte/base. These are lightweight wrappers around native HTML elements (Buttons, Inputs, Containers). Use them to maintain semantic consistency and accessibility without imposing heavy styles.

Components Layer

Located in fluid-ui-svelte/components. These are fully-featured UI elements (Accordions, Calendars, Switches) composed from the Base Layer. They include interaction logic and default styling that can be themed via CSS variables.

Installation

1. Install the package

Install the library using your package manager of choice.

0

npm install fluid-ui-svelte

2. Configure Global Styles

Fluid UI does not inject styles automatically. This allows you to maintain library specific styling and app specific styling separately. Download the reference fluidui.css file, place it in your project (e.g., src/), and import it in your main CSS file.

0

/* src/app.css */

1

@import "./fluidui.css";

2

3

/* Your application styles */

Usage

Import components directly from their respective layers. Svelte 5 Runes mode is required.

0

<script>

1

  // Import a base element for custom implementation

2

  import { Button } from 'fluid-ui-svelte/base';

3

4

  // Import a pre-built component

5

  import { Accordion } from 'fluid-ui-svelte/components';

6

</script>

7

8

<Button onclick={handleClick}>Submit</Button>

9

10

<Accordion>

11

  <!-- Accordion content -->

12

</Accordion>