Corporate UI Kit

28 professional, understated components — slate tones, crisp corners and subtle shadows — for business dashboards, B2B SaaS and internal tools.

28 components · live preview · copy as HTML or JSX · free for commercial use

Corporate buttons

Primary Button

Corporate · Buttons

<button class="bg-slate-800 text-white rounded-md px-4 py-2 text-sm font-semibold hover:bg-slate-700 shadow-sm transition-all">
  Primary Button
</button>

Outline Button

Corporate · Buttons

<button class="bg-transparent text-slate-800 border border-slate-200 rounded-md px-4 py-2 text-sm font-semibold transition-colors">
  Outline Button
</button>

Icon Button

Corporate · Buttons

<button class="w-10 h-10 flex items-center justify-center rounded-md bg-white border border-slate-200 text-slate-800 shadow-sm transition-colors" aria-label="Settings">
  <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
    <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.28z" />
    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
  </svg>
</button>

Accent Button

Corporate · Buttons

<button class="bg-slate-100 text-slate-600 rounded-md px-5 py-2.5 text-sm font-semibold shadow-sm transition-all">
  Get Started
</button>

Corporate badges

Status Pill

Corporate · Badges

Active

<span class="inline-flex items-center gap-1.5 bg-slate-100 text-slate-600 rounded-md px-2.5 py-1 text-xs font-semibold">
  <span class="w-1.5 h-1.5 rounded-full bg-current opacity-70"></span>
  Active
</span>

Notification Badge

Corporate · Badges

🔔 3

<span class="relative inline-flex">
  <span class="inline-flex items-center justify-center w-9 h-9 rounded-md bg-white border border-slate-200 text-slate-500">🔔</span>
  <span class="absolute -top-1 -right-1 inline-flex items-center justify-center w-5 h-5 rounded-full bg-slate-100 text-slate-600 text-[10px] font-semibold">3</span>
</span>

Corporate cards

Basic Card

Corporate · Cards

Card Title

A short description of this card's content goes here.

<div class="max-w-xs bg-white border border-slate-200 rounded-md p-5 shadow-sm">
  <h3 class="text-sm font-semibold text-slate-800 mb-1">Card Title</h3>
  <p class="text-xs text-slate-500">A short description of this card's content goes here.</p>
</div>

Profile Card

Corporate · Cards

Jane Doe

Product Designer

<div class="max-w-xs bg-white border border-slate-200 rounded-md p-5 shadow-sm flex items-center gap-4">
  <div class="w-12 h-12 rounded-md bg-slate-700 flex items-center justify-center text-white text-sm font-semibold">JD</div>
  <div>
    <p class="text-sm font-semibold text-slate-800">Jane Doe</p>
    <p class="text-xs text-slate-500">Product Designer</p>
  </div>
</div>

Pricing Card

Corporate · Cards

Pro

$19/mo

<div class="max-w-xs bg-white border border-slate-200 rounded-md p-6 shadow-sm">
  <p class="text-xs font-semibold text-slate-800 uppercase tracking-wide mb-2">Pro</p>
  <p class="text-2xl font-semibold text-slate-800 mb-4">$19<span class="text-sm text-slate-500">/mo</span></p>
  <button class="w-full bg-slate-800 text-white rounded-md px-4 py-2 text-sm font-semibold hover:bg-slate-700 transition-all">
    Choose Plan
  </button>
</div>

Corporate alerts

Info Alert

Corporate · Alerts

ℹ️ This is an informational message.

<div class="max-w-xs bg-white border border-slate-200 rounded-md p-3 text-xs text-slate-800 shadow-sm">
  ℹ️ This is an informational message.
</div>

Success Alert

Corporate · Alerts

✅ Your changes have been saved.

<div class="max-w-xs bg-white border border-slate-200 rounded-md p-3 text-xs text-slate-800 shadow-sm">
  ✅ Your changes have been saved.
</div>

Warning Alert

Corporate · Alerts

⚠️ This action can't be undone.

<div class="max-w-xs bg-white border border-slate-200 rounded-md p-3 text-xs text-slate-800 shadow-sm">
  ⚠️ This action can't be undone.
</div>

Error Alert

Corporate · Alerts

⛔ Something went wrong.

<div class="max-w-xs bg-white border border-slate-200 rounded-md p-3 text-xs text-slate-800 shadow-sm">
  ⛔ Something went wrong.
</div>

Corporate forms

Text Input

Corporate · Forms

<input type="email" placeholder="you@example.com" class="w-48 px-3 py-2 rounded-md text-sm border border-slate-300 text-slate-900 placeholder:text-slate-400 focus:ring-1 focus:ring-slate-500 focus:outline-none" />

Textarea

Corporate · Forms

<textarea rows="3" placeholder="Type your message…" class="w-48 px-3 py-2 rounded-md text-sm border border-slate-300 text-slate-900 placeholder:text-slate-400 focus:ring-1 focus:ring-slate-500 focus:outline-none"></textarea>

Select Dropdown

Corporate · Forms

<select class="w-48 px-3 py-2 rounded-md text-sm border border-slate-300 text-slate-900 placeholder:text-slate-400 focus:ring-1 focus:ring-slate-500 focus:outline-none">
  <option>United States</option>
  <option>South Korea</option>
  <option>Japan</option>
</select>

Checkbox

Corporate · Forms

I agree to the terms

<label class="inline-flex items-center gap-2 cursor-pointer">
  <input type="checkbox" class="w-4 h-4 rounded text-slate-700" />
  <span class="text-sm text-slate-800">I agree to the terms</span>
</label>

Toggle Switch

Corporate · Forms

Uses Tailwind's peer/peer-checked variants — no JavaScript required.

<label class="inline-flex items-center cursor-pointer">
  <input type="checkbox" class="peer sr-only" />
  <div class="w-11 h-6 rounded-md bg-slate-300 peer-checked:bg-slate-700 transition-colors relative">
    <div class="absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow-sm transition-transform peer-checked:translate-x-5"></div>
  </div>
</label>

Corporate feedback

Spinner

Corporate · Feedback

<div class="w-8 h-8 rounded-full border-4 border-slate-200 border-t-slate-700 animate-spin"></div>

Progress Bar

Corporate · Feedback

<div class="w-48 h-2.5 rounded-md bg-slate-200 overflow-hidden">
  <div class="h-full w-2/3 rounded-md bg-slate-700"></div>
</div>

Skeleton Loader

Corporate · Feedback

Simplified static placeholder shown here; the base catalog's Skeleton Loader has the animated shimmer.

<div class="w-48 space-y-2">
  <div class="h-4 w-3/4 rounded bg-slate-200"></div>
  <div class="h-4 w-1/2 rounded bg-slate-200"></div>
</div>

Toast Notification

Corporate · Feedback

Vanilla JavaScript — no framework required.

<button id="toast-trigger" class="bg-slate-800 text-white rounded-md px-4 py-2 text-sm font-semibold hover:bg-slate-700 transition-all">
  Show Toast
</button>
<div id="toast" class="fixed bottom-5 right-5 hidden items-center gap-2 rounded-md bg-white border border-slate-200 text-slate-800 text-sm font-semibold px-4 py-3 shadow-sm">
  ✅ Saved successfully!
</div>

Corporate overlays

Accordion / FAQ Item

Corporate · Overlays

Refund policy? ▾

30-day money-back guarantee, no questions asked.

Uses the native <details>/<summary> elements — no JavaScript required.

<details class="w-48 rounded-md border border-slate-200 bg-white p-4 group">
  <summary class="cursor-pointer text-sm font-semibold text-slate-800 list-none flex items-center justify-between">
    Refund policy?
    <span class="text-slate-500 group-open:rotate-180 transition-transform">▾</span>
  </summary>
  <p class="text-xs text-slate-500 mt-2">30-day money-back guarantee, no questions asked.</p>
</details>

Modal Dialog

Corporate · Overlays

Uses the native <dialog> element — minimal JavaScript just toggles it open/closed.

<button id="modal-open" class="bg-slate-800 text-white rounded-md px-4 py-2 text-sm font-semibold hover:bg-slate-700 transition-all">
  Open Modal
</button>
<dialog id="modal" class="rounded-md p-6 w-full max-w-xs bg-white border border-slate-200 text-slate-800 backdrop:bg-black/50">
  <h3 class="text-sm font-semibold mb-2">Confirm action</h3>
  <p class="text-xs text-slate-500 mb-4">Are you sure you want to continue?</p>
  <div class="flex gap-2 justify-end">
    <button id="modal-close" class="px-3 py-1.5 rounded-md text-xs font-semibold text-slate-500">Cancel</button>
    <button class="px-3 py-1.5 rounded-md text-xs font-semibold bg-slate-800 text-white">Confirm</button>
  </div>
</dialog>

Tooltip

Corporate · Overlays

Uses Tailwind's group/group-hover variants — no JavaScript required.

<span class="relative inline-block group">
  <button class="w-8 h-8 flex items-center justify-center rounded-md bg-white border border-slate-200 text-slate-800 text-xs font-semibold">?</button>
  <span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block whitespace-nowrap rounded-md bg-slate-800 text-white text-[10px] px-2.5 py-1.5">
    Helpful tooltip text
  </span>
</span>

Corporate avatars

Circle Avatar

Corporate · Avatars

<div class="w-10 h-10 rounded-md bg-slate-700 flex items-center justify-center text-white text-sm font-semibold">AB</div>

Avatar Group

Corporate · Avatars

<div class="flex -space-x-2">
  <div class="w-9 h-9 rounded-md bg-slate-700 border-2 border-white flex items-center justify-center text-white text-xs font-semibold">A</div>
  <div class="w-9 h-9 rounded-md bg-slate-700 border-2 border-white flex items-center justify-center text-white text-xs font-semibold">B</div>
  <div class="w-9 h-9 rounded-md bg-slate-700 border-2 border-white flex items-center justify-center text-white text-xs font-semibold">C</div>
  <div class="w-9 h-9 rounded-md bg-white border border-slate-200 border-2 border-white flex items-center justify-center text-slate-500 text-xs font-semibold">+5</div>
</div>

Avatar with Status

Corporate · Avatars

<div class="relative inline-block">
  <div class="w-10 h-10 rounded-md bg-slate-700 flex items-center justify-center text-white text-sm font-semibold">JS</div>
  <span class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-emerald-500 border-2 border-white"></span>
</div>

What is the corporate style?

Corporate design aims for trust and clarity. This kit uses dark slate primary buttons (slate-800), white surfaces with light borders, small corner radii (rounded-md) and soft shadow-sm elevation. Nothing competes with the content, which keeps tables, forms and reports easy to scan for long periods.

When to use it

Choose it for admin panels, CRMs, finance and HR software, B2B marketing sites and anything where users spend hours in the interface. It also makes a dependable default while prototyping, when you don't want styling decisions to distract from the workflow.

Accessibility notes

Corporate palettes usually pass contrast checks, but secondary gray text and disabled states are common failures — keep helper text at slate-500 or darker on white. Pair status colors in alerts and badges with text labels, and keep generous click targets even in dense layouts.

← Back to the full UI Component Library

Frequently Asked Questions

What colors suit a corporate UI?↓

Neutral slate or gray for surfaces and text, one dependable accent (often blue or dark slate) for primary actions, and standard green, amber and red for status.

How do I keep a corporate UI from looking boring?↓

Use consistent spacing, clear typography and a single accent color. Personality can come from illustrations, icons and microcopy rather than from the components themselves.

Can I use these components in an admin dashboard?↓

Yes. The corporate set is designed for dense business interfaces, and every component is free for commercial use.

Last updated: November 7, 2026