Statuses

Note

A styled text component for highlighting important information, warnings, or contextual messages within a UI.

MeterProgress Bar

Basic

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

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

Installation

npx shadcn@latest add @intentui/note

Manual installation

npm i 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.

Loading...
Unlock the full power of
Design Intent UI
Build modern web apps faster with 500+ blocks and polished templates crafted for you.
Meter
Progress Bar