A styled text component for highlighting important information, warnings, or contextual messages within a UI. It improves readability and draws attention.

We hook you up with top-tier migration services in our startup plan.

Installation

Install the component via the CLI in one command.

npm

pnpm

yarn

bun

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

pnpm

yarn

bun

npm install react-aria-components @heroicons/react tailwind-merge

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>
</>

Examples

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.

We hook you up with top-tier migration services in our startup plan. Wanna roll with it? Hit us up here.

Component API

The Note component highlights contextual information.

Prop	Type	Default
`className`	`string`	-
`indicator`	`boolean`	`true`
`intent`	`"default" \| "info" \| "warning" \| "danger" \| "success"`	`default`

Unlock the full power of
Intent UI Design

Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.

Learn more

Meter

Progress Bar