Components
Loading preview...
Good error design is clear, useful, and friendly. Designing concise and accurate error messages unblocks users and builds trust by meeting people where they are.
@shugar
npx shadcn@latest add https://21st.dev/r/shugar/errorimport { Error } from "@/components/ui/error";
const Default = () => {
return <Error>This email address is already in use.</Error>;
};
const CustomLabel = () => {
return <Error label="Email Error">This email address is already in use.</Error>;
};
const Sizes = () => (
<div className="flex gap-6">
<Error size="small">This email is in use.</Error>
<Error>This email is in use.</Error>
<Error size="large">This email is in use.</Error>
</div>
);
const WithAnErrorProperty = () => {
return <Error
error={{
message: "The request failed.",
action: "Contact Us",
link: "https://vercel.com/contact"
}}
/>;
};
export { Default, CustomLabel, Sizes, WithAnErrorProperty };