Glisse

Installation

npm install glisse

Usage

import "glisse/styles.css";
import { Switch } from "glisse";

function Settings() {
  return <Switch aria-label="Wi-Fi" defaultChecked />;
}

Refraction

DayWeekMonthDayWeekMonth

Continue

Move the wallpaper under the glass.

Button

<Button icon={<ShareIcon />} aria-label="Share" />
<Button>Continue</Button>

Tab bar

<TabBar
  aria-label="Range"
  items={[
    { value: "day", label: "Day" },
    { value: "week", label: "Week" },
    { value: "month", label: "Month" },
  ]}
  value="week"
  onValueChange={setRange}
/>

Menu

<Menu
  aria-label="Options"
  items={[
    { label: "Pin", icon: <PinIcon />, onSelect: pin },
    { label: "Rename", icon: <PencilIcon />, onSelect: rename },
    { label: "Duplicate", icon: <CopyIcon />, onSelect: duplicate },
    "separator",
    { label: "Delete", icon: <TrashIcon />, onSelect: remove, destructive: true },
  ]}
/>

Input

<Input
  type="search"
  aria-label="Search"
  placeholder="Search"
  icon={<SearchIcon />}
  value=""
  onValueChange={setQuery}
/>

Slider

<Slider aria-label="Volume" value={40} onValueChange={setVolume} />

Switch

<Switch aria-label="Wi-Fi" checked={true} onCheckedChange={setOn} />

Glass

Liquid
Glass

import { Glass } from "glisse";

<Glass
  style={{
    width: 210,
    height: 150,
    borderRadius: 75,
    background: "none",
    backdropFilter: "var(--lg-filter, blur(3px))",
    "--lg-bezel": "25px",
    "--lg-thickness": "50px",
    "--lg-zoom": 1.13,
    "--lg-rim-saturation": 9,
  }}
/>