Liquid Blur

1. Install.

   pnpmnpmyarnbun

   pnpm add @fluidkit/core

2. Import the stylesheet once, anywhere in your app.

   import "@fluidkit/core/style.css";

3. Add the class.

   <button class="lb">Glass</button>

4. Set up press effects if you use the press classes (lb-highlight, lb-swell, lb-stretch, lb-interactive). It adds a single listener to the document, so elements added later work too, in any framework. On the server it does nothing.

   import { installPress } from "@fluidkit/core";
   
   installPress();

1. Install. The React components and hooks, with all of core (React 18+).

   pnpmnpmyarnbun

   pnpm add @fluidkit/react

2. Import the stylesheet once, in your app’s root (a layout or main.tsx).

   import "@fluidkit/react/style.css";

3. Use Glass. Variants are props, and render lets you use your own element. Press props (interactive, highlight, swell, stretch) set up press effects automatically.

   import { Glass } from "@fluidkit/react";
   
   <Glass render={<nav />}>…</Glass>
   <Glass interactive render={<button type="button" />}>Follow</Glass>

   The classes are plain CSS, so className="lb lb-interactive" also works. In that case, call usePress() once in your root component.

1. Install. The Vue components and composables, with all of core (Vue 3.5+).

   pnpmnpmyarnbun

   pnpm add @fluidkit/vue

2. Import the stylesheet once, in your app’s entry (main.ts, or Nuxt’s css option).

   import "@fluidkit/vue/style.css";

3. Use Glass. Variants are props, and as-child lets you use your own element. Press props (interactive, highlight, swell, stretch) set up press effects automatically.

   <script setup lang="ts">
   import { Glass } from "@fluidkit/vue";
   </script>
   
   <template>
     <Glass as-child><nav>…</nav></Glass>
     <Glass interactive as-child><button type="button">Follow</button></Glass>
   </template>

   The classes are plain CSS, so class="lb lb-interactive" also works. In that case, call usePress() once in your root component.

1. Install. The Svelte components and runes, with all of core (Svelte 5.29+).

   pnpmnpmyarnbun

   pnpm add @fluidkit/svelte

2. Import the stylesheet once, in your root layout (src/routes/+layout.svelte in SvelteKit) or your app’s entry.

   import "@fluidkit/svelte/style.css";

3. Use Glass. Variants are props, and a child snippet lets you use your own element: spread the props it gives onto it. Press props (interactive, highlight, swell, stretch) set up press effects automatically.

   <script lang="ts">
     import { Glass } from "@fluidkit/svelte";
   </script>
   
   <Glass>
     {#snippet child({ props })}<nav {...props}>…</nav>{/snippet}
   </Glass>
   <Glass interactive>
     {#snippet child({ props })}<button {...props} type="button">Follow</button>{/snippet}
   </Glass>

   The classes are plain CSS, so class="lb lb-interactive" also works. In that case, call usePress() once in your root layout.

No build step? Link the stylesheet and load the auto entry, which sets up press effects for you. With a bundler, import "@fluidkit/core/auto" does the same.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fluidkit/core@2/dist/style.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@fluidkit/core@2/dist/auto.js/+esm"></script>

@fluidkit/react provides Glass, Glass.Group and a few hooks. See Components. It sets up press effects and groups for you.

@fluidkit/vue provides Glass, Glass.Group and a few composables. See Components. It sets up press effects and groups for you.

@fluidkit/svelte provides Glass, Glass.Group and a few functions. See Components. It sets up press effects and groups for you.

Glass adds the classes based on its props. tint also accepts a color.

<Glass interactive render={<button />}>Press me</Glass>
<Glass highlight stretch>A bar: lights and stretches, doesn't swell</Glass>
<Glass tint="#ff3b30" highlight render={<button />}>Tinted</Glass>
<Glass clear>Over a photo</Glass>
<Glass lens>A lens</Glass>
<Glass style={{ borderRadius: 24, padding: 16 }}>Card</Glass>

Glass adds the classes based on its props. tint also accepts a color.

<Glass interactive as-child><button>Press me</button></Glass>
<Glass highlight stretch>A bar: lights and stretches, doesn't swell</Glass>
<Glass tint="#ff3b30" highlight as-child><button>Tinted</button></Glass>
<Glass clear>Over a photo</Glass>
<Glass lens>A lens</Glass>
<Glass :style="{ borderRadius: '24px', padding: '16px' }">Card</Glass>

Glass adds the classes based on its props. tint also accepts a color.

<Glass interactive>
  {#snippet child({ props })}<button {...props}>Press me</button>{/snippet}
</Glass>
<Glass highlight stretch>A bar: lights and stretches, doesn't swell</Glass>
<Glass tint="#ff3b30" highlight>
  {#snippet child({ props })}<button {...props}>Tinted</button>{/snippet}
</Glass>
<Glass clear>Over a photo</Glass>
<Glass lens>A lens</Glass>
<Glass style="border-radius: 24px; padding: 16px">Card</Glass>

Glass with a press prop sets this up automatically. If you write the classes by hand, call usePress() in your root component.

Glass with a press prop sets this up automatically. If you write the classes by hand, call usePress() in your root component.

Glass with a press prop sets this up automatically. If you write the classes by hand, call usePress() in your root layout.

Server rendering. The entry is safe to import on the server, where installGlassGroups() does nothing. In React, Vue or Svelte, call it after hydration (in an effect), because the group adds its own elements to the root. Write both lb lb-group in your markup, so a re-render doesn’t drop lb.

import { useEffect } from "react";
import { installGlassGroups } from "@fluidkit/core";

export function Toolbar() {
  // After hydration, since the group adds its own elements to the root
  useEffect(() => installGlassGroups(), []);
  return (
    // Include "lb" in the markup so a re-render keeps it
    <div className="lb lb-group">
      <div className="lb">…</div>
      <button className="lb lb-interactive">…</button>
    </div>
  );
}

Server rendering. Glass.Group renders lb lb-group on the server and sets up the group after hydration. It cleans up on unmount. The group adds its own elements to the root, so select children by class (.toolbar > .lb), not with > *.

Server rendering. Glass.Group renders lb lb-group on the server, including in Nuxt, and sets up the group after hydration. It cleans up on unmount. The group adds its own elements to the root, so select children by class (.toolbar > .lb), not with > *.

Server rendering. Glass.Group renders lb lb-group on the server, including in SvelteKit, and sets up the group after hydration. It cleans up when it’s removed. The group adds its own elements to the root, so select children by class (.toolbar > .lb), not with > *.

Glass renders a div, or your own element with render (as in Base UI). Your classes and styles are kept.

Press props set up press effects automatically, including inside iframes.

Glass.Group renders a div with lb lb-group, or your own element, and turns it into a glass group. merge sets how close children get before merging, in px (default 18). transparency and depth work like on Glass and apply to all children.

<Glass.Group className="toolbar" merge={24}>
  <Glass interactive render={<button aria-label="Back" />}><BackIcon /></Glass>
  <Glass interactive render={<button aria-label="Share" />}><ShareIcon /></Glass>
</Glass.Group>

Hooks and helpers.

• glass(variants) returns { className, style } for the same props, for elements that aren’t Glass, like a router Link.
• usePress() sets up press effects, if you write the press classes by hand.
• useGlassGroup() returns a ref for a group root (with lb lb-group) and the group itself, so you can call update().

import { glass, useGlassGroup, usePress } from "@fluidkit/react";

const { className, style } = glass({ interactive: true, tint: "#0a84ff" });
<Link className={className} style={style} href="/follow">Follow</Link>;

const { root, group } = useGlassGroup();
<div ref={root} className="lb lb-group">…</div>;

Glass renders a div, or with as-child the element in its slot. Your classes and styles are kept.

Press props set up press effects automatically, including inside iframes.

Glass.Group renders a div with lb lb-group, or the element in its slot, and turns it into a glass group. merge sets how close children get before merging, in px (default 18). transparency and depth work like on Glass and apply to all children.

<Glass.Group class="toolbar" :merge="24">
  <Glass interactive as-child><button aria-label="Back"><BackIcon /></button></Glass>
  <Glass interactive as-child><button aria-label="Share"><ShareIcon /></button></Glass>
</Glass.Group>

Composables and helpers.

• glass(variants) returns { class, style } for the same props, to bind to elements that aren’t Glass: v-bind="glass({ interactive: true })".
• usePress() sets up press effects, if you write the press classes by hand.
• useGlassGroup() returns a function ref for a group root (with lb lb-group) and the group itself, so you can call update().

<script setup lang="ts">
import { glass, useGlassGroup } from "@fluidkit/vue";

const { root, group } = useGlassGroup();
</script>

<template>
  <RouterLink v-bind="glass({ interactive: true, tint: '#0a84ff' })" to="/follow">Follow</RouterLink>
  <div :ref="root" class="lb lb-group">…</div>
</template>

Glass renders a div, or with a child snippet an element of yours. Your classes and styles are kept.

Press props set up press effects automatically, including inside iframes.

Glass.Group renders a div with lb lb-group, or an element of yours with a child snippet, and turns it into a glass group. merge sets how close children get before merging, in px (default 18). transparency and depth work like on Glass and apply to all children.

<Glass.Group class="toolbar" merge={24}>
  <Glass interactive>
    {#snippet child({ props })}<button {...props} aria-label="Back"><BackIcon /></button>{/snippet}
  </Glass>
  <Glass interactive>
    {#snippet child({ props })}<button {...props} aria-label="Share"><ShareIcon /></button>{/snippet}
  </Glass>
</Glass.Group>

Functions and helpers.

• glass(variants) returns { class, style } for the same props, to spread onto elements that aren’t Glass: <a {...glass({ interactive: true })} href="/follow">.
• usePress() sets up press effects, if you write the press classes by hand.
• useGlassGroup() returns an attachment for a group root (with lb lb-group) and the group itself, so you can call update().

<script lang="ts">
  import { glass, useGlassGroup } from "@fluidkit/svelte";

  const toolbar = useGlassGroup();
</script>

<a {...glass({ interactive: true, tint: "#0a84ff" })} href="/follow">Follow</a>
<div {@attach toolbar.root} class="lb lb-group">…</div>