The Nabe - Visual Component Catalog: Details, Listings, AI, Agent, Discovery, Hotspots

ListingCard src/components/listings/ListingCard.tsx

Photo Hero (h-[200px] object-cover)

★ 87

Active

$3,200/mo

245 N 6th St, Unit 3R · Williamsburg

2 bed · 1 bath · 850 sqft

“Corner unit with incredible natural light...” — E.

82
Quiet

78
Mgmt

90
Walk

85
Transit

72
Bike

👥 23 Nabe residents here · 💬 8 building reviews

NabeScoreBadge + ListingCardTag + SmartMatchBanner src/components/listings/

NabeScoreBadge (size="sm")

★ 87

NabeScoreBadge (size="md")

★ 87

ListingCardTag variants

🔊 Quiet ✅ Agent Verified ✨ Smart Match 🕐 New Today 📈 Price Drop 💰 No Fee 🔥 Popular ✨ 92% vibe match

SmartMatchBanner

✨ 3 Smart Matches based on your activity

View ›

AgentMatchCard src/components/listings/AgentMatchCard.tsx

Emma Chen ✓

Williamsburg Expert · 14 deals this year

“She's closed 14 deals in Williamsburg this year, 8 quiet 1BRs under $4K”

AgentTakeSection src/components/listings/AgentTakeSection.tsx

✨ Only on Nabe

Emma Chen 14 deals closed

This unit checks a lot of boxes — great light, quiet block, responsive management. The only catch is the 4th floor walkup, but the price reflects that.

AskNeighborhood src/components/listings/AskNeighborhood.tsx

Ask the Neighborhood

Real answers from building residents

🗨

How is the noise level at night?

Asked by Sarah M.

Pretty quiet actually. Weekends can get a bit lively on Bedford but nothing crazy.

Mike R. lives here 3 years 👍 4

PostViewingNotes src/components/listings/PostViewingNotes.tsx

Viewing Notes

245 N 6th St, Unit 3R

Would you live here?

★ ★ ★ ★ ★

Would consider this

Notes

Listings Tab Layout

The full listings tab with header, mode toggle, filter chips, sort, and results bar.

Filters & Vibe Selector

FilterSheet src/components/listings/FilterSheet.tsx

Filters ✕

Listing Type

All Rent Buy

Price Range

$0-3K $3-5K $5K+ Any

Bedrooms

Studio 1 2 3 4+

Only on Nabe

Min Nabe Score

Only on Nabe

Any 60+ 70+ 80+ 90+

Clear all

VibeSelector + SavedSearches src/components/listings/VibeSelector.tsx / SavedSearches.tsx

VibeSelector (inline row)

🔇 Quiet ✕ ☕ Cafe life ✕ + Add

VibeSelector (drawer grid)

🔇 Quiet ✕ ☕ Cafe Life ✕ 🍷 Nightlife 🐶 Dog-Friendly 👶 Family 🌳 Green Space 🍴 Foodie 🏄 Fitness

SavedSearches item

🔍 Quiet 1BRs in Williamsburg

5 matches Last alert: Today

🗑

Compare Table

Detail Views (Feed)

EventDetail src/components/feed/detail-variants/EventDetail.tsx

📅 Saturday, March 22 🕐 7:00 PM

📍 McCarren Park Pavilion

🏷 Social

👥 42 going

Hosted by

Jake Martinez

PostDetail src/components/feed/PostDetail.tsx

Maria Lopez Business

2h ago • Williamsburg

New brunch menu just dropped!

[Image aspect-[2.5/1]]

Come try our new weekend brunch menu at Nabe Cafe. Featuring Italian-inspired dishes from local suppliers.

Comments (2)

Sarah K.

Can't wait to try it!

1h ago ❤ 3

❤ 24 💬 2 🔖 🔗

Agent Dashboard

AgentDashboardHeader + AttentionBanner src/components/agent-dashboard/

Good morning, Emma 👋

3 items need your attention

New Intros

Unread

Updates Due

PerformanceSummary + QuickActionsRow src/components/agent-dashboard/

📈 Performance (Last 30 Days)

Profile Views234 +12%

Listing Impressions1,847

New Leads12 +22%

Avg Response Time18 min

Trust Score4.8 / 5.0

📊

Analytics

🏠

Add Listing

✎

Edit Profile

⚙

Settings

Agent Engagement

FeaturedAgentCard src/components/agent-engagement/FeaturedAgentCard.tsx

Meet Your Neighborhood Agent

Emma Chen

The Chen Team

★ 4.8/5 Trust Score

Years

142

Neighbors

Listings

"I know every landlord and super in Williamsburg. I'll get you the real story."

NeedsForm + SignatureCanvas src/components/agent-engagement/

What are you looking to do?

Priorities

Quiet street Near subway Natural light Pet-friendly Outdoor space

SignatureCanvas

Sign to Confirm

Draw your signature below

[Signature Canvas Area]

Discovery Components

Intake forms, comparison views, intro requests, schedule intros, and video call mock.

ResidentIntakeForm + IntakePillSelector src/components/discovery/

Find Your Agent

Answer a few quick questions

What are you looking for?

Budget range

Which neighborhoods?

ComparisonToggle + IntroRequestCard src/components/discovery/

ComparisonToggle

IntroRequestCard

New Intro Request 🕐 2h ago

Sarah Johnson

Looking for

Renting $2K-$4K Williamsburg 1BR

"Looking for a quiet place near the L train. We have a small dog."

IntroConfirmation src/components/discovery/IntroConfirmation.tsx

✔

Intro Requests Sent!

Emma Chen

Compass

Sent ✓

Each agent will respond within 24 hours

No commitment until you both decide it's a fit

VideoCallMock (all states) src/components/discovery/VideoCallMock.tsx

Scheduled State

📅

Video call scheduled

Tomorrow at 10:00 AM

15-minute intro meeting

In-Call State

Emma Chen 2:34

📹

Video call in progress

You

🎤

🎥

📞

AI Chat Components

Chat bubbles, welcome screen, prompt cards, follow-up chips, and response cards.

AIChatBubble + Welcome + Input src/components/ai/

AIChatBubble (FAB)

✨

Hey! I can help you find apartments, answer neighborhood questions, or help agents prep for meetings.

🔍

Find me a 2BR under $4K

📍

What's the vibe on N 6th?

☕

Best coffee near me?

🔄

Compare two listings

Ask Nabe AI anything...

▶

AIMessageBubble + FollowUpChips src/components/ai/AIMessageBubble.tsx

Find me a quiet 1BR in Williamsburg under $3K

✨

I found 3 listings that match your criteria. The best option is a corner unit on N 6th with a NabeScore of 87.

AIListingHeroCard src/components/ai/response-cards/AIListingHeroCard.tsx

[Listing Photo]

Top Pick

245 N 6th St, Unit 3R

Williamsburg

$3,200/mo 2 bed · 1 bath · 850 sqft

“Corner unit with incredible natural light and quiet block”

AIComparisonCard src/components/ai/response-cards/AIComparisonCard.tsx

245 N 6th St, Unit 3R

What you'd know before signing a lease

5 data points
on other sites

12 data points
on Nabe

✨ What Nabe adds

★

Building Score: 82/100

Nabe Scores

★

Tenant Reviews: 4.2/5 (8 reviews)

Building Reviews

AIAgentDraftCard src/components/ai/response-cards/AIAgentDraftCard.tsx

Draft for Sarah

✎ Edit

Re: Parking options near 245 N 6th

Hi Sarah, great question about parking! The building at 245 N 6th doesn't have private parking, but there's a municipal garage 2 blocks awayNABE with monthly rates around $275.

✨ Powered by 3 Nabe sources ▼

AIWaitlistCard + AIListingCompactRow src/components/ai/response-cards/

AIWaitlistCard

🔔

We don't have data for Bushwick yet, but we're expanding soon!

AIListingCompactRow

180 Kent Ave 4B

$2,800

Greenpoint · 1 bed · 1 bath

★ 79 Very quiet block

›

Hotspot Components

Real-time community reporting: detail drawer, comment thread, status voting, and report sheet.

HotspotDetail src/components/hotspots/HotspotDetail.tsx

Emergency EMERGENCY Community Report

Water Main Break on Bedford Ave

📍 Bedford Ave & N 7th St

🕐 Reported 45 min ago Est. duration: 2 hours

Active

Large water main break flooding Bedford Ave between N 7th and N 8th. Road is closed to traffic. DEP crews on site.

👥 7 neighbors confirmed this Confirmed by neighbors

StatusUpdate + CommentThread + ReportSheet src/components/hotspots/

Community Status

Updated 10 min ago

Updates from neighbors 3

Mike R. 15 min ago

DEP just arrived, looks like they're setting up barriers

🚫

Anonymous 8 min ago

Water is starting to recede on the north side

Share an update...

Report Sheet (category picker)

🔥

Emergency

🚨

Police Activity

📣

Protest

🚧

Construction

The Nabe — Visual Component Catalog

Generated from actual source code. This is an audit, not a redesign.

Branch: design-unification | Date: 2026-03-19

Listing Components

Ask the Neighborhood

Listings Tab Layout

Filters & Vibe Selector

Compare Table

Detail Views (Feed)

New brunch menu just dropped!

Agent Dashboard

Agent Engagement

Emma Chen

Sign to Confirm

Discovery Components

Intro Requests Sent!

AI Chat Components

Hotspot Components

Water Main Break on Bedford Ave