Skip to content

LedgerLeaf Finance

showcase/ledgerleaf_finance.py is a finance-oriented product reference in Faststrap.

It demonstrates mobile-aware navigation, data summaries, and denser operational cards in a financial context.

LedgerLeaf Finance in light mode

LedgerLeaf Finance in dark mode

What It Shows

  • BottomNav + BottomNavItem for slick mobile-first navigation
  • Sheet (bottom drawer) for transaction entry with full form coverage
  • Progress + ProgressBar for animated budget tracking
  • Tabs (pill variant) for Activity / Budgets / Analytics switching
  • KPICard for at-a-glance financial metrics
  • FilterBar for budget category filtering
  • SearchableSelect for payee / recipient search
  • Dropdown + DropdownItem for card action menus
  • Switch for notification/biometric preference toggles
  • ThemeToggle with cookie persistence on every page
  • ButtonToolbar for quick-action groups
  • custom CSS: cinematic entrance animations, spring micro-interactions, warm sage/slate financial aesthetic — light-first, dark-aware

Why It Matters

LedgerLeaf Finance is useful for teams evaluating whether Faststrap can support:

  • personal finance and fintech dashboards
  • mobile-first transactional UI
  • budget and account management interfaces
  • dense operational card patterns

Source

  • showcase/ledgerleaf_finance.py