Tag

function Removable() {
  const [tags, setTags] = useState(['Design', 'Research', 'Writing', 'Prototyping']);
  return (
    <TagGroup label="Skills" hint="Press Backspace or Delete to remove the focused tag." onRemove={(keys) => setTags((t) => t.filter((x) => !keys.has(x)))}>
      {tags.map((t) => <Tag key={t} id={t}>{t}</Tag>)}
    </TagGroup>
  );
}

<Removable />

<TagGroup label="Labels"><Tag id="a">Design</Tag><Tag id="b">Research</Tag><Tag id="c">Writing</Tag></TagGroup>

<TagGroup label="Filter by status" selectionMode="multiple" defaultSelectedKeys={['open']}>
  <Tag id="open">Open</Tag><Tag id="review">In review</Tag><Tag id="done">Done</Tag>
</TagGroup>

function SmallRemovable() {
  const [tags, setTags] = useState(['Design', 'Research', 'Writing', 'Accessibility', 'Prototyping', 'Content']);
  return (
    <div className="max-w-xs">
      <TagGroup label="Labels" onRemove={(keys) => setTags((t) => t.filter((x) => !keys.has(x)))}>
        {tags.map((t) => <Tag key={t} id={t} size="sm">{t}</Tag>)}
      </TagGroup>
    </div>
  );
}

<SmallRemovable />

<div className="flex flex-col gap-gap-lg">
  <TagGroup label="Skills" maxVisible={3}>
    {['Design', 'Research', 'Writing', 'Accessibility', 'Prototyping', 'Content'].map((t) => <Tag key={t} id={t}>{t}</Tag>)}
  </TagGroup>
  <TagGroup label="Labels" maxVisible={3}>
    {['Bug', 'Docs', 'Design', 'Help wanted', 'Good first issue'].map((t) => <Tag key={t} id={t} size="sm">{t}</Tag>)}
  </TagGroup>
</div>

<TagGroup label="Skills" emptyText="No skills added yet">{[]}</TagGroup>