Rad UI is still under active development. You are free to use it in your projects, but expect breaking changes. If you'd like to contribute to Rad UI, please check out Getting Started

Callout is a component that can be used to display a message or a notification to the user.

Error

Something went wrong. Please try again later.


import Callout from "@radui/ui/Callout";
import Text from "@radui/ui/Text";

const CalloutExample = () => (
  <Callout color="red">
    <div className="flex items-start">
      <BookmarkIcon />

      <div className="ml-2">
        <Text className="font-bold">Error</Text>
        <Text>Something went wrong. Please try again later.</Text>
      </div>
    </div>
  </Callout>
)