Skip to main content
/mantle

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.

When to use

A Well de-emphasizes a block of content relative to the surface around it.

  • Prefer Card when the content is primary and needs a raised box, a header, or a footer.
  • Compose Empty inside a Well when a zero-data state needs an inset panel.
  • Prefer CodeBlock when the content is code and needs highlighting and a copy button.

No results found

Try adjusting your search or filters to find what you're looking for.

import { Well } from "@ngrok/mantle/well";import { Empty } from "@ngrok/mantle/empty";import { Button } from "@ngrok/mantle/button";import { MagnifyingGlassIcon } from "@phosphor-icons/react"; <Well>	<Empty.Root>		<Empty.Icon svg={<MagnifyingGlassIcon />} />		<Empty.Title>No results found</Empty.Title>		<Empty.Description>			<p>Try adjusting your search or filters to find what you're looking for.</p>		</Empty.Description>		<Empty.Actions>			<Button type="button" appearance="outlined" intent="neutral">				Clear filters			</Button>		</Empty.Actions>	</Empty.Root></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>.

No results found

Try adjusting your search or filters to find what you're looking for.

import { Well } from "@ngrok/mantle/well";import { Empty } from "@ngrok/mantle/empty";import { Button } from "@ngrok/mantle/button";import { MagnifyingGlassIcon, PlusIcon } from "@phosphor-icons/react"; <Well asChild>	<section aria-label="Search results">		<Empty.Root>			<Empty.Icon svg={<MagnifyingGlassIcon />} />			<Empty.Title>No results found</Empty.Title>			<Empty.Description>				<p>Try adjusting your search or filters to find what you're looking for.</p>			</Empty.Description>			<Empty.Actions>				<Button type="button" appearance="filled" intent="neutral" icon={<PlusIcon />}>					Create new				</Button>			</Empty.Actions>		</Empty.Root>	</section></Well>;

API Reference

Well

A recessed, inset container. Renders a <div> by default and spreads all standard <div> props onto the rendered element.

All props from div, plus:

PropTypeDefaultDescription
asChild?booleanfalseUse the asChild prop to compose the Well styling onto alternative element types or your own React components.