# Facade UI > Animated React components and full page blocks for local business, real estate and agency websites. Built for Next.js, Tailwind v4 and shadcn. Install with the shadcn CLI or let an AI agent install them through the Facade MCP server. Install a component: `npx shadcn@latest add https://facadeui.com/r/.json` MCP server: `claude mcp add --transport http facade https://facadeui.com/api/mcp` All components use semantic Tailwind tokens (bg-background, text-foreground, bg-brand ...) and only depend on motion and lucide-react. ## Components - [Magnetic button](https://facadeui.com/components/magnetic-button.md): Button that pulls toward the cursor with spring physics while its label drifts slightly further for depth. - [Shine button](https://facadeui.com/components/shine-button.md): Pill button with a soft light sweep on hover, three variants, three sizes and an arrow that nudges forward. - [Gradient heading](https://facadeui.com/components/gradient-heading.md): Display heading with a slow moving gradient sweep through your brand color, with optional highlighted words. - [Text reveal](https://facadeui.com/components/text-reveal.md): Headline that reveals word by word with a blur, fade and gentle rise as it scrolls into view. - [Agent card](https://facadeui.com/components/agent-card.md): Realtor contact card with initials avatar, rating, license, languages and call, email and tour actions. - [Property card](https://facadeui.com/components/property-card.md): Listing card with status badge, saved-home heart, price, address and beds, baths and square footage. - [Spotlight card](https://facadeui.com/components/spotlight-card.md): Card with a soft radial spotlight and a glowing border that both follow the cursor. - [Tilt card](https://facadeui.com/components/tilt-card.md): 3D perspective card that tilts toward the pointer with a moving glare and a smooth spring return. (Pro) - [Animated counter](https://facadeui.com/components/animated-counter.md): Number that counts up when scrolled into view, with prefix, suffix, decimals and Intl formatting. - [Availability table](https://facadeui.com/components/availability-table.md): Sortable, filterable unit availability table for new developments that turns into cards on mobile. (Pro) - [Countdown](https://facadeui.com/components/countdown.md): Countdown to an open house or launch with rolling flip digits for days, hours, minutes and seconds. - [Key facts](https://facadeui.com/components/key-facts.md): Property key facts row with icons and numbers that count up when scrolled into view. - [Before / after slider](https://facadeui.com/components/before-after-slider.md): Draggable, keyboard accessible comparison slider for renovations, staging and remodel photos. (Pro) - [Hotspot image](https://facadeui.com/components/hotspot-image.md): Image or floor plan with pulsing hotspots that open animated detail cards for each room or feature. (Pro) - [Image gallery lightbox](https://facadeui.com/components/image-gallery-lightbox.md): Listing photo grid that opens a shared layout lightbox with arrows, keyboard control and thumbnails. (Pro) - [Booking slots](https://facadeui.com/components/booking-slots.md): Appointment picker with a 14 day date strip, grouped time slots, summary and confirm callback. (Pro) - [Listing filters](https://facadeui.com/components/listing-filters.md): Home search filters with location search, type chips, beds and baths, dual price slider and result count. - [Mortgage calculator](https://facadeui.com/components/mortgage-calculator.md): Monthly payment calculator with down payment slider, loan term toggle and an animated donut breakdown. (Pro) - [Multi-step lead form](https://facadeui.com/components/multi-step-lead-form.md): Three step quote request with option cards, validation, progress bar and direction-aware transitions. (Pro) - [Price toggle](https://facadeui.com/components/price-toggle.md): Monthly or yearly segmented switch with a sliding thumb, plus an animated price that rolls its digits. - [Sliding tabs](https://facadeui.com/components/sliding-tabs.md): Accessible tabs with a spring animated sliding pill, arrow key navigation and a soft content crossfade. - [Sticky contact bar](https://facadeui.com/components/sticky-contact-bar.md): Mobile bottom bar with Call, Text, Directions and Book that hides on scroll down and returns on scroll up. - [Announcement bar](https://facadeui.com/components/announcement-bar.md): Slim top bar that rotates promo messages with a link and collapses smoothly when dismissed. - [Cookie consent](https://facadeui.com/components/cookie-consent.md): Floating consent card with Accept all, Reject and customizable Analytics and Marketing toggles. - [Review marquee](https://facadeui.com/components/review-marquee.md): Two rows of customer review cards scrolling in opposite directions with soft faded edges. (Pro) - [Star rating](https://facadeui.com/components/star-rating.md): Animated fractional star rating with review count, plus an accessible interactive input mode. - [Urgency badge](https://facadeui.com/components/urgency-badge.md): Scarcity badge with a pulsing live dot and an optional percent sold bar that animates into view. - [Aurora background](https://facadeui.com/components/aurora-background.md): Slowly drifting aurora of blurred brand colored blobs with subtle film grain, for heroes and CTAs. (Pro) - [Marquee](https://facadeui.com/components/marquee.md): Seamless infinite marquee for logos or testimonials with faded edges, direction, speed and vertical mode. - [Reveal](https://facadeui.com/components/reveal.md): Scroll reveal wrapper with fade, rise, blur and scale presets plus a RevealGroup for staggered children. - [Smooth accordion](https://facadeui.com/components/smooth-accordion.md): Accessible FAQ accordion with smooth height animation, a plus to minus icon morph and single or multiple mode. - [Location card](https://facadeui.com/components/location-card.md): Stylized SVG map card with a pulsing pin, address, hours, phone and a Google Maps directions link. - [Open now badge](https://facadeui.com/components/open-now-badge.md): Live open or closed pill computed from weekly hours in the business's own time zone. - [Opening hours](https://facadeui.com/components/opening-hours.md): Weekly hours list with today highlighted, live open status, split shifts and closed days. - [Service menu](https://facadeui.com/components/service-menu.md): Tabbed price list for salons, barbers and spas with durations, Popular tags and animated transitions. (Pro) ## Blocks - [Service area](https://facadeui.com/components/service-area.md): Interactive zone map with numbered service areas, city and ZIP lists, and an animated ZIP code checker. (Pro) - [New development showcase](https://facadeui.com/components/new-development-showcase.md): Interactive building elevation with clickable, status-coded units, a detail panel and availability counters. (Pro) - [Property listing grid](https://facadeui.com/components/property-listing-grid.md): Filterable, sortable listings grid with animated re-layout, saved homes and load more pagination. (Pro) - [Hero, agency](https://facadeui.com/components/hero-agency.md): Studio hero with oversized display type, animated grid, availability CTA and a client wordmark marquee. - [Hero, local business](https://facadeui.com/components/hero-local-business.md): Home services hero with live rating, rotating service words and floating appointment, review and ETA cards. - [Hero, real estate](https://facadeui.com/components/hero-real-estate.md): Luxury brokerage hero with ken burns architecture, glass Buy, Rent, Sell search panel and animated stats. (Pro) - [FAQ section](https://facadeui.com/components/faq-section.md): Two-column FAQ with an animated accordion, contact prompt and FAQPage JSON-LD for rich results. - [Features bento](https://facadeui.com/components/features-bento.md): Six cell bento grid with live micro animations: review counter, map pins, inbox stack, chart, toggle, booking. (Pro) - [Footer, big](https://facadeui.com/components/footer-big.md): Large local business footer with animated newsletter, link columns, NAP, hours, socials and a giant wordmark. - [Logo cloud](https://facadeui.com/components/logo-cloud.md): Trusted by wordmark grid with hover reveal of client outcomes and an optional two row marquee mode. - [Process steps](https://facadeui.com/components/process-steps.md): How it works section with a connecting line that draws on scroll and step cards that activate as you pass. - [Stats band](https://facadeui.com/components/stats-band.md): Band of four big animated numbers with labels, trend chips and divider lines that draw in on view. - [Team grid](https://facadeui.com/components/team-grid.md): Team members grid with gradient initials avatars, bio reveal on hover, social links and a hiring card. - [Testimonials wall](https://facadeui.com/components/testimonials-wall.md): Masonry wall of Google and Yelp style reviews with a featured quote and aggregate rating header. (Pro) - [Contact section](https://facadeui.com/components/contact-section.md): Contact form with floating labels and inline validation, plus NAP details, live open-now hours and a map card. (Pro) - [CTA section](https://facadeui.com/components/cta-section.md): High contrast closing CTA panel with brand glow, two actions, reassurance line and an animated beam border. - [Home valuation funnel](https://facadeui.com/components/valuation-funnel.md): Multi-step "What's my home worth?" lead funnel with direction-aware steps and an animated estimate range. (Pro) - [Pricing section](https://facadeui.com/components/pricing-section.md): Three-tier pricing with an animated monthly/yearly toggle, glowing featured plan and feature lists. (Pro) ## Docs - [Installation](https://facadeui.com/docs/installation) - [Use with AI agents](https://facadeui.com/docs/ai) - [Pricing](https://facadeui.com/pricing)