Loading page…
Loading page…
Two edge-anchored surfaces. Drawer slides in from left or right for navigation and secondary panels on wide screens — nest AnimatedSidebarMenuLink for destinations so they stay real links. BottomSheet rises from the bottom on touch — drag between snap points, fling down to dismiss. Both scrim and blur the content behind them.
Drawer is position:fixed without a portal, so these specimens capture the genuinely open drawer inside a transformed box (the transform makes the box its containing block). In product it spans the full viewport edge. Navigation inside the drawer uses AnimatedSidebarMenuLink — real anchors, not Buttons.
dismissable={false} — backdrop clicks ignored; ceremonies exit only through an explicit action.
Escape or backdrop click dismisses.
import {
AnimatedSidebarMenu,
AnimatedSidebarMenuItem,
AnimatedSidebarMenuLink,
AnimatedSidebarProvider,
Drawer,
} from "@coldharbor/webui";
<Drawer open={menuOpen} onOpenChange={setMenuOpen} side="right" ariaLabel="Wallet menu">
<AnimatedSidebarProvider>
<AnimatedSidebarMenu>
<AnimatedSidebarMenuItem>
<AnimatedSidebarMenuLink href="/portfolio" isActive>
Portfolio
</AnimatedSidebarMenuLink>
</AnimatedSidebarMenuItem>
</AnimatedSidebarMenu>
</AnimatedSidebarProvider>
</Drawer>--ch-bg--ch-surface--ch-border--ch-fg--ch-fg-muted--ch-overlay--ch-primaryThe sheet portals to <body> unconditionally (fixed positioning must escape transformed ancestors on mobile), so the open state is a static replica with the exact surface, grab handle and header; the live specimen opens the real sheet.
Higher rates confirm sooner. You can bump later with RBF.
Replica — the real sheet cannot render inline.
Opens over the page (portalled). Snap points 50% and 92% of the viewport; drag the handle or fling down to dismiss.
Drag the handle up to the 92% snap; fling down to dismiss.
import { BottomSheet } from "@coldharbor/webui";
<BottomSheet
open={feeSheetOpen}
onOpenChange={setFeeSheetOpen}
title="Fee options"
description="Higher rates confirm sooner. You can bump later with RBF."
snapPoints={[0.5, 0.92]}
>
<FeeOptions />
</BottomSheet>--ch-bg--ch-surface--ch-border--ch-fg--ch-fg-muted--ch-overlay--ch-primaryThe open sheet replica under all three layers.
Higher rates confirm sooner. You can bump later with RBF.
--ch-bg--ch-surface--ch-border--ch-fg--ch-fg-muted--ch-overlay--ch-primary