Next up, let’s go ahead and add in our variant options while our component’s markup is still relatively simple. This process will be relatively similar to when we added our button’s variant options.

Getting the Variant Classes

First, let’s copy the Pines UI markup for the alert variant options, or you can copy it from below.

<div class="relative w-full rounded-lg border border-transparent bg-blue-600 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-white">
    <svg class="w-5 h-5 -translate-y-0.5" xmlns="<http://www.w3.org/2000/svg>" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" /></svg>
    <h5 class="mb-1 font-medium leading-none tracking-tight">Alert Message Headline</h5>
    <div class="text-sm opacity-80">This is the subtext for your alert message, providing important information or instructions.</div>
</div>
<div class="relative w-full rounded-lg border border-transparent bg-red-600 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-white">
    <svg class="w-5 h-5 -translate-y-0.5" xmlns="<http://www.w3.org/2000/svg>" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" /></svg>
    <h5 class="mb-1 font-medium leading-none tracking-tight">Alert Message Headline</h5>
    <div class="text-sm opacity-80">This is the subtext for your alert message, providing important information or instructions.</div>
</div>
<div class="relative w-full rounded-lg border border-transparent bg-green-500 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-white">
    <svg class="w-5 h-5 -translate-y-0.5" xmlns="<http://www.w3.org/2000/svg>" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
    <h5 class="mb-1 font-medium leading-none tracking-tight">Alert Message Headline</h5>
    <div class="text-sm opacity-80">This is the subtext for your alert message, providing important information or instructions.</div>
</div>
<div class="relative w-full rounded-lg border border-transparent bg-yellow-500 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-white">
    <svg class="w-5 h-5 -translate-y-0.5" xmlns="<http://www.w3.org/2000/svg>" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" /></svg>
    <h5 class="mb-1 font-medium leading-none tracking-tight">Alert Message Headline</h5>
    <div class="text-sm opacity-80">This is the subtext for your alert message, providing important information or instructions.</div>
</div>

Then, let’s paste that somewhere within our alert component. Thankfully, the only thing on these variants specifying color is a few classes on the outermost DIVs, so all we need to do is cut these elements down to their outermost starting DIVs, extract those classes, and set them as keys on a variable called variants, which we’ll also allow to be a prop.