remold/ui

Filter bar

Filtering card transactions, the way banking and spending apps do it: picking a filter adds a segmented token to the bar, and the transactions, the count and the total spent move to match.

MotionBase UI

payments·

  • AppleOct 28 · Visa ·4242−$129.00
  • SpotifyOct 28 · Mastercard ·5100−$10.99
  • UberOct 27 · Visa ·4242−$18.40
  • AmazonOct 27 · Mastercard ·5100−$64.20
  • StarbucksOct 26 · Amex ·1009−$6.75
  • NetflixOct 24 · Visa ·4242−$15.49

Things to try

  • Open Filter. A menu of fields opens, each with its values in a submenu. Picking one adds a segmented token to the bar.
  • Change a token's value. Click it and the new value rolls into place.
  • Remove a token with its ×. The bar closes the gap.
  • Watch the list. The transactions slide into their new places, and both the count and the total spent roll to their new figures.

Install

npx shadcn@latest add https://your-docs-site/r/filter-bar.json

Dependencies

The install command adds these for you. If you copy the code by hand, install them yourself.

npm install @base-ui/react @hugeicons/core-free-icons @hugeicons/react @remold-ui/react motion

How it works

  • The menu and its submenus are Base UI's Menu, so keyboard navigation between fields and values works out of the box.
  • The tokens, the reordering rows and the rolling figures are Motion.
The spending is made up. The merchants' marks are from Simple Icons.

Currency converter

A converter at today's real exchange rates: type what you send and what they get rolls with it, tap a currency and the whole card springs into a searchable list, and Send says what it did.

Popover menu

A compact photo-actions menu that grows out of its trigger, with Base UI handling all of the popover behavior.

On this page

Things to tryInstallDependenciesHow it works