Note

An aside in the flow of a page: a tip or a caveat on a calm card, with a breath of its color in the corner.

$ pnpm dlx shadcn@latest add https://dashral.com/r/note.json

Good to know

Invited teammates join with the role you pick, and you can change it later in Settings → Members. Removing someone ends their sessions at once.

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/note.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/note

Usage

example.tsx

1import { Note } from "@/components/dashral/note"
2
3<Note color="success" title="Good to know">
4  <p>Test keys start with <code>sk_test_</code> and never touch live data.</p>
5</Note>

Examples

Colors

Each color brings a fitting icon; the card and the words stay neutral.

Before you start

Exports include every column, hidden or not.

How it's counted

A visitor is counted once a day, however many pages they open.

Works offline

Changes are kept on this device and sent when you’re back online.

Takes effect for everyone

A new retention period applies to all workspaces at the next billing date.

Can't be undone

Deleting a workspace removes its dashboards, members and history.

In a page of instructions

A list with code and a link reads like the text around it; without a title, the icon leads the text.

Add an API key under Settings → API keys, then send it with every request in the Authorization header.

Good to know

Keys are shown once. Copy it when it’s created; you can make a new one any time.
Test keys start with sk_test_ and never touch live data.
Rotating a key? Read Key rotation first.

A key works until you revoke it. Keep it on your server: never ship it in a browser or a mobile app.

API reference

Note

Also takes every prop of <div>(opens in a new tab).

Prop	Type	Default
`title`	`ReactNode` The heading beside the icon, e.g. “Good to know”.	—
`color`	`"neutral" \| "primary" \| "info" \| "success" \| "warning" \| "destructive" \| "highlight"` Tints the corner light and the icon; each color brings a fitting icon.	`"neutral"`
`icon`	`ReactNode \| false` Replaces the icon; false shows none.	`the color's`
`children`	`ReactNode` The text: paragraphs, lists, links and code read as they do around it.	—
`classNames`	`{ icon, title, body }` Classes for each part.	—
`className`	`string` Extra classes, merged with cn() so yours win.	—

Accessibility

role="note": an aside to the content around it, read in place and never announced. For a status that must be heard (saved, failed), use Alert.
The icon is decorative; the title and the text carry the meaning, so it never relies on color.