HQ UI

Note / Alert

The Note component can be used to provide information or messages, but also highlighted information complementing the normal flow of paragraphs and headers on a page.

Installation

In the terminal, run the following command to begin:
npx hq-kit add note

Basic

Change a few things up and try submitting again.

Variants

Default alert! Change a few things up and try submitting again.
Danger alert! Change a few things up and try submitting again.
Outline alert! Change a few things up and try submitting again.

Title & Description

Heads up!

Change a few things up and try submitting again.

Heads up!

Change a few things up and try submitting again.

Heads up!

Change a few things up and try submitting again.

With Icon

Heads up!

Change a few things up and try submitting again.