Note

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

Installation

Add the component with the CLI.

npx shadcn@latest add @intentui/note

Manual installation

Install the dependencies, then copy the component source into your project.

npm install react-aria-components @heroicons/react cn

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

Use intent to change the note’s appearance. The default is primary.

Loading...

Component API

Note extends the native <div> element.

classNamestring
indicatorboolean
Default: true
intent"default" | "info" | "warning" | "danger" | "success"
Default: default
Design
Meter
Progress Bar