@ankarr/ui

Production-oriented React components for marketing pages, dashboards, and mobile-style shells. Built for React 18+ with optional GSAP-driven motion where noted.

Requirements

| Dependency | Version | |-------------|---------| | react | ≥ 18 | | react-dom | ≥ 18 | | gsap | ≥ 3 | | ogl | ≥ 1 |

Installation

npm install @ankarr/ui

Application setup

1. Install peer dependencies in the consuming app.
2. Import the stylesheet once (typically in your app entry):

import '@ankarr/ui/style.css';

3. Import components from the package root:

import { PanelCard, GleamButton, Kicker } from '@ankarr/ui';

Conventions

• className — Optional on most components; appended to internal layout classes.
• Controlled vs uncontrolled — Several inputs support either value + onChange or defaultValue / defaultChecked (see each section).
• Motion — Components that animate may rely on gsap and, where documented, ScrollTrigger (registered inside those components).

Table of contents

• Text
• Buttons
• Cards
• Layout
• Navigation
• Feedback / status
• Forms
• Data / charts
• General / utility
• Mobile

Text

Animated and decorative typography. Use for heroes, metrics, and section accents.

RollCount

Animated number that counts up to value. Optional scroll-triggered start.

<RollCount value={128400} prefix="$" suffix="+" decimals={0} duration={1.6} scrollTrigger />

Key props: value, duration, prefix, suffix, decimals, scrollTrigger, className.

UnmaskText

Word-by-word reveal on scroll.

<UnmaskText text="Ship faster with confidence." delay={0.1} />

Key props: text, delay, className.

PrismText

Gradient-filled inline text; pass copy as children.

<PrismText from="#e2e8f0" to="#94a3b8">Enterprise-ready UI</PrismText>

Key props: children, from, to, className.

PrintText

Typewriter rotation across a list of strings.

<PrintText words={['Build', 'Ship', 'Scale']} typingSpeed={65} pauseMs={1600} cursor />

Key props: words, typingSpeed, deletingSpeed, pauseMs, cursor, className.

CipherText

Scramble-to-resolve effect; trigger is mount or hover.

<CipherText text="Encrypted at rest" trigger="mount" speed={40} />

Key props: text, trigger, speed, className.

CycleText

Cross-fades through words on an interval; container width follows the widest word.

<CycleText words={['Fast', 'Reliable', 'Global']} interval={2500} />

Key props: words, interval, className.

FocusText

Letters blur in sequentially (mount or scroll-driven).

<FocusText text="Clarity by default" trigger="mount" delay={30} />

Key props: text, trigger, delay, className.

SurgText

Per-letter vertical wave motion.

<SurgText text="Waveform" amplitude={5} speed={1.2} />

Key props: text, amplitude, speed, className.

SliceText

Chars or words rise in from below (by: chars | words).

<SliceText text="Slice reveal" by="words" stagger={0.05} />

Key props: text, by, delay, stagger, className.

ArcText

Circular path text (decorative).

<ArcText text="SCROLL · EXPLORE · BUILD ·" radius={60} speed="12s" fontSize={11} />

Key props: text, radius, speed, fontSize, className.

EchoText

Striped “echo” fill on glyph shadows; children must be a string.

<EchoText shadowOffset={{ x: 5, y: 7 }} lineSpacing={4} speed={1.8}>
  Infrastructure you can see
</EchoText>

Key props: children (string), shadowColor, lineSpacing, lineWidth, shadowOffset, speed, className.

DriftText

Large label that drifts horizontally with scroll.

<DriftText speed={0.25} direction="left">
  Platform
</DriftText>

Key props: children (string), speed, direction, className.

Buttons

Primary interactions; each fires onClick where applicable.

GleamButton

Filled CTA with hover gleam.

<GleamButton onClick={() => {}}>Continue</GleamButton>

Key props: children, onClick, className.

StrokeButton

Outlined button.

<StrokeButton onClick={() => {}}>Documentation</StrokeButton>

Key props: children, onClick, className.

PullButton

Magnetic / pull-style interaction; strength tunes displacement.

<PullButton strength={0.35} onClick={() => {}}>Deploy</PullButton>

Key props: children, onClick, strength, className.

SplashButton

Ripple from click position. variant: primary | outline.

<SplashButton variant="primary" onClick={() => {}}>Get started</SplashButton>

Key props: children, onClick, variant, className.

ClipEntry

Monospace command row with copy-to-clipboard.

<ClipEntry command="npm install @ankarr/ui" />

Key props: command, className.

Cards

Content surfaces for pricing, metrics, and media.

PanelCard

Grid-friendly panel; colSpan / rowSpan for CSS grid layouts.

<PanelCard colSpan={1} rowSpan={1}>
  <p>Content</p>
</PanelCard>

Key props: children, colSpan, rowSpan, className.

KpiCard

Metric card using RollCount internally.

<KpiCard label="MRR" value={84200} prefix="$" delta="+12.4% MoM" deltaPositive />

Key props: label, value, prefix, suffix, decimals, delta, deltaPositive, className.

PrismCard

Subtle top-edge accent; hover border brightens.

<PrismCard accentColor="rgba(99,102,241,0.15)">Feature highlight</PrismCard>

Key props: children, accentColor, className.

FrostCard

Frosted glass container; blur and border configurable.

<FrostCard blur={12} border>
  <p>Glass surface</p>
</FrostCard>

Key props: children, blur, border, className.

LitCard

Cursor-following spotlight within the card.

<LitCard spotlightColor="rgba(255,255,255,0.06)">Hover for light</LitCard>

Key props: children, spotlightColor, className.

LeanCard

3D tilt on pointer move.

<LeanCard maxTilt={12} scale={1.02}>Interactive card</LeanCard>

Key props: children, maxTilt, scale, className.

EdgeCard

Icon + title + description block.

<EdgeCard icon={<Icon name="zap" />} title="Edge delivery" description="Global PoPs." />

Key props: icon, title, description, iconColor, className.

RichCard

Media-forward card with optional meta.

<RichCard
  image="/cover.jpg"
  tag="Product"
  title="Launch week"
  description="What shipped."
  href="/blog/launch"
  date="Mar 2025"
/>

Key props: image, tag, title, description, href, date, className.

PlanCard

Pricing-style column: name, price, feature list, CTA label.

<PlanCard
  name="Pro"
  price="$49"
  period="/mo"
  features={['SSO', 'Audit logs']}
  cta="Subscribe"
  featured
/>

Key props: name, price, period, description, features, cta, featured, className.

VoiceCard

Quote / testimonial with avatar or initials.

<VoiceCard quote="Solid SLA." name="Alex Kim" role="CTO" company="Acme" initials="AK" />

Key props: quote, name, role, company, avatar, initials, className.

NoteBox

Callout with semantic type: info | warning | danger | success | tip.

<NoteBox type="warning" title="Deprecation">
  This API version sunsets Q4.
</NoteBox>

Key props: type, title, children.

Layout

Sections, frames, grids, and decorative backplates.

LeadSection

Hero block with optional eyebrow, heading (ReactNode), subtext, and CTA list.

<LeadSection
  eyebrow="Platform"
  heading={<>Ship in days</>}
  subtext="Composable UI for product teams."
  cta={[{ label: 'Start', href: '/signup', variant: 'primary' }]}
  align="center"
/>

Key props: eyebrow, heading, subtext, cta, align.

ScreenFrame

Browser-style chrome around content.

<ScreenFrame url="app.example.com">
  <div className="p-4">Screenshot area</div>
</ScreenFrame>

Key props: children, url, className.

RatioBox

Aspect-ratio wrapper (ratio like "16/9").

<RatioBox ratio="16/9">
  <img src="/hero.jpg" alt="" className="w-full h-full object-cover" />
</RatioBox>

Key props: children, ratio, className.

BrickGrid

Responsive column grid for children.

<BrickGrid columns={3} gap={16}>
  <div>A</div>
  <div>B</div>
</BrickGrid>

Key props: children, columns, gap, className.

RuleGrid

Full-bleed ruled background pattern.

<RuleGrid lineColor="rgba(255,255,255,0.04)" gap={80} />

Key props: lineColor, gap, className.

DotMatrix

Dot grid background (absolute inset positioning typical).

<DotMatrix dotColor="rgba(255,255,255,0.12)" dotSize={1.5} gap={24} />

Key props: dotColor, dotSize, gap, opacity, className.

EntrySection

Scroll-triggered entrance animation wrapper for children.

<EntrySection entrance="fade-up" duration={0.6} delay={0}>
  <section>Content</section>
</EntrySection>

Key props: children, entrance, duration, delay, className.

NodeMap

Mini node graph: nodes (id, label, x, y as 0–100, optional status) and edges (from, to).

<NodeMap
  width={320}
  height={180}
  nodes={[
    { id: 'a', label: 'API', x: 20, y: 50, status: 'active' },
    { id: 'b', label: 'DB', x: 80, y: 50 },
  ]}
  edges={[{ from: 'a', to: 'b' }]}
/>

Key props: nodes, edges, width, height, className.

PathTrace

SVG path with animated beam. path is an SVG d string.

<PathTrace path="M 10 50 Q 100 10 190 50" width={200} height={100} duration={2.5} />

Key props: path, width, height, color, beamColor, strokeWidth, duration, className.

SpringLine

Interactive curved divider that bends toward the cursor.

<SpringLine color="rgba(255,255,255,0.15)" />

Key props: color, className.

TracerBorder

Rotating conic border around children.

<TracerBorder accentColor="rgba(255,255,255,0.5)" borderRadius="12px" borderWidth={1} speed={3}>
  <div className="p-4">Highlights</div>
</TracerBorder>

Key props: children, accentColor, borderRadius, borderWidth, speed, className.

DriftRail

Horizontal marquee rail; duplicates children for seamless loop. Pauses on hover.

<DriftRail speed={30} gap={32} reverse={false}>
  <span className="px-4">Trusted by teams worldwide</span>
</DriftRail>

Key props: children, speed, gap, reverse, className.

CascadeList

Staggers child elements on scroll.

<CascadeList stagger={0.08} y={20} duration={0.55}>
  <div>One</div>
  <div>Two</div>
</CascadeList>

Key props: children, stagger, y, duration, className.

Navigation

PinNav

Top bar with scroll-tinted background.

<PinNav
  logo={<span className="font-semibold">Acme</span>}
  links={[{ label: 'Docs', href: '/docs' }]}
  cta={{ label: 'Dashboard', href: '/app' }}
/>

Key props: logo, links, cta.

TrailNav

Breadcrumbs.

<TrailNav items={[{ label: 'Home', href: '/' }, { label: 'Settings' }]} separator="/" />

Key props: items, separator.

PageStep

Pagination controls.

<PageStep total={240} page={1} perPage={10} onChange={(p) => {}} />

Key props: total, page, perPage, onChange.

TabRail

Labeled tabs with animated indicator; each tab supplies content.

<TabRail
  tabs={[
    { label: 'Overview', content: <p>…</p> },
    { label: 'API', content: <p>…</p> },
  ]}
/>

Key props: tabs, className.

FilterBar

Pill filter strip with sliding highlight.

<FilterBar options={['All', 'Active', 'Archived']} defaultValue="All" onChange={(v) => {}} />

Key props: options, defaultValue, onChange, className.

PopMenu

Dropdown anchored to trigger.

<PopMenu
  trigger={<button type="button">Menu</button>}
  items={[
    { label: 'Edit', onClick: () => {} },
    { label: 'Delete', danger: true, onClick: () => {} },
  ]}
/>

Key props: trigger, items (label, icon, onClick, danger, divider).

CommandBar

Command palette overlay.

<CommandBar
  open={paletteOpen}
  onClose={() => setPaletteOpen(false)}
  items={[
    { group: 'Actions', label: 'Go to billing', onSelect: () => {}, shortcut: 'G B' },
  ]}
/>

Key props: open, onClose, items (group, label, description, icon, shortcut, onSelect).

ScrollTrack

Thin decorative scroll track line.

<ScrollTrack color="rgba(255,255,255,0.8)" height={1} />

Key props: color, height, className.

Feedback / status

Nudge

Toast stack host. Render once near the application root (e.g. layout shell). The package entry exports this provider as Nudge; wire notifications from your application layer as needed.

<Nudge />

Ribbon

Inline dismissible banner. type: info | warning | success | error.

<Ribbon type="success" dismissible onDismiss={() => {}}>
  Deployment complete.
</Ribbon>

Key props: type, children, dismissible, onDismiss.

Pip

Small status badge.

<Pip variant="success" size="md">Live</Pip>

Key props: children, variant, size.

StatePill

Operational status pill. status: operational | degraded | outage | maintenance.

<StatePill status="operational" />

Key props: status, className.

PendingDots

Loading dots.

<PendingDots size="md" />

Key props: size, color.

FillBar

Labeled progress bar (0–100) with scroll-triggered fill animation.

<FillBar value={72} label="Uptime" showValue color="rgba(255,255,255,0.85)" />

Key props: value, label, showValue, color, className.

BlankSlate

Empty state with optional CTA.

<BlankSlate
  icon={<Icon name="inbox" />}
  title="No messages"
  description="You are all caught up."
  cta={{ label: 'Refresh', onClick: () => {} }}
/>

Key props: icon, title, description, cta.

Ghost

Skeleton placeholder; use lines for stacked bars or width / height for a single block.

<Ghost lines={3} />
<Ghost width={120} height={16} rounded="md" />

Key props: width, height, rounded, lines, className.

Dialog

Modal dialog. size: sm | md | lg.

<Dialog open={open} onClose={() => setOpen(false)} title="Confirm" size="md">
  <p>Proceed?</p>
</Dialog>

Key props: open, onClose, title, children, size.

Forms

Field

Text input with optional label, prefix / suffix, error. onChange receives the string value (standard input attributes pass through except overridden handlers).

<Field label="Email" placeholder="[email protected]" onChange={(v) => {}} error={err} />

Key props: label, error, prefix, suffix, onChange, plus InputHTMLAttributes.

Multiline

Textarea with optional label, error, maxLength, string onChange.

<Multiline label="Notes" rows={4} maxLength={500} onChange={(v) => {}} />

Key props: label, error, rows, maxLength, onChange, plus TextareaHTMLAttributes.

Picker

Custom select; controlled or uncontrolled.

<Picker
  label="Region"
  options={[
    { value: 'us', label: 'United States' },
    { value: 'eu', label: 'Europe' },
  ]}
  onChange={(v) => {}}
  placeholder="Select…"
/>

Key props: label, options, value, defaultValue, onChange, placeholder, disabled.

Check

Animated checkbox; controlled or uncontrolled.

<Check label="I agree" checked={agree} onChange={setAgree} />

Key props: label, checked, defaultChecked, onChange, disabled.

ChoiceSet

Radio group.

<ChoiceSet
  options={[
    { value: 'a', label: 'Monthly' },
    { value: 'b', label: 'Annual' },
  ]}
  value={plan}
  onChange={setPlan}
/>

Key props: options, value, defaultValue, onChange, name.

Toggle

Switch with optional label.

<Toggle defaultOn={false} onChange={(on) => {}} label="Dark mode" />

Key props: defaultOn, onChange, label, className.

Range

Slider; optional ticks count and showValue.

<Range min={0} max={100} value={volume} onChange={setVolume} label="Volume" showValue />

Key props: min, max, value, defaultValue, onChange, label, showValue, ticks.

CodeInput

OTP-style boxes; onComplete fires when all cells filled.

<CodeInput length={6} onChange={(code) => {}} onComplete={(code) => {}} />

Key props: length, onChange, onComplete, className.

SegmentBar

Controlled segmented control (string value).

<SegmentBar options={['Day', 'Week', 'Month']} value={range} onChange={setRange} />

Key props: options, value, onChange, className.

RateRow

Star rating; interactive unless readOnly.

<RateRow value={rating} max={5} onChange={setRating} size={20} />

Key props: value, max, onChange, readOnly, size.

Data / charts

TrendLine

Sparkline from data: number[].

<TrendLine data={[2, 5, 3, 8, 6, 9]} width={120} height={40} />

Key props: data, width, height, color, strokeWidth, className.

RingFill

Radial bar segments showing 0–100.

<RingFill value={78} size={96} label="CPU" />

Key props: value, size, color, label, className.

RingChart

Donut chart; label can be ReactNode.

<RingChart value={64} size={120} strokeWidth={10} label={<span>64%</span>} />

Key props: value, size, strokeWidth, color, trackColor, label.

StatRow

Row of metrics with optional change strings.

<StatRow
  metrics={[
    { label: 'Requests', value: '1.2M', change: '+8%', changeType: 'up' },
    { label: 'p99', value: '42ms', changeType: 'neutral' },
  ]}
/>

Key props: metrics, className.

CompareGrid

Feature comparison matrix. plans[].values aligns with features order.

<CompareGrid
  features={[{ name: 'SSO' }, { name: 'Audit logs', description: 'Exportable' }]}
  plans={[
    { name: 'Team', values: [true, false] },
    { name: 'Enterprise', highlight: true, values: [true, true] },
  ]}
/>

Key props: features, plans.

DataTable

Declarative table: columns define keys; each row is a record of ReactNode cells.

<DataTable
  columns={[
    { key: 'name', label: 'Name' },
    { key: 'role', label: 'Role', width: '30%' },
  ]}
  rows={[{ name: 'Ada', role: 'Admin' }]}
  striped
/>

Key props: columns, rows, striped.

General / utility

FoldGroup

Accordion list.

<FoldGroup
  items={[
    { title: 'Billing', content: <p>…</p> },
    { title: 'Security', content: <p>…</p> },
  ]}
/>

Key props: items, className.

Fold

Single collapsible: trigger + children.

<Fold trigger={<span>Details</span>} defaultOpen={false}>
  <p>Expanded content</p>
</Fold>

Key props: trigger, children, defaultOpen.

Hint

Tooltip on hover/focus. placement: top | bottom.

<Hint content="Shortcut: ⌘K" placement="top">
  <button type="button">Search</button>
</Hint>

Key props: content, children, placement, className.

Rule

Horizontal rule; with label, renders centered caption.

<Rule label="Or" />
<Rule />

Key props: label, className.

Kicker

Eyebrow / kicker row. orientation: horizontal | vertical.

<Kicker orientation="horizontal">What’s new</Kicker>

Key props: children, orientation, className.

KickerTag

Pill kicker tag.

<KickerTag>Beta</KickerTag>

Key props: children, className.

Tag

Semantic tag variants: default | new | beta | deprecated.

<Tag variant="new">New</Tag>

Key props: children, variant, className.

FloatChip

Fixed top-centered nav chip with logo, links, and optional CTA slot.

<FloatChip logo={<span>Acme</span>} links={[{ label: 'Docs', href: '/docs' }]} cta={<a href="/login">Log in</a>} />

Key props: logo, links, cta.

Marker

Highlighter stroke animates on scroll behind children.

<Marker color="rgba(251,191,36,0.55)" delay={0}>
  <span className="relative z-10">Highlighted headline</span>
</Marker>

Key props: children, color, delay, className.

KeyCombo

Keyboard chord display.

<KeyCombo keys={['⌘', 'K']} />

Key props: keys, className.

Token

Selectable chip; optional onRemove, icon, selected.

<Token selected onClick={() => {}} onRemove={() => {}}>
  typescript
</Token>

Key props: children, selected, onClick, onRemove, icon, disabled.

CodePane

Syntax-highlighted code block (light tokenizer; not a full IDE).

<CodePane code={`const x = 1`} language="tsx" filename="app.tsx" />

Key props: code, language, filename, className.

ConsolePane

Terminal-style staged line reveal. lines: { prompt?, text, delay? }[].

<ConsolePane
  title="Terminal"
  lines={[
    { prompt: '$', text: 'npm run build', delay: 0 },
    { text: 'Done in 2.1s', delay: 600 },
  ]}
/>

Key props: lines, title, className.

BrandGrid

Logo cloud. Each item is name plus optional svg node.

<BrandGrid
  logos={[
    { name: 'Acme' },
    { name: 'Globex', svg: <img src="/globex.svg" alt="" className="h-6" /> },
  ]}
  animate
/>

Key props: logos (name, svg?), animate.

FaceStack

Overlapping avatars; count shows +N.

<FaceStack
  avatars={[
    { src: '/1.jpg' },
    { initials: 'SK', color: '#3f3f46' },
  ]}
  count={12}
  size={32}
/>

Key props: avatars (src?, initials?, color?), count, size, className.

Avi

Avatar image or fallback initial; optional status dot.

<Avi src="/u.png" name="Sam Lee" size={32} status="active" />

Key props: src, name, size, status.

Icon

Typed inline SVG icon. name is a key from the library’s icon map; optional animation.

<Icon name="check" size={16} strokeWidth={1.5} color="currentColor" animation="none" />

Key props: name, size, strokeWidth, className, color, animation.

StepTrack

Wizard / pipeline steps. steps: { label, status } with status done | active | pending.

<StepTrack
  orientation="horizontal"
  steps={[
    { label: 'Auth', status: 'done' },
    { label: 'Billing', status: 'active' },
    { label: 'Go live', status: 'pending' },
  ]}
/>

Key props: steps, orientation, className.

Countdown

Countdown to targetDate (Date or ISO string).

<Countdown targetDate={new Date('2026-12-31T00:00:00Z')} onComplete={() => {}} />

Key props: targetDate, onComplete.

VideoPane

Responsive video frame. aspectRatio default "16/9".

<VideoPane src="https://example.com/video.mp4" poster="/poster.jpg" title="Walkthrough" />

Key props: src, poster, title, aspectRatio.

ReleaseEntry

Changelog row.

<ReleaseEntry version="2.4.0" date="2025-03-01" title="API improvements" tags={['api']} description="…">
  <ul><li>…</li></ul>
</ReleaseEntry>

Key props: version, date, title, description, tags, children.

InboxItem

Notification list row.

<InboxItem
  avatar={<Avi name="Bot" size={28} />}
  title="Deploy finished"
  description="production"
  time="2m"
  unread
  onClick={() => {}}
/>

Key props: avatar, title, description, time, unread, onClick.

EventNode

Vertical timeline.

<EventNode
  events={[
    { date: 'Mon', title: 'Kickoff', description: 'Scope', tag: 'Milestone', active: true },
  ]}
/>

Key props: events, className.

FeatureList

Checklist with scroll-in animation.

<FeatureList items={['SOC 2', 'SSO', 'SLA']} checkColor="#4ade80" />

Key props: items, checkColor, className.

SiteFooter

Multi-column footer.

<SiteFooter
  logo={<span>Acme</span>}
  tagline="Infrastructure for teams"
  columns={[{ heading: 'Product', links: [{ label: 'Pricing', href: '/pricing' }] }]}
  socials={[{ label: 'X', href: 'https://x.com/acme', icon: <Icon name="external-link" /> }]}
  company="Acme Inc."
/>

Key props: logo, tagline, columns, socials, copyright, company, className.

Mobile

Touch-oriented patterns and compact chrome.

BottomNav

Fixed bottom tabs with animated indicator.

<BottomNav
  tabs={[
    { label: 'Home', icon: <Icon name="menu" /> },
    { label: 'Inbox', icon: <Icon name="bell" />, badge: 3 },
  ]}
  active={0}
  onChange={setActive}
/>

Key props: tabs, active, onChange.

SlideSheet

Bottom sheet overlay.

<SlideSheet open={sheet} onClose={() => setSheet(false)} title="Options">
  <p>Content</p>
</SlideSheet>

Key props: open, onClose, children, title.

SideSheet

Side drawer (left | right).

<SideSheet open={drawer} onClose={() => setDrawer(false)} side="right" width={300}>
  <nav>…</nav>
</SideSheet>

Key props: open, onClose, children, side, width.

ChoiceSheet

Action sheet with destructive styling support.

<ChoiceSheet
  open={confirm}
  onClose={() => setConfirm(false)}
  title="Delete project?"
  message="This cannot be undone."
  actions={[
    { label: 'Delete', destructive: true, onClick: () => {} },
  ]}
  cancelLabel="Cancel"
/>

Key props: open, onClose, title, message, actions, cancelLabel.

FlickCard

Swipeable card; threshold in px.

<FlickCard onSwipeLeft={() => {}} onSwipeRight={() => {}} threshold={100}>
  <div className="p-6">Swipe me</div>
</FlickCard>

Key props: children, onSwipeLeft, onSwipeRight, threshold.

SwipeTabs

Tabs with swipeable content track.

<SwipeTabs
  defaultIndex={0}
  tabs={[
    { label: 'Feed', content: <div /> },
    { label: 'Profile', content: <div /> },
  ]}
/>

Key props: tabs, defaultIndex.

AppBar

Mobile header: title, optional back handler, right slot.

<AppBar title="Account" onBack={() => history.back()} rightAction={<button type="button">Edit</button>} />

Key props: title, onBack, rightAction, transparent.

PullRefresh

Wraps scrollable content; onRefresh must return a Promise.

<PullRefresh onRefresh={async () => { await refetch(); }}>
  <div className="min-h-[120vh]">Long content</div>
</PullRefresh>

Key props: onRefresh, children, className.

Build (package maintainers)

npm run build

Artifacts are emitted to dist/.

License

See LICENSE in the published package.