Callout

1import { Callout } from '@/components/ui/callout';
2
3export function Default() {
4  return (
5    <Callout className="max-w-lg">
6      <Callout.Title>Note</Callout.Title>
7      <Callout.Content>
8        The CLI reads NACHUI_TOKEN from your shell first, then falls back to .env.local. Values in
9        the shell always win.
10      </Callout.Content>
11    </Callout>
12  );
13}

1import { Callout } from '@/components/ui/callout';
2
3export function Info() {
4  return (
5    <Callout variant="info" className="max-w-lg">
6      <Callout.Title>Good to know</Callout.Title>
7      <Callout.Content>
8        Preview deploys are kept for 30 days and then removed. Promote one to production if you need
9        the URL to stay reachable.
10      </Callout.Content>
11    </Callout>
12  );
13}

1import { Callout } from '@/components/ui/callout';
2
3export function Warning() {
4  return (
5    <Callout variant="warning" className="max-w-lg">
6      <Callout.Title>Breaking change in v3.0</Callout.Title>
7      <Callout.Content>
8        Button no longer forwards the asChild prop. Wrap the child in Slot yourself before you
9        upgrade, or the link inside it renders as a nested button.
10      </Callout.Content>
11    </Callout>
12  );
13}

1import { Callout } from '@/components/ui/callout';
2
3export function Danger() {
4  return (
5    <Callout variant="danger" className="max-w-lg">
6      <Callout.Title>This cannot be undone</Callout.Title>
7      <Callout.Content>
8        Deleting a project removes its deploys, environment variables, and request logs. Custom
9        domains are released and can be claimed by anyone.
10      </Callout.Content>
11    </Callout>
12  );
13}

1import { Callout } from '@/components/ui/callout';
2
3export function Success() {
4  return (
5    <Callout variant="success" className="max-w-lg">
6      <Callout.Title>Recommended</Callout.Title>
7      <Callout.Content>
8        Since v2.3 the compiler memoizes render output for you. New code can drop manual useMemo and
9        useCallback wrappers around cheap values.
10      </Callout.Content>
11    </Callout>
12  );
13}