Mobile App Home React block for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Mobile App Home is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import MobileAppHome from @/components/blocks/mobile-app-home.

// app/(app)/page.tsx
"use client"

import Link from "next/link"
import { useRouter } from "next/navigation"
import { MobileAppHome } from "@/components/blocks/mobile-app-home"

export default function HomePage() {
  const router = useRouter()
  return (
    <MobileAppHome
      linkComponent={Link}
      subtitle="Hi, Emma"
      notificationsCount={3}
      messagesCount={2}
      onSearch={(query) => router.push(`/search?q=${encodeURIComponent(query)}`)}
      onRefresh={() => router.refresh()}
    />
  )
}

Props

• titledefault "Home"
  ReactNode

  The large title; it shrinks into the bar as you scroll.

• subtitledefault "Hi, Emma"
  ReactNode

  The line under the large title.

• stories
  AppStory[]

  Story circles { id, label, image?, icon?, seen?, href?, description?, ring?, listings? }; [] hides the rail. Defaults to MOBILE_APP_HOME_SAMPLE.stories (Deals, Bikes, Phones, Homes, Daniel Reed, Greenleaf).

• quickActions
  AppQuickAction[]

  Up to 8 tiles { id, label, icon, href?, badge?, onSelect? } in a 4-column grid; [] hides them. Defaults to Post an ad, Favorites (4), Saved searches (2), My orders.

• recommended
  ListingData[]

  The 2-column grid of ad cards; [] hides it. Defaults to MOBILE_APP_HOME_SAMPLE.recommended (the 8 canonical ads).

• feeds
  Partial<Record<"for-you" | "nearby" | "following", ListingData[]>>

  The ads of each tab, merged over MOBILE_APP_HOME_SAMPLE.feeds (20 each); an empty array shows the tab's empty state.

• recentSearches
  AppRecentSearch[]

  { id, query } rows shown while the search is open; defaults to MOBILE_APP_HOME_SAMPLE.recentSearches.

• user
  { name: string; avatar?: string }

  The signed-in person shown as the avatar in the header; defaults to Emma Carter.

• hrefs
  Partial<MobileAppHomeHrefs>

  Where the bell, avatar, Messages, Post, See all and the empty state's action go (notifications, account, messages, add, recommended, discover).

• labels
  Partial<MobileAppHomeLabels>

  Every visible string (Romanian by default, DEFAULT_MOBILE_APP_HOME_LABELS); MOBILE_APP_HOME_LABELS_EN is the English set. Nested listingCard, pullToRefresh, swipeableTabs and list pass strings to the composed items.

• tab
  "for-you" | "nearby" | "following"

  Controlled feed tab; pair it with onTabChange.

• defaultTabdefault "for-you"
  "for-you" | "nearby" | "following"

  The feed tab the screen opens on while uncontrolled.

• onTabChange
  (tab: MobileAppHomeTab) => void

  Called when a tab is tapped or swiped to.

• defaultStorydefault ""
  string

  The id of a story whose sheet is open on mount; empty for none.

• notificationsCountdefault 3
  number

  The count on the bell; 0 hides the badge.

• messagesCountdefault 2
  number

  The count on the Mesaje tab; 0 hides it.

• showStoriesdefault true
  boolean

  The story circles rail.

• showQuickActionsdefault true
  boolean

  The grid of quick action tiles.

• showRecommendeddefault true
  boolean

  The recommended ads grid.

• recommendedCountdefault 4
  number

  Recommended ads shown at first; Show more adds this many again until all are shown.

• pullToRefreshdefault true
  boolean

  Pull down at the top to refresh the feed (off while searching or loading).

• refreshShortcutdefault ""
  string

  A key combo in mod+k notation that refreshes the feed like a pull; none by default.

• tabBardefault true
  boolean

  The bottom tab bar with the raised Post action.

• tabBarVariantdefault "bar"
  "bar" | "floating"

  A full-width glass bar on the bottom edge, or a floating glass pill.

• desktopdefault "column"
  "column" | "full"

  column: from 768px the app is a centered 440px column on a gray backdrop. full: it stretches (a real PWA on a tablet).

• pageSizedefault 8
  number

  Ads per page of a feed; Load more shows the next page.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Unseen story rings, the active tab, the tab bar's active color and raised action, and the text actions.

• loadingdefault false
  boolean

  Skeleton story circles, tiles, cards and rows in the real layout.

• animateIndefault true
  boolean

  Sections rise in once on mount; off in thumbnails and under reduced motion.

• localedefault "en-US"
  string

  Intl locale for prices, distances, times and counts.

• currencydefault "USD"
  string

  The currency of ads that do not set their own.

• nowdefault "useNow()"
  Date | number

  The clock for "Today at 2:32 PM"; pass it for stable renders (the demo uses Sep 24, 2026 4:40 PM).

• onRefresh
  () => (void | Promise<unknown>)

  The pull to refresh; the spinner runs until it settles. Without it the feed reshuffles after 1,2 s.

• onSearch
  (query: string) => void

  Enter in the search field; the query is also added to the recent searches.

• onStoryOpen
  (story: AppStory) => void

  A story circle was tapped (its sheet opens and it turns seen).

• onFavoriteChange
  (listing: ListingData, favorite: boolean) => (void | Promise<unknown>)

  A heart was toggled; a rejected promise rolls it back.

• onLoadMore
  (tab: MobileAppHomeTab) => (void | Promise<unknown>)

  Load more; the button spins until it settles, then the next page shows. Simulated (900 ms) without it.

• linkComponentdefault "<a>"
  (props: LinkComponentProps) => ReactNode

  The router link for every link on the screen (next/link in an app).

• className
  string

  Classes for the app column.

• classNames
  Partial<Record<MobileAppHomeSlot, string>>

  Classes for backdrop, header, search, stories, story, actions, recommended, feed and tabBar.

Parts

FAQ

More React blocks