Valerie UI

Neobrutalist UI Concept with components, interactions, and styles.

Buttons with Icons & Spinner

Swipable List Items

(Swipe interaction requires JavaScript - structure provided)

Shared Tasks

  • Wash Dishes
    JD
    Chores
  • Pay Rent
    AP
    Due Soon
    Bills
  • Grocery Shopping
    JS
    Completed

Forms with Toggle

Project Details

Tables

Recent Expenses

Date Description Category Amount User Status
2024-03-10 Team Lunch at Pasta Place Food $85.50 JD Jane D. Pending
2024-03-08 Software Subscription Renewal (SaaS) Software $49.00 AP Alex P. Settled
2024-03-05 Office Supplies - Pens, Paper, Sticky Notes, etc. Supplies $32.15 JS John S. Settled
2024-03-02 Client Meeting Coffee Travel $15.75 JD Jane D. Pending
Total Pending: $101.25

Tabs (Fixed Borders)

Profile Information

This is where user profile details would be displayed or edited.

Empty State

No Tasks Yet!

Looks like your task list is empty. Get started by adding a new task.

Quick Split Calculator

Quick Split

Each Pays: $--.--

Progress Bar

65% Complete
100% Done!

Tooltips (Improved Z-Index)

Hover or focus on the highlighted text This provides extra information! Should appear above card content. or the button below.

Tooltips work on buttons too. Useful for explaining actions. Link trigger Tooltip on a link element.

Tooltip might still be clipped by Modal or Table Container parents due to 'overflow:hidden'.

Spinner (New Style)

Indicates loading state:

Small spinner:

Alerts (Enhanced)

A new version of the app is available.
Reminder: Budget nearing limit. Check your spending report View detailed breakdown of expenses. .