Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/zendeskgarden/website/llms.txt

Use this file to discover all available pages before exploring further.

Well comes from the @zendeskgarden/react-notifications package. Use it to group related content on a page. It supports optional titles, multi-paragraph content, a floating (drop shadow) variant, and a recessed (darker background) variant.
If you need to expand and collapse content, use an Accordion instead. For validation messages, use an Alert or Notification. For growl-style notifications that float above page content, use a Notification.

​
Installation

npm install @zendeskgarden/react-notifications

import { Well } from '@zendeskgarden/react-notifications';

​
Usage

​
Default

A basic Well with a title and inline text content. 
import { Well } from '@zendeskgarden/react-notifications';

const Example = () => (
  <Well>
    <Well.Title>What is a Garden?</Well.Title>
    Turnip greens yarrow endive cauliflower sea lettuce kohlrabi amaranth water
  </Well>
);

​
Recessed

A recessed Well has a filled background to differentiate it from the surrounding page. Use for sidebars, info boxes, or secondary content areas. 
import { Well } from '@zendeskgarden/react-notifications';

const Example = () => (
  <Well isRecessed>
    <Well.Title>What is a Garden?</Well.Title>
    Turnip greens yarrow endive cauliflower sea lettuce kohlrabi amaranth water
  </Well>
);

​
Floating

A floating Well has a drop shadow that visually lifts the content off the page. 
import { Well } from '@zendeskgarden/react-notifications';

const Example = () => (
  <Well isFloating>
    <Well.Title>What is a Garden?</Well.Title>
    Turnip greens yarrow endive cauliflower sea lettuce kohlrabi amaranth water
  </Well>
);

​
Multi-line

Use Well.Paragraph for long-form content with multiple paragraphs inside a Well. 
import { Well } from '@zendeskgarden/react-notifications';

const Example = () => (
  <Well>
    <Well.Title>What is a Garden?</Well.Title>
    <Well.Paragraph>
      Turnip greens yarrow endive cauliflower sea lettuce kohlrabi amaranth water. Corn amaranth
      salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.
    </Well.Paragraph>
    <Well.Paragraph>
      Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic. Corn
      amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.
    </Well.Paragraph>
  </Well>
);

​
Component structure

<Well>
  <Well.Title />      {/* optional */}
  <Well.Paragraph />  {/* optional — use for multi-paragraph content */}
  {/* or inline text */}
</Well>

​
Props

​
Well

​
isRecessed
boolean
default:"false"
Applies a filled background color to differentiate the Well from the page surface. Use for sidebars, info boxes, or secondary content areas.
​
isFloating
boolean
default:"false"
Applies a drop shadow to lift the Well visually off the page.

​
Well.Title

Renders a title at the top of the Well with appropriate heading styles.

​
Well.Paragraph

Renders a paragraph inside the Well with appropriate text and spacing styles. Use multiple Well.Paragraph elements for long-form content.

Build docs developers (and LLMs) love

Get started for freeTalk to us