const ClickCounter = () => {
  const [total, setTotal] = React.useState(0);

  const increment = () => {
    setTotal((value) => value + 1);
  };

  return (
    <section className="counter-card">
      <h2 className="counter-title">Click Counter</h2>
      <p className="counter-value">Clicks so far: {total}</p>
      <button onClick={increment} className="counter-button">
        Add one
      </button>
    </section>
  );
};

.counter-card {
  padding: 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid #27272a;
  background: #18181b;
}

.counter-title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.counter-button {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: none;
  background: #38bdf8;
  color: #0f172a;
  font-weight: 600;
}

# Click Counter

A minimal counter used to demo the code block's tab bar, Shiki syntax
highlighting, and per-line highlight markers.

Switch tabs to see the component, its styles, and this note — each one
keeps its own language and highlighted lines.