Newsletter Card

A simple marketing capture surface that shows how to stack fields and actions.

Stay in the loop

Product updates, release notes, and design system changes once a month.

We only send relevant updates.
import { Card, CardHeader, CardTitle, CardDescription, CardContent, Input, CardFooter, Button } from '@tile-ui/react';

export default function NewsletterCardDemo() {
	return (
		<Card>
			<CardHeader>

Install

pnpm dlx shadcn@latest add @tile-ui/card @tile-ui/input @tile-ui/button
  • card
  • input
  • button

Why this example exists

It demonstrates a lightweight acquisition flow that still uses the same spacing and field patterns, showing how a Card can double as a marketing capture surface.