# Contact > Contact variant for block. A shadcn/ui block from the [@uiable](https://uiable.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiable/block-contact). - Page, with a live preview: https://shadcn.exchange/r/uiable/block-contact - Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiable/block-contact-light-d230ad76a1335b02.png - Registry item: https://uiable.com/r/block-contact.json - Categories: landing - Listed: 2026-10-13, source last changed 2026-10-13 ## Install ```bash npx shadcn@latest add https://uiable.com/r/block-contact.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `sonner` - Registry items: `@uiable/button`, `@uiable/input` ## Files ### `src/components/uiable/blocks/landing/contact/Contact.tsx` ```tsx "use client" import { SyntheticEvent, useState } from "react" // shadcn import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" // third-party import { toast } from "sonner" // project-imports import LightFav from "@/images/brand/light-fav" import ContactLeftGrid from "@/images/svg/landing/contact-left-grid" import ContactRightGrid from "@/images/svg/landing/contact-right-grid" // ------------------------------ | CONTACT | ------------------------------ // export default function Contact({ group_name = "uiable_landing", }: { group_name?: string }) { const [email, setEmail] = useState("") const [loading, setLoading] = useState(false) const handleSubmit = async (e: SyntheticEvent) => { e.preventDefault() if (!email) return setLoading(true) try { const response = await fetch("/api/subscribe", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email, group_name }), }) const data = await response.json() if (response.ok) { toast.success(data.message || "Subscribed successfully!") setEmail("") } else { toast.error(data.error || "Failed to subscribe") } } catch { toast.error("Something went wrong. Please try again.") } finally { setLoading(false) } } return (

{/* BLUE GLOW */}

{/* LEFT GRID */}

{/* RIGHT GRID */}

{/* CONTENT */}

{/* LOGO */}

{/* HEADING */}

Get product updates and new releases

{/* SUBTEXT */}

Be the first to know about new components, application blocks, templates, and upcoming releases.

{/* INPUT */}

) } ``` ### `src/images/brand/light-fav.tsx` ```tsx import { SVGAttributes } from "react" // ------------------------------ | LIGHT FAVICON | ------------------------------ // export default function LightFav({ width = "130", height = "124", preserveAspectRatio = "none", ...props }: SVGAttributes) { return ( ) } ``` ### `src/images/svg/landing/contact-left-grid.tsx` ```tsx // types import type { SVGAttributes } from "react" // ------------------------------ | SVG - CONTACT LEFT GRID | ------------------------------ // export default function ContactLeftGrid(props: SVGAttributes) { return ( ) } ``` ### `src/images/svg/landing/contact-right-grid.tsx` ```tsx // types import type { SVGAttributes } from "react" // ------------------------------ | SVG - CONTACT RIGHT GRID | ------------------------------ // export default function ContactRightGrid(props: SVGAttributes) { return ( ) } ```