---
id: Notification drawer
section: components
cssPrefix: pf-v6-c-notification-drawer
propComponents:
  [
    'NotificationDrawer',
    'NotificationDrawerBody',
    'NotificationDrawerHeader',
    'NotificationDrawerGroup',
    'NotificationDrawerGroupList',
    'NotificationDrawerList',
    'NotificationDrawerListItem',
    'NotificationDrawerListItemBody',
    'NotificationDrawerListItemHeader'
  ]
---

import { useState } from 'react';
import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';

## Examples

### Basic

```ts file="NotificationDrawerBasic.tsx"

```

### Groups

```ts file="NotificationDrawerGroups.tsx"

```

### Lightweight

```ts file="NotificationDrawerLightweight.tsx"

```