Skip to content
goodtabs UI
BrowseBrowse components

Success state

Says what happened and offers one next step.

npx shadcn@latest add https://ui.goodtabs.co/r/success-state.json

With the @goodtabs namespace in components.json: npx shadcn@latest add @goodtabs/success-state

Site published

The smallest useful version.

With a description

Invite sent

Priya will get an email with a link to join the workspace. It expires in 7 days.

Adds a sentence about what happens next.

Usage

import { SuccessState } from "@/components/ui/success-state"

<SuccessState title="Site published">
  <Button asChild><a href="/site">View site</a></Button>
</SuccessState>

Props

PropTypeDefaultDescription
titlestringWhat happened, in the past tense.
descriptionstringWhat changed or what comes next.
childrenReactNodeThe one next step, a button or a link.

Source

success-state/success-state.tsx
import * as React from "react";
import { CheckIcon } from "lucide-react";
import { cn } from "@/lib/utils";

type SuccessStateProps = Omit<React.ComponentProps<"div">, "title"> & {
  /** What happened, in the past tense. */
  title: string;
  /** One sentence on what changed or what comes next. */
  description?: string;
};

/**
 * What happened and one next step. Pass a single button or link as the
 * children. It announces itself politely when it appears.
 */
export function SuccessState({ title, description, className, children, ...props }: SuccessStateProps) {
  return (
    <div
      role="status"
      data-slot="success-state"
      className={cn("flex flex-col items-center gap-3 px-4 py-6 text-center", className)}
      {...props}
    >
      <span className="flex size-9 items-center justify-center rounded-full bg-primary text-primary-foreground">
        <CheckIcon className="size-4" aria-hidden="true" />
      </span>
      <div className="space-y-1">
        <h3 className="text-sm font-medium text-foreground">{title}</h3>
        {description && <p className="max-w-xs text-sm text-foreground/70">{description}</p>}
      </div>
      {children}
    </div>
  );
}

For AI agents

Hand your agent this page, the markdown at /components/success-state/prompt.md, or the Copy AI prompt button above.

When to use

  • A form or flow finished and the same space should confirm it
  • Giving one obvious next step after a task completes

When not to use

  • Small background saves, where a toast is quieter
  • Flows with several equal next steps

Agent notes

  • Renders role=status, so it is announced politely when it mounts
  • The check sits in a primary tile, not green, to keep the palette monochrome
  • Pass one action only; the point is a single clear next step
  • Add the border and radius through className when you place it inside a card