EmilyUI

Components

Eight production-ready components built with Emily utilities. Accessible, responsive, and themed to your brand config. Copy the HTML, paste into your project.

ButtonText InputAlertCard

Button

button

Primary, secondary, and outline variants. All include hover, focus-visible, active, and disabled states.

HTML
<button class="px-5 py-2.5 rounded text-sm font-medium bg-primary-80 text-white hover:bg-primary-90 transition-colors focus-visible:ring-2">
  Primary
</button>

<button class="px-5 py-2.5 rounded text-sm font-medium border-2 border-primary-80 text-primary-80 hover:bg-primary-10 transition-colors focus-visible:ring-2">
  Outline
</button>

Text Input

input

Text input with label, helper text, error state, and accessible focus ring.

We'll never share your email.

HTML
<div class="flex flex-col gap-1.5">
  <label for="email" class="text-sm font-medium text-neutral-100">
    Email address
  </label>
  <input
    id="email"
    type="email"
    placeholder="andy@example.com"
    class="px-4 py-2.5 rounded border text-sm border-neutral-30 focus-visible:ring-2 focus-visible:border-primary-80"
  />
  <p class="text-xs text-neutral-60">We'll never share your email.</p>
</div>

Alert

div

Success, error, and warning variants. Uses role="alert" for screen reader announcement.

HTML
<div class="p-4 rounded border-l-4 flex gap-3 bg-success-10" style="border-color:#059669;" role="alert">
  <p class="text-sm font-semibold text-success-100">Success</p>
  <p class="text-sm text-success-90">Your changes have been saved.</p>
</div>

Card

div

Flexible content container with padding, border, and optional shadow.

Card title

Supporting text that describes this card.

HTML
<div class="rounded-lg p-6 shadow-sm border border-neutral-20">
  <h3 class="font-semibold text-sm text-neutral-100 mb-2">Card title</h3>
  <p class="text-sm text-neutral-60">Supporting text goes here.</p>
</div>

Want to see all components in one place?

Open full showcase