Inline CTA components

No. The inline CTA examples are PRO code you copy and paste once Untitled UI is set up in your project. Each one is composed from existing components such as Button, Input, Form and FeaturedIcon; the receipt example also uses FileIcon from @untitledui/file-icons, so add that package if your project does not have it.

The action rows render two Button components — a color="secondary" button for the dismissive action and a default "primary" one for the main action, both at size="sm". Neither has behavior attached in the example, so add your own onClick handler, or an href if the action is navigation.

The email field example wraps the field in the Form component and handles onSubmit by calling e.preventDefault() and reading new FormData(e.currentTarget). The Input is marked isRequired with hideRequiredIndicator and uses name="email", size="md" and the Mail01 icon, so native validation runs before your handler is reached.

Yes, they are built mobile-first. The image variant stacks vertically and switches to a row with a fixed sm:w-60 image column at the sm breakpoint, and most action rows use flex-col-reverse on mobile — so the primary button sits on top — before flipping to sm:flex-row.

Most variants are a single wrapper with rounded-xl bg-primary shadow-xs plus ring-1 ring-secondary ring-inset; the image variant uses border-secondary instead because it needs per-edge control around the image. Swap those semantic tokens for others in the palette rather than raw color classes so the card keeps working in both themes.

Yes. Text and surfaces use semantic tokens like text-primary, text-tertiary and bg-primary, which adapt automatically. File icons are the exception: the receipt example renders two FileIcon elements, one with theme="light" and dark:hidden and one with theme="dark" and not-dark:hidden, so follow that pattern if you add file or payment icons of your own.