Well

A recessed, inset container used to visually group and de-emphasize content relative to the surrounding surface. It renders like a Card.Root but with an inset shadow and the base background, making it feel sunken into the page. Reach for it to frame empty states, code samples, supplementary notes, or read-only summaries.

1import { Well } from "@ngrok/mantle/well";2import { Empty } from "@ngrok/mantle/empty";3import { Button } from "@ngrok/mantle/button";4import { MagnifyingGlassIcon } from "@phosphor-icons/react";5 6<Well>⋯7	<Empty.Root>⋯8		<Empty.Icon svg={<MagnifyingGlassIcon />} />9		<Empty.Title>No results found</Empty.Title>10		<Empty.Description>⋯11			<p>Try adjusting your search or filters to find what you're looking for.</p>12		</Empty.Description>13		<Empty.Actions>⋯14			<Button type="button" appearance="outlined" priority="neutral">⋯15				Clear filters16			</Button>17		</Empty.Actions>18	</Empty.Root>19</Well>;

Polymorphism

Well accepts an asChild prop. When true, it renders its single child instead of its default <div>, forwarding all class names, data-* attributes, and the ref onto that child. Reach for this when the recessed container should also be a more semantic element, such as a labelled <section>.

1<Well asChild>⋯2	<section aria-label="Search results">{/* … */}</section>3</Well>

API Reference

Well

A recessed, inset container. Renders a <div> by default and spreads all standard <div> props onto the rendered element. Supports the asChild prop for polymorphic rendering.