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.

Preview

TSX components/ui/glass-sheet-edge/glass-sheet-edge.tsx

Pro source · 290 lines

Part of LumioUI Pro. With Pro, the full file shows here and npx @lumioui/cli add pro/glass-sheet-edge writes it into your repo. Unlocking your Pro source… Couldn't load the source. Refresh to try again.

See Pro Log in

Upgrade to Pro

TSX example.tsx

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

export function Example() {
  return (
    <GlassSheetEdge />
  );
}

Installation

$npx @lumioui/cli add pro/glass-sheet-edge

Install the dependencies
npx expo install react-native-reanimated
Add the components it builds on
glass
Copy the source from the Code tab into your project
components/ui/glass-sheet-edge/glass-sheet-edge.tsxcomponents/ui/glass-sheet-edge/index.ts
Update the import paths to match your project setup.

Usage

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

<GlassSheetEdge />

API reference

Prop Type Default

travel number

Max travel in pt before the rubber-band dominates. Default 140.

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".

"rest"

onStateChange (state: GlassSheetEdgeState) => void —

className string —

children React.ReactNode —

Achievement BadgePro Award medallion that shows progress while locked and its tier metal once earned. Unlocking closes the ring, fills the face and pops with a glow in its colour and a haptic. Tile, row and medal layouts. Action BarPro Docked bottom bar for detail screens with a price or summary and one main action. Its optional confirm button turns into a check that shows the result in place. Solid or glass styles. Activity RingsPro One to three concentric goal rings that fill in a quick cascade and lap again past 100%. Closing a ring makes it glow brightly before settling, as a small reward. Room in the centre for a figure. Add to Cart ButtonPro Add button that becomes its own result: busy dots while adding, a check and “In bag”, then a quantity stepper with a trash icon at one. A compact version stretches open over product photos. Address CardPro Saved address card with a Home or Work label, default badge, contact details and an optional street-map tile. Picking one highlights the card and drops its pin on the map. Includes an add-new tile. Agenda ListPro Day-grouped agenda that follows the clock: past events fade back, the event in progress is highlighted as it runs, and a thin line marks the present moment and moves along with it.

Previous Glass Search Morph Next Gradient Button

On this page

Installation Usage API reference Related

Part of LumioUI Pro

Installs with a license key. Full source lands in your repo, yours to change.

Set up Pro