We've added a new Account overview demo to Flux. It's a banking dashboard with an account balance, searchable transactions, a cash flow chart, and upcoming payments.

There are some nice details in the transaction list: merchant logos, category labels, pending badges, and green amounts for money coming in. The dark balance card gives the page a clear starting point, with the rest of the account details underneath.

You can search the transactions, hover the chart, and try the layout in light or dark mode. It adapts to smaller screens too.

To use it as a starting point, open Account overview on the demos page, switch to Code, and copy the source.

Flux headings now have a 2xl size:

<flux:heading size="2xl">$8,432.10</flux:heading>

We keep Flux's typography options deliberately limited. Too many competing sizes are a fast way to make a design feel inconsistent.

But we've needed a larger heading often enough to make room for one. The balance in our new Account overview demo is a good example: one number that needs to stand out.

Flux's searchable select now supports extra search terms with the keywords prop. Add it to an option to make that option easier to find without changing its label:

<flux:select.option value="fruit" keywords="apple orange pear">    Fruit</flux:select.option>

Now searching for “apple” finds “Fruit”, and “coffee” finds “Drinks”. The labels are still searchable too.

It's useful for abbreviations, alternate names, or related terms your users might reach for. Keywords work with the built-in filtering in searchable listboxes and comboboxes, using the same case-insensitive and accent-insensitive matching as labels.