Skip to content
LofiStack Gallery

90 Day Build Challenge · Week 04 live

Components that feel alive.

A growing library of reusable, accessible React + Tailwind components built for the LofiStack 90 Day Build Challenge. Two new pieces every week, each with a live playground, every UI state and copy-ready code.

Explore componentsView source
Components
8/30
Types covered
8/10
Week
4/13
13-week roadmap8 shipped · 2 per week · target 30
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13

The library

All components

Filter by type to see what's covered.

  • loaderWeek 01

    Orbit Loader

    Concentric orbiting arcs that switch to a determinate progress ring when you pass a value.

  • inputWeek 01

    Signal Input

    A text field with a live signal bar that sweeps while validating and fills green or red with the result.

  • buttonWeek 02

    Hold-to-Confirm Button

    A button for risky actions: press and hold while it fills, and only a completed hold runs the action.

  • chartWeek 02

    Morphing Area Chart

    A glowing analytics area chart that morphs smoothly between 7D, 30D and 90D, with a hover crosshair.

  • modalWeek 03

    Command Palette

    A ⌘K / Ctrl+K launcher with fuzzy search, highlighted matches, groups, shortcuts and full keyboard control.

  • cardWeek 03

    Receipt Card

    A paper receipt that prints out of a slot, with a torn zig-zag edge, totals, a barcode and a status stamp.

  • navbarWeek 04

    Dynamic Island Nav

    A floating pill navbar that morphs like the iPhone Dynamic Island for menus, search and live notifications.

  • formWeek 04

    Conversational Form

    A form that feels like a chat: one question at a time, typing dots, validation, going back, and a review before sending.