Note

Basic

The Note component displays a note with a title and description, providing an easy way to highlight important information.

Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/note

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm install react-aria-components @heroicons/react

Anatomy

import { Note } from "@/components/ui/note"

<>
  <Note intent='info'>Note for info</Note>
  <Note intent='warning'>Note for warning</Note>
  <Note intent='danger'>Note for danger</Note>
  <Note intent='success'>Note for success</Note>
  <Note intent='default'>Note for default</Note>
</>

Intent

By default, the note is displayed with a primary intent. You can change the intent by passing the intent prop. This example demonstrates different intents.