UI components | Trending Society

@bash

The account block at the foot of an app rail: avatar, name and role, opening upward into a frosted menu with the email, a highlight that slides between rows, icons that gesture as it lands, and a red Log out.

Navigation3 packages

AI cost card

@bash

A spend card for estimated AI cost: the window's total with its change on the prior stretch, a 7D–ALL window switch, the split by kind of work as horizontal sticks with a figure legend, and one stacked-stick column per date that fills up bottom to top.

Account menu

@bash

Navigation3 packages

AI cost card

@bash

App store badge

@bash

A two-line App Store or Google Play badge in the theme's ink: the store's glyph, a small lead-in and the store's name, solid or outlined.

Data display

Arrow button

@bash

A pill whose small dot blooms to fill it on hover while the label slides out and returns beside an up-right arrow in inverted colours, without the pill changing width.

Buttons and actions2 packages

Breakdown dial

@bash

A card with a 270° dial of 42 ticks split between a few groups, the total in its centre, and a row per group with its count and share; hovering a group isolates its ticks.

Other2 packages

Checkbox

@bash

An animated checkbox: the box springs on hover and press, fills with the lead colour, and the tick draws itself in.

Forms3 packages

Count tabs

@bash

An underlined tab row where each tab carries a count chip, the open tab in the lead colour with a 2px underline on the row's rule and its chip on the lead wash.

Navigation

CTA button

@bash

A glass label pill and an accent disc touching at one point; on hover the pair lifts, the disc swallows its ring, the accent washes across the label and the arrow loops through the disc.

Buttons and actions1 package

Date range calendar

@bash

A Monday-first range calendar that previews the span under the cursor, greys out days outside its bounds and jumps by month or typed year; plus a period dropdown whose "Custom range" step widens the same popover into the calendar.

Data display2 packages

Delete button

@bash

A two-step delete (Delete, then Confirm with an X to back out) that ends in a Thanos snap: the button tears into dust through an SVG displacement filter. Ships with ThanosSnapEffect, a wrapper that snaps anything else the same way.

Buttons and actions2 packages

Dissolve input

@bash

Ledge’s underlined login input, whose text dissolves into particles from right to left with a visible action button, on Enter or after a confirmed action.

Forms2 packages

Doodle portrait

@bash

A portrait framed by the original animated doodle in the top left and its rotated copy in the bottom right.

Motion and effects1 package

Expanding menu

@bash

Ledge’s frosted navigation pill expands into a staggered link panel; the plus becomes a minus.

Navigation1 package

Feedback card

@bash

A non-blocking card that floats at the bottom right and asks for a 1–5 rating on a morphing face, with an optional comment, then thanks the person and leaves.

Layout2 packages

Gooey input

@bash

A pill text field whose submit button is a droplet of the same liquid: on focus it pulls away from the capsule through a gooey SVG bridge and lands beside it with its icon.

Forms2 packages

Gooey tabs

@bash

A floating segmented pill of equal-width tabs whose solid marker slides to the picked tab while a liquid silhouette chases it on a spring, stretching and trailing a droplet tail.

Navigation2 packages

Inbox button

@bash

A shortcut button to an inbox whose tray glyph dips and redraws on hover or focus, with a slim four-colour provider rail along its bottom edge and an optional unread count.

Buttons and actions1 package

Info tooltip

@bash

An (i) icon that springs open an inverted tooltip with an optional title and footer; opens on tap on a phone.

Overlays3 packages

Key login button

@bash

Ledge’s green pill login button with a rotating key and rolling label on hover or keyboard focus.

Forms1 package

Link preview

@bash

A text trigger reveals a screenshot of the destination webpage on hover, keyboard focus or tap. The screenshot fills the card; its address rises in on a frosted chip once the pointer is on it.

Other3 packages

Loading button

@bash

A compact solid button for one async job: its icon spins and its label swaps while the work runs, then a short go or stop status line says how it went.

Feedback2 packages

Lock toggle

@bash

A Material Design 3 switch in the theme's tokens whose knob carries a lock when on and an open lock when off, with M3's spring slide, growing knob, rotating icon and pointer halo.

Forms3 packages

Metric card

@bash

A headline metric card with a smooth line (or bar) chart washed into its right side, a trend badge coloured by direction, a line/bar toggle, and a period dropdown with an optional custom-range calendar.

Data display1 registry dep · 2 packages

Notification toggle

@bash

Steeze's SMS notification switch: a pale knob on a grey track when off, a charcoal knob on lilac when on, adapted from React Native to a keyboard-accessible web control.

Feedback1 package

The Signal