LofiStack 90 Day Build Challenge
LofiStack Gallery
Reusable React, TypeScript and Tailwind components by Md. Hasan Taraque. Two new components every week, each with its own page, a live preview and the full source.
14 of 30 components shipped
Components
- buttonWeek 1
Glass Button
A glassmorphism button with a curved top highlight, a light sweep on hover, any tint color, three sizes, icons and a built-in loading state.
View component - cardWeek 1
Animated Pricing Card
A pricing plan card with a staggered entrance, a count-up price when billing changes, a spinning gradient border for the featured plan, and a loading skeleton.
View component - inputWeek 2
Histogram Range Slider
A two-handle range slider with a live histogram of your data above the track, so people see how many results each move keeps before they let go.
View component - modalWeek 2
Destructive Confirm Dialog
A confirm modal for actions you can't undo: type-the-name or press-and-hold guards, a consequences list, and async confirm with loading and error states. Built on the native dialog element.
View component - chartWeek 2
Activity Heatmap
A calendar heatmap of daily activity with streak stats, quartile color levels, tooltips, arrow-key navigation and time-zone-safe dates.
View component - formWeek 3
Multi-Step Form Wizard
A multi-step form driven by a steps config: per-step validation, an error summary that links to each field, a password strength meter, a review step with Edit links, and async submit.
View component - tableWeek 3
Smart Data Table
A typed data table with search, multi-column sort, Shift-click range selection, a bulk action bar, column visibility, compact mode and pagination.
View component - loaderWeek 3
Stepped Progress Loader
A loader for long multi-stage jobs: one bar segment per stage, measured and unmeasured stages, a time-left estimate that ignores pauses, and pause, resume, cancel and retry.
View component - navbarWeek 4
Scrollspy Navbar
A sticky navbar that hides while you read down and returns on scroll up, condenses after the top, underlines the section in view, and folds into an accessible mobile menu.
View component - sectionWeek 4
Searchable FAQ Section
An FAQ section with search that highlights matches, topic filters with counts, an animated accordion, links straight to any answer, and a was-this-helpful prompt.
View component - inputWeek 4
Mention Composer
A comment box with @mention suggestions, mentions highlighted inside the text, a who-gets-notified line, a character-limit ring and Ctrl+Enter to send.
View component - buttonWeek 5
Split Button
A main action joined to a menu of related ones, with full menu keyboard support, typeahead, disabled and danger items, and a choice mode that remembers which action the button runs.
View component - cardWeek 5
Product Card
A shop product card with a swipeable gallery per color, color and size pickers with stock levels, a quantity stepper, wishlist toggle, sale badge, rating and async add to cart.
View component - chartWeek 5
Interactive Donut Chart
A donut chart whose legend toggles series on and off with animated slices, a center readout for the hovered slice, and a hidden data table so screen readers get the same numbers.
View component