Callout
A quiet inline note on a tinted fill: neutral, a warm accent wash, or the error tint, with an optional small action button.
$149 once · every Pro piece
Customize
neutral
accent
error
Dismissing lifts the card away first, then its space closes on a spring so whatever follows glides up.
Install
npx shadcn@latest add @obsyde/calloutNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { Callout } from '@/components/obsyde/ember/callout/Callout';
export function Example() {
return (
<Callout tone="neutral" />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/callout/Callout.tsxcomponentember/callout/callout-demo.cssstylesember/callout/callout.cssstylesember/callout/CalloutDemo.tsxdemoember/overlays-kit/demo.csssharedember/overlays-kit/kit.tssharedember/shared/spring.tssharedember/shared/accent.tssharedember/shared/ember.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
toneTone | 'neutral' | 'accent' | 'error' | 'neutral' |
dismissibleDismissible | boolean | false |
actionLabelAction label | string | — |