diff --git a/README.md b/README.md index 7a8b58e146..d03fa88116 100644 --- a/README.md +++ b/README.md @@ -40,6 +40,16 @@ export default function Email() { }; ``` +## Using with AI + +Install the React Email skill to teach your coding agent (Claude Code, Codex, Cursor, GitHub Copilot, and others) how to build emails with React Email: + +```sh +npx skills add resend/react-email +``` + +The docs are also available for LLMs at [react.email/docs/llms.txt](https://react.email/docs/llms.txt). + ## Components A set of standard components to help you build amazing emails without having to deal with the mess of creating table-based layouts and maintaining archaic markup. diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx index 12b99b2186..186a686daa 100644 --- a/apps/web/src/app/page.tsx +++ b/apps/web/src/app/page.tsx @@ -1,4 +1,5 @@ import { Footer } from '@/components/footer'; +import AiSection from '@/components/sections/ai'; import { EditorHomepage } from '@/components/sections/editor'; import HeroSection from '@/components/sections/hero'; import IntegrationSection from '@/components/sections/integration'; @@ -13,6 +14,7 @@ const Home = () => (
+ diff --git a/apps/web/src/components/sections/ai.tsx b/apps/web/src/components/sections/ai.tsx new file mode 100644 index 0000000000..30e15aa6ac --- /dev/null +++ b/apps/web/src/components/sections/ai.tsx @@ -0,0 +1,328 @@ +'use client'; + +import { motion, useMotionTemplate, useMotionValue } from 'framer-motion'; +import { CheckIcon } from 'lucide-react'; +import Image from 'next/image'; +import Link from 'next/link'; +import { type ReactNode, useState } from 'react'; +import { Button } from '@/components/button'; +import { Code } from '@/components/code'; +import { Heading } from '@/components/heading'; +import { Text } from '@/components/text'; + +const AiSection = () => { + const [copiedTitle, setCopiedTitle] = useState(null); + + const handleCopy = async (item: (typeof items)[number]) => { + try { + await navigator.clipboard.writeText(item.prompt); + } catch { + return; + } + setCopiedTitle(item.title); + window.setTimeout(() => { + setCopiedTitle((current) => (current === item.title ? null : current)); + }, 1500); + }; + + return ( +
+ +
+ + Build with any AI + +
+ + Describe the email you want. Your agent builds it with React Email. + +
+
+
    + {items.map((item) => { + const isCopied = copiedTitle === item.title; + + return ( +
  • + +
    • + ); + })} +
+
+ + npx skills add resend/react-email + + +
+ +
+ ); +}; + +const Tile = ({ children }: { children: ReactNode }) => { + const mouseX = useMotionValue(0); + const mouseY = useMotionValue(0); + const background = useMotionTemplate`radial-gradient(60px circle at ${mouseX}px ${mouseY}px, rgb(187,243,254,0.6), transparent 80%)`; + + return ( +
{ + const { left, top } = e.currentTarget.getBoundingClientRect(); + + mouseX.set(e.clientX - left); + mouseY.set(e.clientY - top); + }} + > + +
+ {children} +
+
+ ); +}; + +const Blur = () => { + return ( +