Liquid Glass Collapsible

A 3D glassmorphic expandable panel component featuring modular subcomponents (Trigger, Content), smooth Framer Motion spring height expansion, specular glare overlay, and 7 color crystal variants.

...

How to Import

Add this import to your component file

app/page.tsx

1import LiquidGlassCollapsible, { LiquidGlassCollapsibleTrigger, LiquidGlassCollapsibleContent } from "@/components/lightswind/liquid-glass-collapsible"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

open	boolean	-	Controlled open state of the collapsible panel.	Optional
defaultOpen	boolean	false	Initial open state for uncontrolled usage.	Optional
onOpenChange	(open: boolean) => void	-	Callback triggered when open state changes.	Optional
variant	"glass" \| "aurora" \| "emerald" \| "cyan" \| "purple" \| "primary" \| "dark"	"glass"	Color crystal theme variant.	Optional
disabled	boolean	false	Disable trigger interactions.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import LiquidGlassCollapsible, {
2  LiquidGlassCollapsibleTrigger,
3  LiquidGlassCollapsibleContent,
4} from "@/components/lightswind/liquid-glass-collapsible";
5
6export function Demo() {
7  return (
8    <LiquidGlassCollapsible variant="aurora" defaultOpen>
9      <LiquidGlassCollapsibleTrigger>
10        <span>Workspace Configuration</span>
11      </LiquidGlassCollapsibleTrigger>
12      <LiquidGlassCollapsibleContent>
13        <p>Configure your liquid glass runtime settings and node parameters.</p>
14      </LiquidGlassCollapsibleContent>
15    </LiquidGlassCollapsible>
16  );
17}

Variants

Different visual and behavioral variants of the component

Aurora Crystal Variant

Violet-fuchsia crystal collapsible with spring animation.

Preview not available for this example.

Previousliquid-glass-checkbox

Nextliquid-glass-dialog

A product byＭＵＨＩＬＡＮ and Team❤️.

Liquid Glass Collapsible

A 3D glassmorphic expandable panel component featuring modular subcomponents (Trigger, Content), smooth Framer Motion spring height expansion, specular glare overlay, and 7 color crystal variants.

...

How to Import

Add this import to your component file

app/page.tsx

1import LiquidGlassCollapsible, { LiquidGlassCollapsibleTrigger, LiquidGlassCollapsibleContent } from "@/components/lightswind/liquid-glass-collapsible"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

open	boolean	-	Controlled open state of the collapsible panel.	Optional
defaultOpen	boolean	false	Initial open state for uncontrolled usage.	Optional
onOpenChange	(open: boolean) => void	-	Callback triggered when open state changes.	Optional
variant	"glass" \| "aurora" \| "emerald" \| "cyan" \| "purple" \| "primary" \| "dark"	"glass"	Color crystal theme variant.	Optional
disabled	boolean	false	Disable trigger interactions.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import LiquidGlassCollapsible, {
2  LiquidGlassCollapsibleTrigger,
3  LiquidGlassCollapsibleContent,
4} from "@/components/lightswind/liquid-glass-collapsible";
5
6export function Demo() {
7  return (
8    <LiquidGlassCollapsible variant="aurora" defaultOpen>
9      <LiquidGlassCollapsibleTrigger>
10        <span>Workspace Configuration</span>
11      </LiquidGlassCollapsibleTrigger>
12      <LiquidGlassCollapsibleContent>
13        <p>Configure your liquid glass runtime settings and node parameters.</p>
14      </LiquidGlassCollapsibleContent>
15    </LiquidGlassCollapsible>
16  );
17}

Variants

Different visual and behavioral variants of the component

Aurora Crystal Variant

Violet-fuchsia crystal collapsible with spring animation.

Preview not available for this example.

Previousliquid-glass-checkbox

Nextliquid-glass-dialog

A product byＭＵＨＩＬＡＮ and Team❤️.

Liquid Glass Collapsible

How to Import

Props

Basic Usage

Variants

Aurora Crystal Variant

On This Page

Contribute

Liquid Glass Collapsible

How to Import

Props

Basic Usage

Variants

Aurora Crystal Variant

On This Page

Contribute

React Liquid Glass Collapsible Component - Lightswind UI

Key Details of React Liquid Glass Collapsible

Liquid Glass Collapsible

How to Import

Props

Basic Usage

Variants

Aurora Crystal Variant

On This Page

Contribute

Liquid Glass Collapsible

How to Import

Props

Basic Usage

Variants

Aurora Crystal Variant

On This Page

Contribute