100 Free AI UI Components

Rewrite Options Menu

A Try again button with a menu to change the answer: shorter, longer, simpler or more formal. The answer updates in place.

Download the fileOpen full screen

One HTML file with the CSS and JavaScript inside. No library needed. MIT license.

Live preview

How to use it

  1. Click Copy the code, or download the file.
  2. Paste the CSS into your stylesheet, the HTML where you want the component, and the script before the closing body tag.
  3. Change --accent at the top of the CSS to your brand color, then connect the events to your AI service.

What you get

  • Works in light and dark mode automatically
  • Keyboard friendly, with labels for screen readers
  • Fits phones, tablets and desktops
  • Respects the reduced motion setting
  • No framework, so it works with any stack

The code

<!DOCTYPE html>
<!--
  Rewrite Options Menu: a free AI UI component
  From 100 Free AI UI Components by MM Rahman Bappi, MIT license
  https://mmrahmanbappi.github.io/100-free-ai-ui-components/

  How to use: copy the CSS, HTML and JavaScript below into your page.
  Colors are CSS variables at the top. Change --accent to match your brand.
  Light and dark themes follow the visitor's system setting, or set
  data-theme="dark" or data-theme="light" on the html element.
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rewrite Options Menu | Free AI UI Component</title>
<meta name="description" content="A Try again button with a menu to change the answer: shorter, longer, simpler or more formal. The answer updates in place.">
<meta name="robots" content="noindex, follow">
<style>
:root{
  --accent:#5b5bd6; --accent-ink:#fff; --accent-soft:#ececfc;
  --bg:#f7f7f8; --surface:#fff; --surface-2:#f1f1f4; --ink:#17171c; --text:#3a3a44; --muted:#6c6c78;
  --line:#e3e3e8; --good:#15803d; --warn:#b45309; --bad:#c62828;
  --radius:14px; --shadow:0 1px 2px rgba(20,20,30,.06),0 8px 24px -12px rgba(20,20,30,.18);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif; --mono:ui-monospace,"Cascadia Code",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --accent:#8b8bff; --accent-ink:#0f0f16; --accent-soft:#25254a;
  --bg:#0f0f13; --surface:#18181f; --surface-2:#212129; --ink:#f3f3f6; --text:#d4d4dc; --muted:#9a9aa8;
  --line:#2c2c36; --good:#4ade80; --warn:#fbbf24; --bad:#f87171; --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -12px rgba(0,0,0,.6);
}}
:root[data-theme=dark]{
  --accent:#8b8bff; --accent-ink:#0f0f16; --accent-soft:#25254a;
  --bg:#0f0f13; --surface:#18181f; --surface-2:#212129; --ink:#f3f3f6; --text:#d4d4dc; --muted:#9a9aa8;
  --line:#2c2c36; --good:#4ade80; --warn:#fbbf24; --bad:#f87171; --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -12px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:24px;background:var(--bg);color:var(--text);font:15px/1.5 var(--font);-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}
/* ---- component ---- */
.wrap{width:min(100%,640px);display:flex;flex-direction:column;gap:14px}
.ai{display:flex;gap:12px;align-items:flex-start}
.av{width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;flex:none}
.col{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1}
.bubble{background:var(--surface);border:1px solid var(--line);border-radius:4px 16px 16px 16px;padding:11px 15px;box-shadow:var(--shadow);color:var(--text);overflow-wrap:anywhere}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px}
.card h2{font-size:15px;margin:0 0 4px;color:var(--ink)}.card p{margin:0 0 12px;color:var(--muted);font-size:14px}
.ib{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;background:none;color:var(--muted);height:32px;min-width:32px;padding:0 8px;border-radius:8px;cursor:pointer;font-size:13px}
.ib:hover{background:var(--surface-2);color:var(--ink)}
.ib[aria-pressed=true]{color:var(--accent);background:var(--accent-soft)}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:9px;padding:7px 14px;font-size:14px;cursor:pointer}
.btn:hover{border-color:var(--accent)}.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.btn:disabled{opacity:.45;cursor:not-allowed}
.thanks{font-size:13.5px;color:var(--good);display:flex;align-items:center;gap:6px;animation:in .25s ease}
@keyframes in{from{opacity:0;transform:translateY(3px)}}.tb{display:flex;gap:2px;margin-left:-6px;position:relative}
.menu{position:absolute;top:calc(100% + 4px);left:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;list-style:none;margin:0;min-width:200px;z-index:2}
.menu li button{width:100%;text-align:left;border:0;background:none;padding:8px 10px;border-radius:8px;font-size:14px;color:var(--text);cursor:pointer}
.menu li button:hover,.menu li button:focus{background:var(--surface-2);color:var(--ink);outline:0}
.bubble{transition:opacity .2s}.bubble.fade{opacity:.35}
.tag{font-size:12px;color:var(--muted)}
</style>
</head>
<body>
<div class="wrap"><div class="ai"><div class="av" aria-hidden="true"><svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true"><path d="M12 2l1.8 6.2L20 10l-6.2 1.8L12 18l-1.8-6.2L4 10l6.2-1.8z"/></svg></div><div class="col">
  <div class="bubble" id="b" aria-live="polite">Compound interest means you earn interest on your savings and also on the interest you already earned. Over many years this makes your money grow faster, like a snowball rolling downhill and picking up more snow.</div>
  <div class="tb"><button class="ib" type="button" id="tg" aria-haspopup="menu" aria-expanded="false"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a9 9 0 11-3-6.7L21 8"/><path d="M21 3v5h-5"/></svg><span>Try again</span></button><span class="tag" id="tag"></span>
    <ul class="menu" id="menu" role="menu" hidden>
      <li role="none"><button role="menuitem" type="button" data-k="short">Make it shorter</button></li>
      <li role="none"><button role="menuitem" type="button" data-k="long">Make it longer</button></li>
      <li role="none"><button role="menuitem" type="button" data-k="simple">Make it simpler</button></li>
      <li role="none"><button role="menuitem" type="button" data-k="formal">Make it more formal</button></li>
    </ul></div>
</div></div></div>
<script>
// Demo helper: add ?theme=dark or ?theme=light to the address to preview a theme.
(function(){var t=new URLSearchParams(location.search).get('theme');if(t)document.documentElement.dataset.theme=t;})();
var V={short:['Shorter','You earn interest on your interest, so savings grow faster over time.'],
  long:['Longer','Compound interest means you earn interest on your savings and also on the interest you already earned. If you save $1,000 at 5 percent a year, you have $1,050 after one year. In year two you earn 5 percent on $1,050, not $1,000. After 20 years you would have about $2,650 without adding anything. The longer you leave it, the faster it grows.'],
  simple:['Simpler','Your money makes money, and then that money makes money too.'],
  formal:['More formal','Compound interest is interest calculated on both the initial principal and the interest accumulated in previous periods, which accelerates growth over time.']};
var tg=document.getElementById('tg'),menu=document.getElementById('menu'),b=document.getElementById('b'),tag=document.getElementById('tag'),items=[].slice.call(menu.querySelectorAll('button'));
function show(v){menu.hidden=!v;tg.setAttribute('aria-expanded',v);if(v)items[0].focus();}
tg.addEventListener('click',function(){show(menu.hidden);});
items.forEach(function(it,i){it.addEventListener('click',function(){show(false);b.classList.add('fade');var k=it.dataset.k;
    setTimeout(function(){b.textContent=V[k][1];tag.textContent=V[k][0];b.classList.remove('fade');tg.focus();},600);});
  it.addEventListener('keydown',function(e){if(e.key==='ArrowDown'){e.preventDefault();items[(i+1)%items.length].focus();}if(e.key==='ArrowUp'){e.preventDefault();items[(i-1+items.length)%items.length].focus();}if(e.key==='Escape'){show(false);tg.focus();}});});
document.addEventListener('click',function(e){if(!e.target.closest('.tb'))show(false);});
</script>
</body>
</html>

More answer feedback components

  • Thumbs Up and Down

    Two small buttons under an answer. Pick one to rate it, pick it again to undo, and see a short thank you.

  • Thumbs Down with Reasons

    When someone marks an answer as bad, a small panel asks why, with quick reason buttons and an optional comment.

  • Star Rating

    Rate an answer from one to five stars with the mouse or keyboard. Each level shows a word, like Good or Excellent.

  • Was This Helpful Bar

    A short question at the end of an answer with Yes and No buttons. It turns into a thank you once someone answers.

  • Compare Two Answers

    Two answers side by side so people can pick the better one, or say both are good or both are bad. Useful for testing models.

  • Report a Problem Dialog

    A report button opens a dialog to flag an answer, with categories and details. It traps focus and closes with Escape.