# Glass Sheet Edge

Glass card with a glowing top edge that you pull by its handle. Pull far enough and it can open into a detail view or tuck down out of the way; let go early and it slides back.

> Composed · Pro · Signature — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/glass-sheet-edge
```

## Import

```tsx
import { GlassSheetEdge } from "@/components/ui/glass-sheet-edge/glass-sheet-edge";
```

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `travel?` | `number` | Max travel in pt before the rubber-band dominates. Default 140. |
| `onRelease?` | `(dragged: number) => void` | — |
| `detail?` | `React.ReactNode` | Revealed below the content when the card is pulled up past its limit. |
| `peek?` | `React.ReactNode` | Shown alone when the card is pulled down past its limit and docks. |
| `state?` | `GlassSheetEdgeState` | Controlled state. |
| `defaultState?` | `GlassSheetEdgeState` | Uncontrolled initial state. Default "rest". |
| `onStateChange?` | `(state: GlassSheetEdgeState) => void` | — |
| `className?` | `string` | — |
| `children?` | `React.ReactNode` | — |

Source: https://lumioui.com/components/glass-sheet-edge