Garden 9 is now available.
The website has been updated to the latest major version. View previous versions
Skip to main content
Design
Components
Patterns
    • Introduction
      • Overview
    • Foundations
      • Bedrock CSS
      • Design tokens
      • Containers
      • Theming
      • Versions
    • Components
      • Accordion
      • Anchor
      • Avatar
      • Breadcrumbs
      • Buttons
      • Chrome
      • Code block
      • Color picker
      • Color swatch
      • Date picker
      • Draggable
      • Drawer
      • Forms
      • Grid
      • Loaders
      • Menu
      • Modal
      • Notification
      • Pagination
      • Pane
      • Sheet
      • Status indicator
      • Stepper
      • Table
      • Tabs
      • Tags
      • Tiles
      • Timeline
      • Tooltip
      • Tooltip dialog
      • Typography
      • Well
    Table of Contents
    • How to use it
      • Default
      • Floating
      • Multi-line
      • Recessed
    • Configuration
    • API
      • Well

    Well

    A Well is a container that groups related content.


    Table of Contents
    • How to use it
      • Default
      • Floating
      • Multi-line
      • Recessed
    • Configuration
    • API
      • Well

    Used for this
    • To group related content
    Not for this
    • To expand and collapse content, use an Accordion
    • For validation messages, use an Alert
    • For growl-style notifications that float above the page content, use a Notification

    How to use it

    Default

    The typical usage of a Well component.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Floating

    A floating Well has a drop shadow that lifts the content off the page.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Multi-line

    A multi-line Well allows for a title and long-form content.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Recessed

    A recessed Well has a background to differentiate it from the rest of the page.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Configuration

    • Name9.5.3•View source•View on npm
    • Installnpm install @zendeskgarden/react-notifications
    • Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
    • Importimport { Well } from '@zendeskgarden/react-notifications'

    API

    Well

    Prop nameTypeDefaultDescription
    isFloating
    boolean

    Applies a drop shadow

    isRecessed
    boolean

    Applies a background color

    Well.Paragraph

    Extends HTMLAttributes<HTMLParagraphElement>

    Well.Title

    Extends HTMLAttributes<HTMLDivElement>

    Prop nameTypeDefaultDescription
    isRegular
    boolean

    Applies regular (non-bold) font weight

    Garden is the design system by Zendesk.
    BlogGitHubVersions
    © Zendesk 2025