lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
89 lines (88 loc) • 3.6 kB
TypeScript
import React from "react";
export type IslandPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
export interface IslandSection {
id: string;
label: string;
}
export interface IslandFont {
name: string;
value: string;
}
export interface IslandTheme {
name: string;
/**
* Accent colour. Sets `--island-color` on `<html>`.
* Bridge to your tokens: `--primary: var(--island-color);`
*/
color: string;
/** Lighter shade — sets `--island-color-2`. */
color2?: string;
}
export interface DynamicIslandProps {
/**
* Where the island is placed on the viewport.
* @default "bottom-center"
*/
position?: IslandPosition;
/**
* Page sections to track. Each `id` must match a DOM element's id attribute.
* @default [{ id: "home", label: "Home" }]
*/
sections?: IslandSection[];
/** Label shown before any section is active. @default "Home" */
defaultSectionLabel?: string;
/**
* Icon beside the scroll ring. Any React node — Lucide icon, SVG, emoji.
* When provided, the animated progress ring is replaced by this icon.
*/
sectionIcon?: React.ReactNode;
/**
* Font picker options. Selecting a font sets `document.body.style.fontFamily`
* globally, overriding even external Google-Fonts `<link>` tags.
*/
fonts?: IslandFont[];
/** Show/hide the font picker button. @default true */
showFontPicker?: boolean;
/** Active font index on mount. @default 0 */
defaultFontIndex?: number;
/**
* Theme colour presets. Selecting one writes `--island-color` and
* `--island-color-2` on `<html>` so your CSS tokens update instantly.
*/
themes?: IslandTheme[];
/** Show/hide the theme picker button. @default true */
showThemePicker?: boolean;
/** Active theme index on mount. @default 0 */
defaultThemeIndex?: number;
/**
* localStorage key prefix for persisting font/theme across refreshes.
* Use unique keys per page to avoid collisions.
* @default "island"
*/
storageKey?: string;
/** Disable localStorage persistence entirely. @default false */
disablePersistence?: boolean;
/**
* Extra CSS classes on the outermost wrapper div.
* Use to fine-tune positioning or styling.
*/
className?: string;
/**
* CSS selectors for modal-like elements. The island hides itself
* whenever any matching element is visible.
* @default ["[data-checkout-modal=\"true\"]", ".modal", "[role=\"dialog\"]"]
*/
modalSelectors?: string[];
/** Glass background colour in light mode. @default "rgba(255,255,255,0.8)" */
lightBg?: string;
/** Glass background colour in dark mode. @default "#111111" */
darkBg?: string;
/** Fired each time the active section changes. */
onSectionChange?: (section: IslandSection | null) => void;
/** Fired each time the user picks a font. */
onFontChange?: (font: IslandFont) => void;
/** Fired each time the user picks a theme. */
onThemeChange?: (theme: IslandTheme) => void;
}
export declare function DynamicIsland({ position, sections, defaultSectionLabel, sectionIcon, fonts, showFontPicker, defaultFontIndex, themes, showThemePicker, defaultThemeIndex, storageKey, disablePersistence, className, modalSelectors, lightBg, darkBg, onSectionChange, onFontChange, onThemeChange, }: DynamicIslandProps): import("react/jsx-runtime").JSX.Element;
export default function DynamicIslandDemo(): import("react/jsx-runtime").JSX.Element;