> ## Documentation Index
> Fetch the complete documentation index at: https://flatfile.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Icon Reference

> Reference of all available icons

Icons may be set for custom action buttons. Here's a list of all available icons that Flatfile supports.

## Usage Example

Icons can be used in [Actions](/core-concepts/actions) to provide visual cues for different operations:

```javascript theme={null}
const action = {
  operation: "export-data",
  label: "Export",
  icon: "download",
  description: "Export your data",
  mode: "background",
};
```

Icons help users quickly identify the purpose of different actions and improve the overall user experience in your Flatfile implementation.

Icons may be set for custom action buttons. Here's a list of all available icons
that Flatfile supports.

## All icons

<CardGroup cols={4}>
  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path fill="currentColor" fillRule="evenodd" d="M11.799 3.276c-.212.043-.39.165-.468.322-.066.132-.072.4-.082 3.891l-.011 3.749-3.749.011-3.749.011-.169.097c-.221.126-.308.308-.31.643-.001.332.101.542.322.657.155.082.206.083 3.906.094l3.749.011.011 3.749c.011 3.7.012 3.751.094 3.906.115.22.325.323.657.323s.542-.103.657-.323c.082-.155.083-.206.094-3.906l.011-3.749 3.749-.011c3.7-.011 3.751-.012 3.906-.094.221-.115.323-.325.322-.657-.002-.335-.089-.517-.31-.643l-.169-.097-3.749-.011-3.749-.011-.011-3.749c-.01-3.507-.016-3.758-.082-3.892-.123-.246-.516-.391-.87-.321" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">add</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path fill="currentColor" fillRule="evenodd" d="M11.32 2.28A9.74 9.74 0 003.258 7.7c-.46.94-.762 1.914-.924 2.98-.097.636-.097 2.004 0 2.64.446 2.941 2.052 5.409 4.533 6.968 1.075.676 2.441 1.17 3.813 1.378.636.097 2.004.097 2.64 0 2.1-.319 3.932-1.206 5.405-2.618 1.601-1.534 2.6-3.479 2.941-5.728.097-.636.097-2.004 0-2.64-.443-2.919-2.04-5.389-4.49-6.941-.824-.522-2.118-1.053-3.056-1.253a10.872 10.872 0 00-2.8-.206m2 1.578a8.277 8.277 0 014.628 2.435c1.176 1.231 1.913 2.713 2.2 4.423.1.593.1 1.975 0 2.568-.612 3.649-3.463 6.426-7.08 6.895-3.771.489-7.369-1.653-8.767-5.219a9.164 9.164 0 01-.449-1.676c-.1-.593-.1-1.975 0-2.568.299-1.783 1.066-3.282 2.324-4.54 1.389-1.388 2.977-2.138 5.064-2.391.313-.038 1.715.011 2.08.073m-1.521 3.418c-.212.043-.39.165-.468.322-.065.131-.071.322-.071 2.402 0 2.206.002 2.264.083 2.417.115.22.325.323.657.323s.542-.103.657-.323c.081-.153.083-.211.083-2.417 0-2.09-.005-2.271-.071-2.403-.123-.246-.516-.391-.87-.321m0 8c-.37.075-.536.299-.538.724-.002.508.236.74.759.74.325 0 .535-.102.65-.314.094-.173.094-.679 0-.852-.129-.24-.514-.371-.871-.298" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">alertCircle</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M11.623 2.287c-.736.083-1.504.565-1.92 1.204-.226.349-7.029 12.154-7.13 12.374a2.748 2.748 0 00.965 3.408c.349.234.647.355 1.062.43.444.08 14.356.08 14.8 0a2.74 2.74 0 002.146-1.882 2.738 2.738 0 00-.119-1.956c-.121-.263-6.946-12.086-7.161-12.405-.584-.866-1.553-1.296-2.643-1.173m.903 1.582c.102.046.255.153.34.239.101.102 1.36 2.246 3.664 6.238 1.93 3.345 3.536 6.147 3.57 6.227.035.084.06.267.06.439 0 .486-.242.878-.691 1.118l-.169.09H4.7l-.169-.09a1.242 1.242 0 01-.569-.579c-.104-.208-.122-.288-.121-.547 0-.207.024-.355.074-.464.075-.165 6.677-11.618 6.989-12.125.197-.321.382-.48.676-.586.259-.092.687-.074.946.04m-.727 4.407c-.212.043-.39.165-.468.322-.063.127-.071.278-.071 1.402 0 1.196.004 1.268.083 1.417.115.22.325.323.657.323s.542-.103.657-.323c.079-.149.083-.221.083-1.417 0-1.13-.007-1.275-.071-1.403-.123-.246-.516-.391-.87-.321m0 6c-.37.075-.536.299-.538.724-.002.508.236.74.759.74.325 0 .535-.102.65-.314.094-.173.094-.679 0-.852-.129-.24-.514-.371-.871-.298" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">alertTriangle</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M9.76 4.263c-.09.039-1.403 1.319-3.681 3.589a720.538 720.538 0 01-3.643 3.615.872.872 0 00-.177.31c-.074.219-.074.227.001.449a.865.865 0 00.195.33 709.79 709.79 0 013.662 3.631c3.888 3.869 3.681 3.686 4.048 3.576.218-.065.533-.38.598-.598.11-.365.239-.216-2.995-3.455l-2.946-2.949 8.219-.011c8.217-.01 8.219-.01 8.376-.093.221-.115.323-.325.322-.657-.002-.335-.089-.517-.31-.643l-.169-.097-8.219-.011-8.219-.01 2.946-2.95c3.218-3.222 3.104-3.091 2.999-3.441-.091-.305-.503-.651-.77-.646a.766.766 0 00-.237.061" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">arrowLeft</code>
    </div>
  </Card>
</CardGroup>

<CardGroup cols={4}>
  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path fill="currentColor" d="M18.75 6C18.75 5.59375 18.4062 5.25 18 5.25C17.5625 5.25 17.25 5.59375 17.25 6C17.25 6.4375 17.5625 6.75 18 6.75C18.4062 6.75 18.75 6.4375 18.75 6ZM16 6C16 5.3125 16.375 4.65625 17 4.28125C17.5938 3.9375 18.375 3.9375 19 4.28125C19.5938 4.65625 20 5.3125 20 6C20 6.71875 19.5938 7.375 19 7.75C18.375 8.09375 17.5938 8.09375 17 7.75C16.375 7.375 16 6.71875 16 6ZM4 9C4 6.9375 5.65625 5.25 7.75 5.25H12V4.5625C12 4.25 12.25 4 12.5312 4C12.6562 4 12.7812 4.0625 12.875 4.125L14.7812 5.625C14.9062 5.71875 15 5.84375 15 6C15 6.15625 14.9062 6.3125 14.7812 6.40625L12.875 7.90625C12.7812 7.96875 12.6562 8 12.5312 8C12.25 8 12 7.75 12 7.46875V6.75H7.75C6.5 6.75 5.5 7.78125 5.5 9C5.5 10.25 6.5 11.25 7.75 11.25H16.25C18.3125 11.25 20 12.9375 20 15C20 16.875 18.625 18.4062 16.875 18.7188C16.5625 19.4688 15.8438 20 15 20C13.875 20 13 19.125 13 18C13 16.9062 13.875 16 15 16C15.7812 16 16.5 16.5 16.8125 17.1875C17.7812 16.9375 18.5 16.0625 18.5 15C18.5 13.7812 17.4688 12.75 16.25 12.75H7.75C5.65625 12.75 4 11.0938 4 9ZM7.84375 17.25H9V16.5625C9 16.25 9.25 16 9.53125 16C9.65625 16 9.78125 16.0625 9.875 16.125L11.7812 17.625C11.9062 17.7188 12 17.8438 12 18C12 18.1562 11.9062 18.3125 11.7812 18.4062L9.875 19.9062C9.78125 19.9688 9.65625 20 9.53125 20C9.25 20 9 19.75 9 19.4688V18.75H7.84375C7.53125 19.5 6.8125 20 6 20C4.875 20 4 19.125 4 18C4 16.9062 4.875 16 6 16C6.8125 16 7.53125 16.5312 7.84375 17.25ZM6.75 18C6.75 17.5938 6.40625 17.25 6 17.25C5.5625 17.25 5.25 17.5938 5.25 18C5.25 18.4375 5.5625 18.75 6 18.75C6.40625 18.75 6.75 18.4375 6.75 18ZM15 18.75C15.4062 18.75 15.75 18.4375 15.75 18C15.75 17.5938 15.4062 17.25 15 17.25C14.5625 17.25 14.25 17.5938 14.25 18C14.25 18.4375 14.5625 18.75 15 18.75Z" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">arrowProgress</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M13.729 4.285c-.209.103-.435.36-.496.563-.105.35-.219.219 2.999 3.441l2.946 2.95-8.219.01-8.219.011-.169.097c-.221.126-.308.308-.31.643-.001.332.101.542.322.657.157.083.159.083 8.376.093l8.219.011-2.946 2.949c-3.234 3.239-3.105 3.09-2.995 3.455.065.218.38.533.598.598.367.11.16.293 4.048-3.576a709.79 709.79 0 013.662-3.631.865.865 0 00.195-.33c.075-.222.075-.23.001-.449a.872.872 0 00-.177-.31 720.538 720.538 0 01-3.643-3.615c-2.478-2.47-3.586-3.547-3.69-3.59-.198-.083-.298-.078-.502.023" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">arrowRight</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path fill="currentColor" d="M5.25 11C4.8125 11 4.5 10.6875 4.5 10.25V5.75C4.5 5.34375 4.8125 5 5.25 5C5.65625 5 6 5.34375 6 5.75V8.28125L6.625 7.53125C7.90625 6 9.8125 5 12 5C15.8438 5 19 8.15625 19 12C19 15.875 15.8438 19 12 19C10.4062 19 8.96875 18.5 7.78125 17.625C7.46875 17.375 7.375 16.9062 7.625 16.5625C7.875 16.2188 8.34375 16.1562 8.6875 16.4062C9.59375 17.0938 10.75 17.5 12 17.5C15.0312 17.5 17.5 15.0625 17.5 12C17.5 8.96875 15.0312 6.5 12 6.5C10.2812 6.5 8.78125 7.28125 7.75 8.5L6.90625 9.5H9.75C10.1562 9.5 10.5 9.84375 10.5 10.25C10.5 10.6875 10.1562 11 9.75 11H5.25Z" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">arrowRotateLeft</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M3.634 3.331c-.188.093-.241.143-.315.299-.087.187-.088.198-.081 2.329.004 1.382.021 2.202.049 2.313.092.365.48.553.933.452.27-.061.432-.211.495-.459.028-.113.045-.602.045-1.312V5.822l1.95 1.945c2.145 2.14 2.099 2.103 2.455 1.996.218-.065.533-.38.598-.598.107-.356.144-.311-1.993-2.453L5.826 4.764l1.217-.012c1.139-.011 1.227-.017 1.374-.095.221-.115.323-.325.322-.657-.002-.335-.089-.517-.31-.643-.187-.108.074-.098-3.369-.127l-1.2-.01-.226.111m14.186-.092-2.08.021-.169.097c-.221.126-.308.308-.31.643-.001.332.101.542.322.657.147.078.235.084 1.374.095l1.217.012-1.944 1.948c-2.137 2.142-2.1 2.097-1.993 2.453.065.218.38.533.598.598.356.107.31.144 2.455-1.996l1.95-1.945v1.131c0 .71.017 1.199.045 1.312.063.248.225.398.495.459.453.101.841-.087.933-.452.028-.111.045-.931.049-2.313.007-2.131.006-2.142-.081-2.329-.075-.158-.127-.207-.331-.309-.134-.066-.289-.117-.346-.112-.057.004-1.04.018-2.184.03M8.76 14.263c-.088.038-.855.775-2.068 1.986l-1.928 1.925-.012-1.217c-.014-1.384-.023-1.43-.319-1.596-.232-.13-.634-.13-.866 0-.314.177-.304.099-.327 2.559-.022 2.379-.019 2.413.204 2.636.223.223.257.226 2.636.204 2.105-.019 2.185-.023 2.337-.103.221-.115.323-.325.322-.657-.002-.335-.089-.517-.31-.643-.167-.096-.184-.097-1.385-.11l-1.216-.013 1.942-1.947c2.124-2.129 2.099-2.098 1.997-2.439-.091-.305-.503-.651-.77-.646a.766.766 0 0 0-.237.061m5.969.022c-.209.103-.435.36-.496.563-.102.341-.127.31 1.997 2.439l1.942 1.947-1.216.013c-1.201.013-1.218.014-1.385.11-.221.126-.308.308-.31.643-.001.332.101.542.322.657.152.08.232.084 2.337.103 2.379.022 2.413.019 2.636-.204.223-.223.226-.257.204-2.636-.023-2.46-.013-2.382-.327-2.559-.232-.13-.634-.13-.866 0-.296.166-.305.212-.319 1.596l-.012 1.217-1.928-1.925c-1.913-1.911-2.07-2.049-2.317-2.049a.8.8 0 0 0-.262.085" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">arrowsMaximize</code>
    </div>
  </Card>
</CardGroup>

<CardGroup cols={4}>
  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M14.62 4.239l-4.28.021-.169.097c-.221.126-.308.308-.31.643-.001.332.101.542.322.657.155.082.21.083 3.576.094l3.419.011-6.446 6.449c-7.071 7.075-6.608 6.579-6.495 6.954.065.218.38.533.598.598.375.113-.121.576 6.955-6.496l6.45-6.446v3.332c0 2.349.013 3.385.045 3.512.063.248.225.398.495.459.455.101.841-.087.934-.455.03-.122.045-1.493.047-4.518l.004-4.342-.086-.183c-.073-.154-.126-.203-.329-.305-.134-.066-.289-.117-.346-.112-.057.005-2.03.019-4.384.03" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">arrowUpRight</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }} viewBox="0 0 16 16">
        <path fill="currentColor" d="M8 1.5C4.40625 1.5 1.5 4.4375 1.5 8C1.5 11.5938 4.40625 14.5 8 14.5C8.40625 14.5 8.75 14.8438 8.75 15.25C8.75 15.6875 8.40625 16 8 16C3.5625 16 0 12.4375 0 8C0 3.59375 3.5625 0 8 0C12.4062 0 16 3.59375 16 8V8.875C16 10.4688 14.6875 11.75 13.125 11.75C12.125 11.75 11.2812 11.2812 10.75 10.5312C10.0625 11.2812 9.09375 11.75 8 11.75C5.90625 11.75 4.25 10.0938 4.25 8C4.25 5.9375 5.90625 4.25 8 4.25C8.875 4.25 9.71875 4.59375 10.3438 5.09375C10.5 4.90625 10.7188 4.75 11 4.75C11.4062 4.75 11.75 5.09375 11.75 5.5V8V8.875C11.75 9.65625 12.3438 10.25 13.125 10.25C13.875 10.25 14.5 9.65625 14.5 8.875V8C14.5 4.4375 11.5625 1.5 8 1.5ZM10.25 8C10.25 7.21875 9.8125 6.46875 9.125 6.0625C8.40625 5.65625 7.5625 5.65625 6.875 6.0625C6.15625 6.46875 5.75 7.21875 5.75 8C5.75 8.8125 6.15625 9.5625 6.875 9.96875C7.5625 10.375 8.40625 10.375 9.125 9.96875C9.8125 9.5625 10.25 8.8125 10.25 8Z" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">at</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path stroke="currentColor" d="M18.364 18.364C21.8787 14.8492 21.8787 9.15076 18.364 5.63604C14.8492 2.12132 9.15076 2.12132 5.63604 5.63604M18.364 18.364C14.8492 21.8787 9.15076 21.8787 5.63604 18.364C2.12132 14.8492 2.12132 9.15076 5.63604 5.63604M18.364 18.364L5.63604 5.63604" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">ban</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }} viewBox="0 0 64 64" height="24" width="24">
        <path fill="currentColor" d="M32.898 43.9c-3.92.02-7.118-3.133-7.138-7.052-.03-3.92 3.127-7.113 7.05-7.137 3.92-.03 7.116 3.127 7.143 7.046s-3.13 7.12-7.053 7.143m-20.9.133c-3.922.027-7.12-3.13-7.142-7.046-.027-3.922 3.13-7.12 7.053-7.143a7.1 7.1 0 0 1 7.141 7.046 7.1 7.1 0 0 1-7.052 7.143m20.78-19.06c-4.533.032-8.447 2.605-10.41 6.353-2.013-3.727-5.96-6.25-10.488-6.218-2.56.01-5.047.856-7.084 2.408l-.064-9.962a2.37 2.37 0 0 0-2.384-2.304 2.36 2.36 0 0 0-2.346 2.333L.118 37.2h.006a11.83 11.83 0 0 0 11.9 11.56c4.528-.03 8.443-2.603 10.413-6.354 2.008 3.725 5.962 6.248 10.49 6.22 6.533-.04 11.795-5.373 11.755-11.907S39.3 24.92 32.774 24.962m30.73 19.747l-6.642-8.06 6.536-8.144c.8-1.045.563-2.502-.56-3.27-1.134-.765-2.718-.56-3.572.457v-.004l-5.648 7.03-5.733-6.95c-.87-1.008-2.46-1.196-3.575-.414-1.12.783-1.346 2.24-.52 3.282l6.636 8.055-6.537 8.14c-.81 1.05-.564 2.503.568 3.27 1.123.77 2.712.563 3.566-.455l5.643-7.026 5.74 6.954c.867 1.01 2.456 1.193 3.58.412 1.117-.79 1.34-2.24.52-3.28" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">boxLogo</code>
    </div>
  </Card>
</CardGroup>

<CardGroup cols={4}>
  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path fill="currentColor" d="M2.53125 7.9375L3.8125 5.34375C3.90625 5.15625 4.125 5.03125 4.34375 5.0625L12 6L9.375 10.3438C9.15625 10.75 8.6875 10.9375 8.25 10.8125L3.15625 9.34375C2.53125 9.1875 2.25 8.5 2.53125 7.9375ZM12 6L19.625 5.0625C19.8438 5.03125 20.0625 5.125 20.1562 5.34375L21.4375 7.9375C21.7188 8.5 21.4375 9.1875 20.8125 9.34375L15.7188 10.8125C15.2812 10.9375 14.8125 10.75 14.5938 10.3438L12 6ZM11.9375 8H12.0312H11.9375ZM18.5 11.0625L20 10.625V15.8438C20 16.5312 19.5312 17.125 18.8438 17.3125L12.4688 18.9062C12.1562 18.9688 11.8125 18.9688 11.5 18.9062L5.125 17.3125C4.46875 17.125 4 16.5312 4 15.8438V10.625L5.5 11.0625V15.8438L11.25 17.2812V9.75C11.25 9.34375 11.5625 9 12 9C12.4062 9 12.75 9.34375 12.75 9.75V17.2812L18.5 15.8438V11.0625Z" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">boxOpen</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M6.617 2.283c-.583.068-1.098.327-1.552.781a2.742 2.742 0 00-.696 1.116l-.109.32-.011 7.866-.01 7.865-.75.015c-.702.014-.76.021-.918.111-.221.126-.308.307-.31.643-.001.332.101.542.322.657l.157.083h18.52l.157-.083c.221-.115.323-.325.322-.657-.002-.336-.089-.517-.31-.643-.158-.09-.216-.097-.918-.111l-.75-.015-.01-7.865L19.74 4.5l-.109-.32a2.742 2.742 0 00-.696-1.116c-.472-.471-.961-.709-1.606-.783-.424-.049-10.294-.046-10.712.002m10.911 1.59c.239.118.481.36.599.599l.093.188.01 7.79.011 7.79H14.76l-.001-2.17c0-2.317-.014-2.507-.202-2.875-.122-.24-.533-.634-.797-.765-.31-.153-.641-.188-1.76-.188s-1.45.035-1.76.188c-.264.131-.675.525-.797.765-.188.368-.202.558-.202 2.875l-.001 2.17H5.76v-7.735c0-8.483-.017-7.888.236-8.233.14-.19.38-.373.59-.45.13-.048.973-.056 5.454-.049l5.3.007.188.093M8.799 6.275c-.371.078-.536.3-.538.725-.001.332.101.542.322.657.143.075.227.083.917.083.69 0 .774-.008.917-.083.221-.115.323-.325.322-.657-.002-.336-.089-.517-.31-.642-.157-.089-.216-.096-.829-.104-.363-.005-.723.004-.801.021m5 0c-.371.078-.536.3-.538.725-.001.332.101.542.322.657.143.075.227.083.917.083.69 0 .774-.008.917-.083.221-.115.323-.325.322-.657-.002-.336-.089-.517-.31-.642-.157-.089-.216-.096-.829-.104-.363-.005-.723.004-.801.021m-5 4c-.371.078-.536.3-.538.725-.001.332.101.542.322.657.143.075.227.083.917.083.69 0 .774-.008.917-.083.221-.115.323-.325.322-.657-.002-.336-.089-.517-.31-.642-.157-.089-.216-.096-.829-.104-.363-.005-.723.004-.801.021m5 0c-.371.078-.536.3-.538.725-.001.332.101.542.322.657.143.075.227.083.917.083.69 0 .774-.008.917-.083.221-.115.323-.325.322-.657-.002-.336-.089-.517-.31-.642-.157-.089-.216-.096-.829-.104-.363-.005-.723.004-.801.021m-.632 5.551c.069.063.073.185.073 2.24v2.174h-2.48v-2.167c0-1.96.006-2.174.066-2.24.061-.067.152-.073 1.167-.073.968 0 1.11.008 1.174.066" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">building</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path fill="currentColor" d="M7.375 2.75C7.73047 2.75 8.03125 3.05078 8.03125 3.40625V4.5H11.9688V3.40625C11.9688 3.05078 12.2422 2.75 12.625 2.75C12.9805 2.75 13.2812 3.05078 13.2812 3.40625V4.5H14.375C15.332 4.5 16.125 5.29297 16.125 6.25V6.6875V8V15C16.125 15.9844 15.332 16.75 14.375 16.75H5.625C4.64062 16.75 3.875 15.9844 3.875 15V8V6.6875V6.25C3.875 5.29297 4.64062 4.5 5.625 4.5H6.71875V3.40625C6.71875 3.05078 6.99219 2.75 7.375 2.75ZM14.8125 8H5.1875V15C5.1875 15.2461 5.37891 15.4375 5.625 15.4375H14.375C14.5938 15.4375 14.8125 15.2461 14.8125 15V8ZM6.9375 9.75H13.0625C13.2812 9.75 13.5 9.96875 13.5 10.1875V11.9375C13.5 12.1836 13.2812 12.375 13.0625 12.375H6.9375C6.69141 12.375 6.5 12.1836 6.5 11.9375V10.1875C6.5 9.96875 6.69141 9.75 6.9375 9.75Z" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">calendar</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path d="M4.33333 3.66667V1M9.66667 3.66667V1M3.66667 6.33333H10.3333M2.33333 13H11.6667C12.403 13 13 12.403 13 11.6667V3.66667C13 2.93029 12.403 2.33333 11.6667 2.33333H2.33333C1.59695 2.33333 1 2.93029 1 3.66667V11.6667C1 12.403 1.59695 13 2.33333 13Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">calendarLight</code>
    </div>
  </Card>
</CardGroup>

<CardGroup cols={4}>
  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M4.617 3.283c-.583.068-1.098.327-1.552.781a2.742 2.742 0 00-.696 1.116l-.109.32v9l.109.32c.151.445.362.783.695 1.116.334.334.673.545 1.116.694l.32.108 1.87.013 1.87.014v2.147c0 1.437.015 2.201.044 2.308.056.203.337.479.555.544.357.107.26.189 2.981-2.526l2.48-2.475 2.6-.012 2.6-.012.32-.108a2.743 2.743 0 001.116-.695c.333-.333.544-.671.695-1.116l.109-.32v-9l-.109-.32a2.742 2.742 0 00-.696-1.116c-.472-.471-.961-.709-1.606-.783-.426-.049-14.293-.047-14.712.002m14.911 1.59c.239.118.481.36.599.599l.093.188v8.68l-.093.188a1.452 1.452 0 01-.607.608c-.176.082-.243.084-2.96.104-2.509.018-2.792.027-2.9.087-.066.037-.966.915-2 1.951L9.78 19.16l-.02-1.71c-.023-1.936-.019-1.915-.331-2.093l-.169-.097-2.3-.02c-2.229-.019-2.306-.023-2.48-.104a1.452 1.452 0 01-.607-.608l-.093-.188-.011-4.26c-.009-3.158 0-4.304.035-4.43.093-.34.433-.7.782-.828.131-.048 1.254-.056 7.454-.049l7.3.007.188.093M7.799 9.276c-.37.075-.536.299-.538.724-.002.508.236.74.759.74.224 0 .31-.019.431-.094.219-.136.287-.289.287-.646 0-.349-.068-.511-.267-.632-.15-.091-.465-.135-.672-.092m4 0c-.37.075-.536.299-.538.724-.002.508.236.74.759.74.325 0 .535-.102.65-.314.094-.173.094-.679 0-.852-.129-.24-.514-.371-.871-.298m4 0c-.37.075-.536.299-.538.724-.002.508.236.74.759.74.325 0 .535-.102.65-.314.094-.173.094-.679 0-.852-.129-.24-.514-.371-.871-.298" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">chat</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M18.76 6.261c-.089.039-1.9 1.822-4.95 4.87l-4.809 4.808-1.831-1.826c-2.013-2.009-1.981-1.982-2.335-1.876-.218.065-.533.38-.598.598-.108.36-.168.288 2.236 2.692 1.899 1.898 2.209 2.193 2.357 2.236.38.111.004.457 5.661-5.196 3.697-3.694 5.175-5.196 5.235-5.32.104-.214.081-.401-.076-.625-.239-.34-.604-.488-.89-.361" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">checkmark</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M11.32 2.28A9.74 9.74 0 003.258 7.7c-.46.94-.762 1.914-.924 2.98-.097.636-.097 2.004 0 2.64.446 2.941 2.052 5.409 4.533 6.968 1.075.676 2.441 1.17 3.813 1.378.636.097 2.004.097 2.64 0 2.1-.319 3.932-1.206 5.405-2.618 1.601-1.534 2.6-3.479 2.941-5.728.097-.636.097-2.004 0-2.64-.443-2.919-2.04-5.389-4.49-6.941-.824-.522-2.118-1.053-3.056-1.253a10.872 10.872 0 00-2.8-.206m2 1.578a8.277 8.277 0 014.628 2.435c1.176 1.231 1.913 2.713 2.2 4.423.1.593.1 1.975 0 2.568-.612 3.649-3.463 6.426-7.08 6.895-3.771.489-7.369-1.653-8.767-5.219a9.164 9.164 0 01-.449-1.676c-.1-.593-.1-1.975 0-2.568.299-1.783 1.066-3.282 2.324-4.54 1.389-1.388 2.977-2.138 5.064-2.391.313-.038 1.715.011 2.08.073m1.44 5.403c-.085.038-.851.773-1.949 1.869l-1.81 1.807-.83-.824c-.924-.917-1.011-.974-1.336-.876-.218.065-.533.38-.598.598-.103.342-.075.38 1.236 1.692 1.007 1.006 1.213 1.194 1.357 1.236.365.107.293.166 2.661-2.197 1.505-1.501 2.176-2.198 2.235-2.319.104-.214.081-.402-.076-.625-.239-.34-.604-.488-.89-.361" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">checkmarkCircle</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M11.764 2.222c-.074.032-.281.181-.46.33-.801.67-1.454 1.099-2.324 1.528-1.63.803-3.182 1.16-5.043 1.16-1.087 0-1.143.035-1.34.833-.439 1.779-.458 3.769-.055 5.64.257 1.195.786 2.583 1.368 3.587 1.673 2.891 4.423 5.062 7.525 5.941.543.154.657.149 1.325-.058a12.597 12.597 0 005.112-3.039 12.69 12.69 0 003.584-6.424c.405-1.841.386-3.866-.053-5.647-.197-.798-.253-.833-1.34-.833-1.861 0-3.413-.357-5.043-1.16a10.864 10.864 0 01-2.325-1.527c-.461-.387-.648-.454-.931-.331m.527 1.932c.322.251 1.002.701 1.409.933 1.732.988 3.711 1.555 5.786 1.657l.546.027.062.405c.217 1.399.184 2.872-.094 4.164a11.278 11.278 0 01-2.225 4.7c-.378.478-1.4 1.483-1.875 1.844a11.464 11.464 0 01-3.55 1.857l-.35.108-.35-.108c-1.245-.387-2.434-1.008-3.55-1.856-.472-.358-1.493-1.363-1.874-1.845-2.008-2.535-2.829-5.67-2.32-8.864l.064-.405.545-.027c2.402-.118 4.653-.855 6.573-2.152.257-.174.554-.386.66-.472.105-.087.215-.158.243-.159.028 0 .163.086.3.193m2.469 5.107c-.085.038-.851.773-1.949 1.869l-1.81 1.807-.83-.824c-.924-.917-1.011-.974-1.336-.876-.218.065-.533.38-.598.598-.103.342-.075.38 1.236 1.692 1.007 1.006 1.213 1.194 1.357 1.236.365.107.293.166 2.661-2.197 1.505-1.501 2.176-2.198 2.235-2.319.104-.214.081-.402-.076-.625-.239-.34-.604-.488-.89-.361" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">checkmarkShield</code>
    </div>
  </Card>
</CardGroup>

<CardGroup cols={4}>
  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M4.729 4.285c-.209.103-.435.36-.496.563-.106.354-.289.15 3.74 4.179 3.236 3.236 3.708 3.693 3.857 3.736.376.11.145.316 4.197-3.736 4.047-4.047 3.847-3.823 3.736-4.192-.065-.218-.38-.533-.598-.598-.367-.11-.179-.275-3.835 3.376L12 10.939 8.69 7.631C6.368 5.31 5.336 4.305 5.231 4.262c-.198-.083-.298-.078-.502.023m0 8c-.209.103-.435.36-.496.563-.106.354-.289.15 3.74 4.179 3.236 3.236 3.708 3.693 3.857 3.736.376.11.145.316 4.197-3.736 4.047-4.047 3.847-3.823 3.736-4.192-.065-.218-.38-.533-.598-.598-.367-.11-.179-.275-3.835 3.376L12 18.939l-3.31-3.308c-2.322-2.321-3.354-3.326-3.459-3.369-.198-.083-.298-.078-.502.023" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">chevronDoubleDown</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M4.729 8.285c-.209.103-.435.36-.496.563-.106.354-.289.15 3.74 4.179 3.236 3.236 3.708 3.693 3.857 3.736.376.11.145.316 4.197-3.736 4.047-4.047 3.847-3.823 3.736-4.192-.065-.218-.38-.533-.598-.598-.367-.11-.179-.275-3.835 3.376L12 14.939l-3.31-3.308C6.368 9.31 5.336 8.305 5.231 8.262c-.198-.083-.298-.078-.502.023" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">chevronDown</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path stroke="currentColor" d="M4.5 2.5L8 6L4.5 9.5" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">chevronRight</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M10.656 2.28a2.434 2.434 0 00-.867.263 2.734 2.734 0 00-1.351 1.463l-.085.224-.887.022c-.99.024-1.216.063-1.67.287A2.799 2.799 0 004.333 6.32c-.069.246-.073.598-.073 6.68s.004 6.434.073 6.68a2.823 2.823 0 001.987 1.987c.245.069.564.073 5.68.073 5.132 0 5.434-.004 5.68-.073a2.83 2.83 0 001.987-1.987c.069-.247.073-.579.073-6.68s-.004-6.433-.073-6.68a2.792 2.792 0 00-1.465-1.782c-.452-.223-.679-.262-1.669-.286l-.886-.022-.068-.185a2.803 2.803 0 00-1.377-1.507c-.5-.247-.642-.266-2.042-.28-.693-.006-1.37.003-1.504.022m2.881 1.597c.251.123.463.335.586.586.14.284.139.791-.001 1.076a1.306 1.306 0 01-.665.619c-.205.076-.306.082-1.457.082s-1.252-.006-1.457-.082a1.301 1.301 0 01-.664-.619c-.115-.236-.152-.655-.079-.885.079-.248.277-.528.466-.658.334-.23.358-.233 1.774-.224 1.287.008 1.302.009 1.497.105M8.419 5.95c.257.697.877 1.333 1.565 1.604.447.176.744.206 2.016.206 1.293 0 1.583-.031 2.047-.22.66-.268 1.27-.891 1.516-1.547l.088-.237.845.012c.799.011.854.017 1.041.109.251.123.463.335.586.586l.097.197v12.68l-.098.199a1.306 1.306 0 01-.665.619c-.218.081-.266.082-5.457.082s-5.239-.001-5.457-.082c-.267-.1-.53-.345-.665-.619l-.098-.199-.012-6.26c-.008-4.578.001-6.303.034-6.42a1.31 1.31 0 01.789-.839c.107-.04.377-.056.954-.058l.804-.003.07.19m6.301 5.353c-.088.038-.804.723-1.93 1.848L11 14.939l-.77-.768c-.49-.489-.824-.79-.919-.83a.755.755 0 00-.896.243.768.768 0 00-.062.759c.045.088.564.637 1.174 1.243.908.903 1.12 1.094 1.253 1.13.199.054.241.054.44 0 .137-.036.469-.35 2.273-2.149 1.162-1.159 2.147-2.174 2.19-2.255.14-.27.07-.685-.149-.877a.781.781 0 00-.814-.132" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">clipboardCheck</code>
    </div>
  </Card>
</CardGroup>

<CardGroup cols={4}>
  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M13.604 3.326a1.043 1.043 0 00-.209.194c-.085.117-4.155 16.361-4.155 16.582 0 .374.372.657.864.658.217 0 .411-.133.527-.361.11-.218 4.129-16.289 4.129-16.513 0-.331-.329-.6-.773-.635-.212-.016-.266-.006-.383.075M5.74 7.279c-.103.051-.934.855-2.307 2.23-2.362 2.368-2.303 2.296-2.196 2.661.043.148.338.458 2.236 2.357 2.404 2.404 2.332 2.344 2.692 2.236.218-.065.533-.38.598-.598.106-.354.133-.322-1.876-2.335L3.062 12l1.825-1.83c1.996-2.001 1.982-1.983 1.88-2.322-.091-.304-.499-.648-.77-.648a.775.775 0 00-.257.079m11.989.006c-.209.103-.435.36-.496.563-.102.339-.116.321 1.88 2.322L20.938 12l-1.825 1.83c-2.009 2.013-1.982 1.981-1.876 2.335.065.218.38.533.598.598.36.108.288.168 2.692-2.236 1.898-1.899 2.193-2.209 2.236-2.357.107-.365.166-.293-2.197-2.661-1.422-1.426-2.201-2.178-2.309-2.23-.207-.101-.316-.099-.528.006" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">code</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M4.617 4.281c-.589.073-1.099.331-1.552.783a2.742 2.742 0 00-.696 1.116l-.109.32v11l.109.32c.151.445.362.783.695 1.116.333.333.672.544 1.116.695l.32.109h3l.32-.109a2.95 2.95 0 00.978-.553L9 18.907l.202.171c.296.25.616.431.978.553l.32.109h3l.32-.109a2.95 2.95 0 00.978-.553l.202-.171.202.171c.296.25.616.431.978.553l.32.109h3l.32-.109a2.743 2.743 0 001.116-.695c.333-.333.544-.671.695-1.116l.109-.32v-11l-.109-.32a2.742 2.742 0 00-.696-1.116c-.487-.486-.967-.713-1.667-.789-.608-.066-2.656-.024-2.968.061a3.06 3.06 0 00-1.05.547l-.25.206-.25-.206a3.058 3.058 0 00-1.07-.553c-.225-.061-.45-.07-1.68-.07s-1.455.009-1.68.07c-.367.1-.778.312-1.07.553L9 5.089l-.25-.206a3.355 3.355 0 00-.53-.344c-.515-.253-.623-.268-2.04-.281-.704-.007-1.408.004-1.563.023m2.911 1.592c.239.118.481.36.599.599l.093.188v10.68l-.093.189c-.132.268-.416.534-.674.63-.2.075-.311.081-1.453.081-1.142 0-1.253-.006-1.453-.081-.258-.096-.542-.362-.674-.63l-.093-.189-.011-5.26c-.009-3.917 0-5.304.035-5.43.06-.221.261-.501.466-.652.313-.23.35-.235 1.77-.226 1.27.008 1.304.01 1.488.101m6 0c.239.118.481.36.599.599l.093.188v10.68l-.093.189c-.132.268-.416.534-.674.63-.2.075-.311.081-1.453.081-1.142 0-1.253-.006-1.453-.081-.258-.096-.542-.362-.674-.63l-.093-.189-.011-5.26c-.009-3.917 0-5.304.035-5.43.06-.221.261-.501.466-.652.313-.23.35-.235 1.77-.226 1.27.008 1.304.01 1.488.101m6 0c.239.118.481.36.599.599l.093.188v10.68l-.093.189c-.132.268-.416.534-.674.63-.2.075-.311.081-1.453.081-1.142 0-1.253-.006-1.453-.081-.258-.096-.542-.362-.674-.63l-.093-.189-.011-5.26c-.009-3.917 0-5.304.035-5.43.06-.221.261-.501.466-.652.313-.23.35-.235 1.77-.226 1.27.008 1.304.01 1.488.101" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">columns</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path fill="currentColor" d="M6.09375 6.1875C6.4375 6.4375 6.46875 6.90625 6.21875 7.25C5.125 8.53125 4.5 10.1875 4.5 12C4.5 13.8438 5.125 15.5 6.21875 16.7812C6.46875 17.0938 6.4375 17.5938 6.09375 17.8438C5.78125 18.125 5.3125 18.0625 5.0625 17.75C3.75 16.1875 3 14.1875 3 12C3 9.84375 3.75 7.84375 5.0625 6.28125C5.3125 5.96875 5.78125 5.90625 6.09375 6.1875ZM17.875 6.1875C18.1875 5.90625 18.6562 5.96875 18.9375 6.28125C20.2188 7.84375 21 9.84375 21 12C21 14.1875 20.2188 16.1875 18.9375 17.75C18.6562 18.0625 18.1875 18.0938 17.875 17.8438C17.5625 17.5938 17.5 17.0938 17.7812 16.7812C18.8438 15.5 19.5 13.8438 19.5 12C19.5 10.1875 18.8438 8.53125 17.7812 7.25C17.5 6.90625 17.5625 6.4375 17.875 6.1875ZM10.75 12C10.75 11.5625 10.9688 11.1562 11.375 10.9375C11.75 10.7188 12.2188 10.7188 12.625 10.9375C13 11.1562 13.25 11.5625 13.25 12C13.25 12.4688 13 12.875 12.625 13.0938C12.2188 13.3125 11.75 13.3125 11.375 13.0938C10.9688 12.875 10.75 12.4688 10.75 12ZM8.8125 9.5625C8.3125 10.25 8 11.0938 8 12C8 12.9375 8.3125 13.7812 8.8125 14.4688C9.09375 14.7812 9.03125 15.25 8.6875 15.5312C8.375 15.7812 7.90625 15.7188 7.65625 15.375C6.90625 14.4688 6.5 13.2812 6.5 12C6.5 10.75 6.90625 9.5625 7.65625 8.625C7.90625 8.3125 8.375 8.25 8.6875 8.5C9.03125 8.75 9.09375 9.21875 8.8125 9.5625ZM16.3438 8.625C17.0625 9.5625 17.5 10.75 17.5 12C17.5 13.2812 17.0625 14.4688 16.3438 15.375C16.0625 15.7188 15.5938 15.7812 15.2812 15.5312C14.9375 15.2812 14.9062 14.7812 15.1562 14.4688C15.6875 13.7812 16 12.9375 16 12C16 11.0938 15.6875 10.25 15.1562 9.5625C14.9062 9.21875 14.9375 8.75 15.2812 8.5C15.5938 8.25 16.0625 8.3125 16.3438 8.625Z" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">connection</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path fill="currentColor" d="M3.1875 4.1875L14.7812 13.25C14.9062 12.875 15 12.4375 15 12C15 11.0938 14.6875 10.25 14.1562 9.5625C13.9062 9.21875 13.9375 8.75 14.2812 8.5C14.5938 8.25 15.0625 8.3125 15.3438 8.625C16.0625 9.5625 16.5 10.75 16.5 12C16.5 12.8125 16.3125 13.5625 16.0312 14.2188L17.625 15.5C18.1875 14.4375 18.5 13.2812 18.5 12C18.5 10.1875 17.8438 8.53125 16.7812 7.25C16.5 6.90625 16.5625 6.4375 16.875 6.1875C17.1875 5.90625 17.6562 5.96875 17.9375 6.28125C19.2188 7.84375 20 9.84375 20 12C20 13.625 19.5625 15.125 18.8438 16.4375L21.6875 18.6875C22.0312 18.9375 22.0938 19.4062 21.8125 19.7188C21.5625 20.0625 21.0938 20.125 20.7812 19.8438L2.28125 5.34375C1.9375 5.09375 1.875 4.625 2.15625 4.3125C2.40625 3.96875 2.875 3.90625 3.1875 4.1875ZM5.84375 10.0625L7.09375 11.0312C7.03125 11.3438 7 11.6875 7 12C7 12.9375 7.3125 13.7812 7.8125 14.4688C8.09375 14.7812 8.03125 15.2812 7.6875 15.5312C7.375 15.7812 6.90625 15.7188 6.65625 15.375C5.90625 14.4688 5.5 13.2812 5.5 12C5.5 11.3125 5.625 10.6562 5.84375 10.0625ZM3.03125 7.8125L4.21875 8.78125C3.75 9.75 3.5 10.8438 3.5 12C3.5 13.8438 4.125 15.5 5.21875 16.7812C5.46875 17.0938 5.4375 17.5938 5.09375 17.8438C4.78125 18.0938 4.3125 18.0625 4.0625 17.75C2.75 16.1875 2 14.1875 2 12C2 10.5 2.34375 9.0625 3.03125 7.8125Z" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">connectionSlash</code>
    </div>
  </Card>
</CardGroup>

<CardGroup cols={4}>
  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path fill="currentColor" d="M5.695 5.316c-.332.194-.551.564-.476.802.058.181.521.668 3.076 3.232L10.936 12l-2.641 2.65c-1.452 1.458-2.734 2.763-2.847 2.902-.299.363-.315.512-.088.82.213.291.526.465.738.412.188-.047.616-.452 3.252-3.079L12 13.064l2.65 2.641c2.636 2.627 3.064 3.032 3.252 3.079.212.053.525-.121.738-.412.227-.308.211-.457-.088-.82-.113-.139-1.395-1.445-2.848-2.903l-2.642-2.651 2.502-2.509c3.167-3.177 3.235-3.251 3.236-3.483 0-.314-.497-.806-.814-.806-.053 0-.212.084-.352.186-.14.103-1.464 1.393-2.944 2.867l-2.689 2.681L9.33 8.277C7.862 6.815 6.557 5.532 6.431 5.426c-.299-.253-.451-.276-.736-.11" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">cross</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M11.78 2.295c-.309.1-2.254 1.105-2.376 1.227a.578.578 0 00-.147.616c.078.258.236.486.393.567.27.14.413.099 1.419-.401L12 3.842l.931.462c1.006.5 1.149.541 1.419.401.157-.081.315-.309.393-.567a.58.58 0 00-.149-.618c-.15-.15-2.31-1.231-2.514-1.258a.794.794 0 00-.3.033M4.843 5.74c-.554.275-1.03.5-1.057.5-.106 0-.383.221-.468.373-.089.158-.09.175-.082 1.583.004.783.025 1.491.047 1.572a.642.642 0 00.382.434c.216.071.669.033.804-.067.245-.183.27-.281.284-1.125.007-.424.02-.77.027-.77.008 0 .256.119.551.264.586.287.779.325 1.019.201.264-.136.485-.628.409-.909-.058-.215-.222-.361-.658-.583-.21-.106-.381-.203-.381-.215 0-.012.164-.102.364-.2.2-.098.424-.237.498-.308.246-.239.256-.534.032-.923-.133-.228-.301-.327-.558-.327-.182 0-.319.056-1.213.5m12.77-.422c-.144.087-.306.344-.369.583-.096.364.09.612.672.897.2.098.364.188.364.2 0 .012-.171.109-.381.215-.436.222-.6.368-.658.583-.076.281.145.773.409.909.24.124.433.086 1.019-.201.295-.145.543-.264.551-.264.007 0 .02.347.027.77.014.844.039.942.284 1.125.135.1.588.138.804.067a.642.642 0 00.382-.434c.022-.081.043-.789.047-1.572.008-1.408.007-1.425-.082-1.583-.085-.152-.362-.373-.468-.373-.027 0-.503-.225-1.057-.5-.894-.444-1.031-.5-1.213-.5a.65.65 0 00-.331.078m-8 4c-.248.151-.445.625-.37.893.067.245.263.385 1.151.827l.842.418.012 1.162c.011 1.078.018 1.172.092 1.298.148.251.262.304.66.304s.512-.053.66-.304c.074-.126.081-.22.092-1.298l.012-1.162.842-.418c.479-.238.899-.474.976-.549.246-.238.256-.532.031-.922-.132-.228-.299-.327-.557-.327-.18 0-.314.055-1.13.459l-.926.458-.926-.458c-.816-.404-.95-.459-1.13-.459a.65.65 0 00-.331.078m-5.968 4.497a.612.612 0 00-.363.415c-.055.2-.056 2.779 0 2.979.081.291.188.365 1.413.977 1.257.627 1.374.664 1.655.519.157-.081.315-.309.393-.567a.578.578 0 00-.147-.616c-.067-.067-.508-.315-.979-.552l-.857-.43v-1.08c0-1.138-.02-1.303-.179-1.492-.163-.193-.619-.268-.936-.153m16 0a.612.612 0 00-.363.415c-.024.087-.042.606-.042 1.23v1.08l-.857.43c-.471.237-.912.485-.979.552a.578.578 0 00-.147.616c.078.258.236.486.393.567.281.145.398.108 1.655-.519 1.225-.612 1.332-.686 1.413-.977.025-.089.042-.69.042-1.489 0-.799-.017-1.4-.042-1.489-.088-.318-.336-.474-.743-.468a1.247 1.247 0 00-.33.052m-8 4a.612.612 0 00-.363.415c-.023.083-.042.461-.042.84 0 .38-.007.69-.016.69-.009 0-.256-.117-.55-.26-.599-.292-.82-.33-1.061-.182-.247.151-.445.625-.371.892.068.247.247.374 1.174.837.486.243.989.506 1.116.585.197.121.268.142.468.142s.271-.021.468-.142c.127-.079.63-.342 1.116-.585.93-.464 1.107-.591 1.174-.84.072-.268-.124-.739-.371-.889-.241-.148-.462-.11-1.061.182-.294.143-.541.26-.55.26-.009 0-.016-.31-.016-.69 0-.743-.03-.924-.179-1.102-.163-.193-.619-.268-.936-.153" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">cubeTransparent</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M11.149 2.283C8.3 2.412 5.673 3.331 4.332 4.668a3.778 3.778 0 00-.978 1.574l-.094.298v10.92l.094.298c.433 1.381 1.673 2.444 3.714 3.184 2.96 1.074 6.904 1.074 9.864 0 1.794-.651 2.988-1.567 3.526-2.706.303-.641.282-.184.282-6.236 0-5.069-.005-5.437-.071-5.68-.543-1.987-3.007-3.45-6.629-3.938-.378-.051-2.038-.154-2.18-.135-.022.003-.342.019-.711.036m2.611 1.574c2.219.288 3.953.964 4.847 1.888.308.317.377.412.504.683.092.195.109.286.109.572 0 .464-.134.749-.564 1.199-.925.969-2.528 1.611-4.856 1.948-.72.104-2.88.104-3.6 0-2.536-.367-4.249-1.115-5.119-2.235a2.303 2.303 0 01-.192-.34C4.797 7.377 4.78 7.286 4.78 7s.017-.377.109-.572c.127-.271.196-.366.504-.683.919-.95 2.864-1.686 5.027-1.902.242-.024.503-.051.58-.06.347-.039 2.289.013 2.76.074M5.5 10.222c2.343 1.384 6.122 1.885 9.46 1.255 1.584-.299 3.166-.922 4.072-1.603l.212-.16-.012 1.313-.012 1.313-.126.267c-.255.537-.993 1.17-1.836 1.575-.988.474-1.982.752-3.458.965-.72.104-2.88.104-3.6 0-2.536-.367-4.249-1.115-5.119-2.235a2.303 2.303 0 01-.192-.34l-.109-.232-.012-1.313-.012-1.313.212.16c.117.087.356.244.532.348m0 5c2.343 1.384 6.122 1.885 9.46 1.255 1.584-.299 3.166-.922 4.072-1.603l.212-.16-.012 1.313-.012 1.313-.126.267c-.255.537-.993 1.17-1.836 1.575-.988.474-1.982.752-3.458.965-.72.104-2.88.104-3.6 0-2.536-.367-4.249-1.115-5.119-2.235a2.303 2.303 0 01-.192-.34l-.109-.232-.012-1.313-.012-1.313.212.16c.117.087.356.244.532.348" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">database</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }} width="16" height="16" viewBox="0 0 16 16" fill="none">
        <path fill="currentColor" d="M4.625 13C4.625 13.2109 4.78906 13.375 5 13.375H11C11.1875 13.375 11.375 13.2109 11.375 13V6.25H9.5C9.07812 6.25 8.75 5.92188 8.75 5.5V3.625H5C4.78906 3.625 4.625 3.8125 4.625 4V13ZM5 2.5H8.86719C9.26562 2.5 9.64062 2.66406 9.92188 2.94531L12.0547 5.07812C12.3359 5.35938 12.5 5.73438 12.5 6.13281V13C12.5 13.8438 11.8203 14.5 11 14.5H5C4.15625 14.5 3.5 13.8438 3.5 13V4C3.5 3.17969 4.15625 2.5 5 2.5ZM8.5625 7.1875V8.125H9.5C9.80469 8.125 10.0625 8.38281 10.0625 8.6875C10.0625 9.01562 9.80469 9.25 9.5 9.25H8.5625V10.1875C8.5625 10.5156 8.30469 10.75 8 10.75C7.67188 10.75 7.4375 10.5156 7.4375 10.1875V9.25H6.5C6.17188 9.25 5.9375 9.01562 5.9375 8.6875C5.9375 8.38281 6.17188 8.125 6.5 8.125H7.4375V7.1875C7.4375 6.88281 7.67188 6.625 8 6.625C8.30469 6.625 8.5625 6.88281 8.5625 7.1875ZM6.5 11.5H9.5C9.80469 11.5 10.0625 11.7578 10.0625 12.0625C10.0625 12.3906 9.80469 12.625 9.5 12.625H6.5C6.17188 12.625 5.9375 12.3906 5.9375 12.0625C5.9375 11.7578 6.17188 11.5 6.5 11.5Z" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">diff</code>
    </div>
  </Card>
</CardGroup>

<CardGroup cols={4}>
  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M6.617 2.283c-.583.068-1.098.327-1.552.781a2.742 2.742 0 00-.696 1.116l-.109.32v15l.109.32c.151.445.362.783.695 1.116.333.333.671.544 1.116.695l.32.109h11l.32-.109a2.736 2.736 0 001.116-.695c.333-.333.544-.671.695-1.116l.109-.32v-5.18c0-5.604.01-5.346-.213-5.759-.065-.12-1.079-1.163-3.003-3.089-2.728-2.732-2.92-2.916-3.174-3.034a2.145 2.145 0 00-.54-.161c-.341-.043-5.811-.038-6.193.006m8.853 4.248l2.771 2.771-.011 5.019-.01 5.019-.093.189c-.132.268-.416.534-.674.63-.213.08-.3.081-5.453.081-5.153 0-5.24-.001-5.453-.081-.258-.096-.542-.362-.674-.63l-.093-.189-.011-7.26c-.009-5.436 0-7.303.035-7.43.093-.34.433-.7.782-.828.127-.046.677-.057 3.134-.059l2.979-.003 2.771 2.771m-3.671 2.745c-.212.043-.39.165-.468.322-.062.125-.072.293-.083 1.389l-.012 1.247-1.248.013c-1.235.013-1.25.014-1.417.11-.221.126-.308.308-.31.643-.001.332.101.542.322.657.147.078.235.084 1.405.095l1.248.012.012 1.248c.011 1.17.017 1.258.095 1.405.115.22.325.323.657.323s.542-.103.657-.323c.078-.147.084-.235.095-1.405l.012-1.248 1.248-.012c1.17-.011 1.258-.017 1.405-.095.221-.115.323-.325.322-.657-.002-.335-.089-.517-.31-.643-.167-.096-.182-.097-1.417-.11l-1.248-.013-.012-1.247c-.011-1.102-.02-1.264-.083-1.39-.123-.246-.516-.391-.87-.321" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">documentAdd</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M9.617 2.283c-.583.068-1.098.327-1.552.781a2.681 2.681 0 00-.692 1.116c-.098.296-.107.385-.124 1.19l-.018.87h-.605c-1.362.001-1.915.179-2.561.824a2.742 2.742 0 00-.696 1.116l-.109.32v11l.109.32c.151.445.362.783.695 1.116.333.333.671.544 1.116.695l.32.109h9l.32-.109a2.736 2.736 0 001.116-.695c.336-.336.547-.676.691-1.116.098-.296.107-.385.124-1.186l.018-.865.865-.018c.801-.017.89-.026 1.186-.124.44-.144.78-.355 1.116-.691.333-.333.544-.671.695-1.116l.109-.32v-3.68c0-3.974.006-3.853-.213-4.259-.064-.118-.927-1.011-2.503-2.589-2.245-2.249-2.422-2.416-2.674-2.534a2.145 2.145 0 00-.54-.161c-.34-.043-4.811-.038-5.193.006m7.353 3.748l2.271 2.271-.01 3.519-.011 3.519-.093.189c-.132.268-.416.534-.674.63-.212.079-.302.081-4.453.081-4.151 0-4.241-.002-4.453-.081-.258-.096-.542-.362-.674-.63l-.093-.189-.011-5.26c-.009-3.917 0-5.304.035-5.43.093-.34.433-.7.782-.828.126-.046.607-.057 2.634-.059l2.479-.003 2.271 2.271M7.249 11.63l.011 3.87.109.32c.151.445.362.783.695 1.116.333.333.672.544 1.116.695l.32.109 2.872.012 2.873.011-.013.789c-.011.731-.019.802-.105.977-.132.268-.416.534-.674.63-.212.079-.302.081-4.453.081-4.151 0-4.241-.002-4.453-.081-.258-.096-.542-.362-.674-.63l-.093-.189-.011-5.26c-.009-3.917 0-5.304.035-5.43.093-.34.433-.7.782-.828.111-.041.364-.057.903-.059l.748-.003.012 3.87" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">documentCopy</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M11.701 3.285c-.334.048-.639.213-.932.502a1.65 1.65 0 00-.491 1.483c.069.401.204.66.498.954.294.294.553.429.954.498.326.056.699.004 1.023-.143.279-.127.699-.547.826-.826.295-.651.189-1.388-.275-1.902-.417-.46-.975-.658-1.603-.566m0 7c-.334.048-.639.213-.932.502a1.65 1.65 0 00-.491 1.483c.069.401.204.66.498.954.294.294.553.429.954.498.326.056.699.004 1.023-.143.279-.127.699-.547.826-.826.295-.651.189-1.388-.275-1.902-.417-.46-.975-.658-1.603-.566m0 7c-.334.048-.639.213-.932.502a1.65 1.65 0 00-.491 1.483c.069.401.204.66.498.954.294.294.553.429.954.498.326.056.699.004 1.023-.143.279-.127.699-.547.826-.826.295-.651.189-1.388-.275-1.902-.417-.46-.975-.658-1.603-.566" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">dotsVertical</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M11.799 3.276c-.212.043-.39.165-.468.322-.067.133-.072.465-.082 5.36l-.01 5.218-1.45-1.444c-1.597-1.592-1.607-1.599-1.954-1.495-.218.065-.533.38-.598.598-.107.356-.15.303 2.077 2.549a281.982 281.982 0 012.13 2.161c.061.069.199.15.33.195.223.075.229.075.452 0a.873.873 0 00.33-.195c.057-.065 1.016-1.037 2.13-2.161 2.227-2.246 2.184-2.193 2.077-2.549-.065-.218-.38-.533-.598-.598-.347-.104-.357-.097-1.954 1.495l-1.45 1.444-.01-5.218c-.01-4.917-.015-5.226-.082-5.361-.123-.246-.516-.391-.87-.321m-8 12c-.212.043-.39.165-.468.322-.061.123-.071.26-.071 1.002 0 .962.042 1.233.281 1.83a3.802 3.802 0 002.029 2.029c.746.299.333.281 6.43.281 6.097 0 5.684.018 6.43-.281a3.802 3.802 0 002.029-2.029c.239-.597.281-.868.281-1.83 0-.989-.022-1.079-.307-1.239-.232-.13-.634-.13-.866 0-.276.155-.301.251-.331 1.259-.015.502-.047.949-.075 1.04-.151.495-.64 1.084-1.101 1.327-.507.267-.177.253-6.06.253s-5.553.014-6.06-.253c-.461-.243-.95-.832-1.101-1.327-.028-.091-.06-.538-.075-1.04-.029-.996-.057-1.106-.315-1.249a1.077 1.077 0 00-.65-.095" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">download</code>
    </div>
  </Card>
</CardGroup>

<CardGroup cols={4}>
  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M18.617 2.283c-.336.04-.728.175-1.047.361-.173.101-1.338 1.241-4.737 4.635-4.063 4.057-4.512 4.518-4.552 4.672-.03.115-.041.681-.033 1.74.011 1.496.016 1.576.095 1.726a.59.59 0 00.24.24c.15.079.23.084 1.726.095 1.062.008 1.625-.003 1.74-.033.154-.04.617-.491 4.673-4.552 4.879-4.885 4.683-4.671 4.906-5.347.091-.277.105-.387.105-.82 0-.432-.014-.543-.105-.82-.425-1.294-1.642-2.06-3.011-1.897m.911 1.59c.239.117.481.359.599.599.134.272.133.785-.003 1.068-.076.161-.93 1.036-4.339 4.45l-4.244 4.25H9.76V12.459l4.21-4.203c2.316-2.313 4.268-4.244 4.338-4.292.226-.153.414-.203.732-.193.217.008.352.036.488.102m-13.911.41c-.585.07-1.098.328-1.552.781a2.742 2.742 0 00-.696 1.116l-.109.32v12l.109.32c.151.445.362.783.695 1.116.333.333.671.544 1.116.695l.32.109h12l.32-.109a2.736 2.736 0 001.116-.695c.333-.333.544-.671.695-1.116l.109-.32v-2.88c0-3.251.016-3.077-.307-3.259-.232-.13-.634-.13-.866 0-.321.18-.304.023-.327 3.179l-.02 2.8-.093.189c-.132.268-.416.534-.674.63-.213.08-.298.081-5.953.081s-5.74-.001-5.953-.081c-.258-.096-.542-.362-.674-.63l-.093-.189V6.66l.093-.188a1.43 1.43 0 01.599-.599l.188-.093 2.8-.02c2.732-.02 2.804-.022 2.957-.103.221-.115.323-.325.322-.657-.002-.335-.089-.517-.31-.643l-.169-.097-2.68-.006c-1.474-.003-2.808.01-2.963.029" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">edit</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }} viewBox="-2 -2 16 16">
        <path fill="currentColor" d="M11.25 1.125C11.25 0.91875 11.4188 0.75 11.625 0.75C11.8313 0.75 12 0.91875 12 1.125V5.25C12 6.28594 11.161 7.125 10.125 7.125H1.27974L3.63989 9.48516C3.78521 9.63047 3.78521 9.86953 3.63989 10.0148C3.49458 10.1602 3.25552 10.1602 3.11021 10.0148L0.110205 7.01484C-0.0351074 6.86953 -0.0351074 6.63047 0.110205 6.48516L3.11021 3.48516C3.25552 3.33984 3.49458 3.33984 3.63989 3.48516C3.78521 3.63047 3.78521 3.86953 3.63989 4.01484L1.27974 6.375H10.125C10.7461 6.375 11.25 5.87109 11.25 5.25V1.125Z" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">enter</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M11.36 4.282c-.968.056-1.812.218-2.724.519A10.771 10.771 0 003.009 9.12C2.436 9.986 1.72 11.585 1.72 12c0 .386.66 1.901 1.187 2.724 1.623 2.535 4.11 4.243 7.006 4.812.809.159 1.213.197 2.087.197.874 0 1.278-.038 2.087-.197a10.729 10.729 0 007.549-5.792c.332-.674.644-1.519.644-1.744 0-.225-.312-1.07-.644-1.744A10.839 10.839 0 0017.22 5.61c-1.729-.971-3.829-1.448-5.86-1.328m2.02 1.576c2.648.417 4.892 1.866 6.375 4.117.31.471.793 1.425.908 1.795.069.221.069.239 0 .46-.115.37-.598 1.324-.908 1.795-1.758 2.668-4.604 4.215-7.755 4.215-3.125 0-5.954-1.524-7.721-4.16-.299-.446-.78-1.384-.918-1.79-.097-.284-.097-.285-.025-.517.116-.373.598-1.326.909-1.798A9.915 9.915 0 016.18 7.816c.677-.555 1.791-1.188 2.62-1.491a9.982 9.982 0 012.24-.523c.48-.052 1.861-.02 2.34.056m-1.785 2.424c-.46.05-.773.142-1.215.357-1.06.514-1.74 1.36-2.03 2.521a4.03 4.03 0 000 1.68c.183.733.493 1.287 1.008 1.802.73.73 1.606 1.092 2.642 1.092 1.036 0 1.912-.362 2.642-1.092.73-.73 1.092-1.606 1.092-2.642 0-1.589-.926-2.924-2.441-3.515-.441-.173-1.171-.26-1.698-.203m.961 1.54c.378.089.707.281 1.024.598.454.454.659.945.659 1.58 0 .635-.205 1.126-.659 1.58-.456.456-.944.66-1.58.66-.636 0-1.124-.204-1.58-.66-.454-.454-.659-.945-.659-1.58 0-.635.205-1.126.659-1.58.31-.31.646-.509 1.005-.597a2.87 2.87 0 011.131-.001" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">eye</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M2.729 2.285c-.209.103-.435.36-.496.563-.109.363-.802-.363 9.24 9.679 10.078 10.078 9.314 9.35 9.692 9.236.218-.065.533-.38.598-.598.105-.35.108-.346-1.617-2.078l-1.566-1.572.199-.168c1.263-1.063 2.183-2.222 2.859-3.603.352-.718.642-1.507.642-1.747 0-.222-.314-1.072-.644-1.741a10.75 10.75 0 00-6.272-5.455c-1.11-.367-2.123-.527-3.344-.528-1.835-.002-3.376.362-4.931 1.165l-.389.2-1.66-1.657c-1.903-1.9-1.901-1.899-2.311-1.696m10.308 3.536c2.757.308 5.165 1.796 6.717 4.152.315.478.757 1.35.903 1.78l.094.276-.193.468a9.291 9.291 0 01-2.676 3.63l-.379.316-1.188-1.188-1.187-1.187.113-.184c.45-.735.62-1.869.408-2.724-.287-1.16-.969-2.007-2.029-2.521a3.21 3.21 0 00-1.255-.356 3.597 3.597 0 00-2.029.376l-.411.206-1.051-1.051c-.578-.578-1.042-1.058-1.032-1.068.094-.086.9-.419 1.403-.579 1.126-.36 2.525-.488 3.792-.346M3.7 8.275c-.184.115-.305.261-.679.821-.591.887-1.301 2.473-1.301 2.907 0 .383.663 1.902 1.187 2.721 1.789 2.795 4.549 4.529 7.893 4.961.644.083 2.042.062 2.72-.04.899-.136 1.1-.274 1.1-.759a.864.864 0 00-.1-.462c-.176-.342-.405-.402-1.08-.282-.478.084-1.891.121-2.385.062-2.848-.342-5.201-1.774-6.776-4.124-.3-.447-.78-1.384-.92-1.794l-.098-.288.094-.269c.172-.497.605-1.322 1.01-1.927.518-.772.551-.949.247-1.286-.274-.303-.652-.403-.912-.241m8.856 1.547c.378.089.707.281 1.024.598.454.454.659.945.659 1.58 0 .299-.08.732-.164.889-.04.075-.168-.042-1.538-1.412-.948-.948-1.481-1.509-1.457-1.533.076-.076.588-.179.9-.181.176-.001.435.025.576.059" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">eyeSlash</code>
    </div>
  </Card>
</CardGroup>

<CardGroup cols={4}>
  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path fill="currentColor" d="M5 18.5H11.875C12.25 19.0938 12.7188 19.5938 13.2812 20C13.1875 20 13.0938 20 13 20H5C3.875 20 3 19.125 3 18V6C3 4.90625 3.875 4 5 4H10.1562C10.6875 4 11.1875 4.21875 11.5625 4.59375L14.4062 7.4375C14.7812 7.8125 15 8.3125 15 8.84375V10.2188C14.4375 10.375 13.9375 10.5938 13.5 10.9062V9H11C10.4375 9 10 8.5625 10 8V5.5H5C4.71875 5.5 4.5 5.75 4.5 6V18C4.5 18.2812 4.71875 18.5 5 18.5ZM16.5 11C18.0938 11 19.5625 11.875 20.375 13.25C21.1875 14.6562 21.1875 16.375 20.375 17.75C19.5625 19.1562 18.0938 20 16.5 20C14.875 20 13.4062 19.1562 12.5938 17.75C11.7812 16.375 11.7812 14.6562 12.5938 13.25C13.4062 11.875 14.875 11 16.5 11ZM16.5 14C16.9062 14 17.25 13.6875 17.25 13.25C17.25 12.8438 16.9062 12.5 16.5 12.5C16.0625 12.5 15.75 12.8438 15.75 13.25C15.75 13.6875 16.0625 14 16.5 14ZM15.5 15.5C15.5 15.7812 15.7188 16 16 16V17.5C15.7188 17.5 15.5 17.75 15.5 18C15.5 18.2812 15.7188 18.5 16 18.5H16.5H17C17.25 18.5 17.5 18.2812 17.5 18C17.5 17.75 17.25 17.5 17 17.5V15.5C17 15.25 16.75 15 16.5 15H16C15.7188 15 15.5 15.25 15.5 15.5Z" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">fileCircleInfo</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path fill="currentColor" d="M8 18.5H16C16.25 18.5 16.5 18.2812 16.5 18V9H14C13.4375 9 13 8.5625 13 8V5.5H8C7.71875 5.5 7.5 5.75 7.5 6V18C7.5 18.2812 7.71875 18.5 8 18.5ZM8 4H13.1562C13.6875 4 14.1875 4.21875 14.5625 4.59375L17.4062 7.4375C17.7812 7.8125 18 8.3125 18 8.84375V18C18 19.125 17.0938 20 16 20H8C6.875 20 6 19.125 6 18V6C6 4.90625 6.875 4 8 4ZM11.0312 13.0312H11L10.0312 14L11 14.9688C11.3125 15.2812 11.3125 15.75 11 16.0312C10.7188 16.3438 10.25 16.3438 9.96875 16.0312L8.46875 14.5312C8.15625 14.25 8.15625 13.7812 8.46875 13.4688L9.96875 12C10.25 11.6875 10.7188 11.6875 11.0312 12C11.3125 12.2812 11.3125 12.75 11.0312 13.0312ZM14.0312 11.9688L15.5312 13.4688C15.8125 13.7812 15.8125 14.25 15.5312 14.5312L14.0312 16.0312C13.7188 16.3438 13.25 16.3438 12.9688 16.0312C12.6562 15.75 12.6562 15.2812 12.9688 14.9688L13.9375 14L12.9688 13.0312C12.6562 12.75 12.6562 12.2812 12.9688 11.9688C13.25 11.6875 13.7188 11.6875 14.0312 11.9688Z" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">fileCode</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path fill="currentColor" d="M5.28125 6H13.6875C14.4062 6 15 6.59375 15 7.3125C15 7.625 14.875 7.9375 14.6562 8.1875L11.75 11.3125V17C11.75 17.5625 11.2812 18 10.7188 18C10.5312 18 10.3125 17.9688 10.1562 17.8438L7.8125 16.2812C7.4375 16.0625 7.25 15.6562 7.25 15.25V11.3125L4.34375 8.1875C4.09375 7.9375 4 7.625 4 7.3125C4 6.59375 4.5625 6 5.28125 6ZM8.53125 10.5C8.65625 10.6562 8.75 10.8125 8.75 11V15.125L10.25 16.0938V11C10.25 10.8125 10.3125 10.6562 10.4375 10.5L13.2188 7.5H5.75L8.53125 10.5ZM14.75 16.25H19.25C19.6562 16.25 20 16.5938 20 17C20 17.4375 19.6562 17.75 19.25 17.75H14.75C14.3125 17.75 14 17.4375 14 17C14 16.5938 14.3125 16.25 14.75 16.25ZM14 12C14 11.5938 14.3125 11.25 14.75 11.25H19.25C19.6562 11.25 20 11.5938 20 12C20 12.4375 19.6562 12.75 19.25 12.75H14.75C14.3125 12.75 14 12.4375 14 12ZM16.75 6.25H19.25C19.6562 6.25 20 6.59375 20 7C20 7.4375 19.6562 7.75 19.25 7.75H16.75C16.3125 7.75 16 7.4375 16 7C16 6.59375 16.3125 6.25 16.75 6.25Z" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">filterList</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M4.617 4.283c-.584.069-1.098.328-1.552.781a2.742 2.742 0 00-.696 1.116l-.109.32v11l.109.32c.151.445.362.783.695 1.116.333.333.671.544 1.116.695l.32.109h15l.32-.109a2.736 2.736 0 001.116-.695c.333-.333.544-.671.695-1.116l.109-.32v-9l-.109-.32a2.742 2.742 0 00-.696-1.116c-.472-.471-.961-.709-1.606-.783-.2-.023-1.558-.04-3.189-.041h-2.841l-.919-.923c-.506-.507-.974-.953-1.04-.99-.109-.061-.398-.067-3.28-.072-1.738-.003-3.288.009-3.443.028m7.003 2.4c.506.507.974.953 1.04.99.109.061.423.069 3.4.087l3.28.02.188.093c.239.118.481.36.599.599l.093.188v8.68l-.093.189c-.132.268-.416.534-.674.63-.214.08-.294.081-7.453.081-7.159 0-7.239-.001-7.453-.081-.258-.096-.542-.362-.674-.63l-.093-.189-.011-5.26c-.009-3.917 0-5.304.035-5.43.093-.34.433-.7.782-.828.127-.046.677-.057 3.134-.059l2.981-.003.919.923" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">folder</code>
    </div>
  </Card>
</CardGroup>

<CardGroup cols={4}>
  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M11.7 2.281c-.347.04-.563.107-.877.271-.57.299-.963.779-1.186 1.451-.154.465-.29.649-.574.782-.312.145-.589.131-.93-.048-.402-.212-.64-.292-.995-.338-.905-.115-1.833.324-2.35 1.112-.207.317-.29.518-.37.896-.115.551-.045.982.267 1.643.192.406.204.451.185.666-.042.458-.279.733-.764.885-1.051.329-1.676 1.038-1.827 2.071a2.503 2.503 0 00.395 1.717c.332.484.728.774 1.328.973.603.201.824.435.868.922.019.215.007.26-.185.666-.312.661-.382 1.092-.267 1.643.08.378.163.579.37.896.435.664 1.303 1.151 2.051 1.151.329 0 .78-.12 1.159-.308.473-.235.722-.266 1.036-.131.301.13.445.32.603.795.073.22.195.496.271.612a2.487 2.487 0 003.452.731c.501-.326.798-.723 1.003-1.343.158-.475.302-.665.603-.795.31-.133.558-.102 1.039.133.384.187.833.306 1.156.306.287 0 .738-.12 1.078-.286a2.576 2.576 0 001.341-1.747c.117-.569.049-.992-.265-1.657-.192-.406-.204-.451-.185-.666.044-.487.265-.721.868-.922.618-.204 1.016-.502 1.341-1.002a2.483 2.483 0 00-.385-3.179c-.268-.248-.626-.444-1.06-.58-.485-.152-.722-.427-.764-.885-.019-.215-.007-.26.185-.666.413-.873.423-1.504.039-2.289-.302-.615-.935-1.135-1.574-1.294-.389-.096-.581-.111-.918-.068-.355.046-.593.126-.995.338-.341.179-.618.193-.93.048-.284-.133-.42-.317-.574-.782a3.404 3.404 0 00-.288-.637c-.503-.769-1.435-1.195-2.375-1.085m.624 1.525a.977.977 0 01.476.364c.041.067.128.276.194.465.171.49.303.705.628 1.028.213.21.372.324.622.446.428.208.687.269 1.136.267.428-.002.698-.074 1.197-.32.546-.269.886-.236 1.244.123.359.358.392.698.123 1.244-.252.51-.319.768-.32 1.217-.002 1.089.653 1.987 1.721 2.359.438.153.574.232.705.408.129.173.19.362.19.584 0 .477-.26.806-.76.963-1.161.366-1.858 1.268-1.856 2.406.001.449.068.707.32 1.217.139.281.176.4.176.56-.001.398-.31.827-.674.937-.295.088-.485.059-.88-.133-.49-.239-.78-.31-1.246-.307a2.375 2.375 0 00-1.698.7c-.321.316-.44.51-.623 1.015-.172.473-.228.569-.408.703-.438.325-1.125.215-1.391-.222a3.673 3.673 0 01-.201-.485c-.369-1.06-1.243-1.705-2.319-1.711-.466-.003-.756.068-1.246.307-.56.272-.895.24-1.255-.12-.359-.358-.392-.698-.123-1.244.252-.51.319-.768.32-1.217.002-1.134-.699-2.042-1.856-2.406-.5-.157-.76-.486-.76-.963 0-.222.061-.411.19-.584.131-.176.267-.255.705-.408 1.068-.372 1.723-1.27 1.721-2.359-.001-.449-.068-.707-.32-1.217-.269-.546-.236-.886.123-1.244.358-.359.698-.392 1.244-.123.51.252.768.319 1.217.32 1.082.002 1.984-.651 2.354-1.705.068-.193.151-.403.185-.469.074-.144.293-.324.471-.389.169-.061.502-.065.674-.007m-.729 4.476c-.46.05-.773.142-1.215.357-1.06.514-1.74 1.36-2.03 2.521a4.03 4.03 0 000 1.68c.183.733.493 1.287 1.008 1.802.73.73 1.606 1.092 2.642 1.092 1.036 0 1.912-.362 2.642-1.092.73-.73 1.092-1.606 1.092-2.642 0-1.589-.926-2.924-2.441-3.515-.441-.173-1.171-.26-1.698-.203m.961 1.54c.378.089.707.281 1.024.598.454.454.659.945.659 1.58 0 .635-.205 1.126-.659 1.58-.456.456-.944.66-1.58.66-.636 0-1.124-.204-1.58-.66-.454-.454-.659-.945-.659-1.58 0-.635.205-1.126.659-1.58.31-.31.646-.509 1.005-.597a2.87 2.87 0 011.131-.001" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">gear</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path fill="currentColor" d="M9.40625 16.4375C9.40625 16.5 9.34375 16.5312 9.25 16.5312C9.15625 16.5625 9.09375 16.5 9.09375 16.4375C9.09375 16.375 9.15625 16.3125 9.25 16.3125C9.34375 16.3125 9.40625 16.375 9.40625 16.4375ZM8.4375 16.2812C8.46875 16.2188 8.5625 16.1875 8.65625 16.2188C8.75 16.25 8.78125 16.3125 8.78125 16.375C8.75 16.4375 8.65625 16.4688 8.59375 16.4375C8.5 16.4375 8.4375 16.3438 8.4375 16.2812ZM9.84375 16.25C9.90625 16.2188 10 16.2812 10 16.3438C10.0312 16.4062 9.96875 16.4375 9.875 16.4688C9.78125 16.5 9.6875 16.4688 9.6875 16.4062C9.6875 16.3125 9.75 16.25 9.84375 16.25ZM11.875 4.25C16.2188 4.25 19.75 7.5625 19.75 11.875C19.75 15.3438 17.625 18.3125 14.5 19.3438C14.0938 19.4375 13.9375 19.1875 13.9375 18.9688C13.9375 18.7188 13.9688 17.4062 13.9688 16.375C13.9688 15.625 13.7188 15.1562 13.4375 14.9062C15.1875 14.7188 17.0312 14.4688 17.0312 11.4688C17.0312 10.5938 16.7188 10.1875 16.2188 9.625C16.2812 9.40625 16.5625 8.59375 16.125 7.5C15.4688 7.28125 13.9688 8.34375 13.9688 8.34375C13.3438 8.15625 12.6875 8.09375 12 8.09375C11.3438 8.09375 10.6875 8.15625 10.0625 8.34375C10.0625 8.34375 8.53125 7.3125 7.90625 7.5C7.46875 8.59375 7.71875 9.40625 7.8125 9.625C7.3125 10.1875 7.0625 10.5938 7.0625 11.4688C7.0625 14.4688 8.84375 14.7188 10.5938 14.9062C10.3438 15.125 10.1562 15.4688 10.0938 15.9688C9.625 16.1875 8.5 16.5312 7.8125 15.3125C7.375 14.5625 6.59375 14.5 6.59375 14.5C5.84375 14.5 6.5625 15 6.5625 15C7.0625 15.2188 7.40625 16.125 7.40625 16.125C7.875 17.5312 10.0625 17.0625 10.0625 17.0625C10.0625 17.7188 10.0625 18.7812 10.0625 19C10.0625 19.1875 9.9375 19.4375 9.53125 19.375C6.40625 18.3125 4.25 15.3438 4.25 11.875C4.25 7.5625 7.5625 4.25 11.875 4.25ZM7.28125 15.0312C7.3125 15 7.375 15.0312 7.4375 15.0625C7.5 15.125 7.5 15.2188 7.46875 15.25C7.40625 15.2812 7.34375 15.25 7.28125 15.2188C7.25 15.1562 7.21875 15.0625 7.28125 15.0312ZM6.9375 14.7812C6.96875 14.75 7 14.75 7.0625 14.7812C7.125 14.8125 7.15625 14.8438 7.15625 14.875C7.125 14.9375 7.0625 14.9375 7 14.9062C6.9375 14.875 6.90625 14.8438 6.9375 14.7812ZM7.9375 15.9062C8 15.8438 8.09375 15.875 8.15625 15.9375C8.21875 16 8.21875 16.0938 8.1875 16.125C8.15625 16.1875 8.0625 16.1562 8 16.0938C7.90625 16.0312 7.90625 15.9375 7.9375 15.9062ZM7.59375 15.4375C7.65625 15.4062 7.71875 15.4375 7.78125 15.5C7.8125 15.5625 7.8125 15.6562 7.78125 15.6875C7.71875 15.7188 7.65625 15.6875 7.59375 15.625C7.53125 15.5625 7.53125 15.4688 7.59375 15.4375Z" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">github</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }} height="2168" preserveAspectRatio="xMidYMid" width="2500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 221.4" strokeWidth="10">
        <path stroke="currentColor" d="M83.3 0h89L256 144.3h-89.2z" />

        <path stroke="currentColor" d="M256 144.3l-44.6 77.1h-167l44.7-77.1z" />

        <path stroke="currentColor" d="M44.4 221.4L0 144.3 83.3 0 128 77.3z" />

        <path stroke="currentColor" d="M44.4 221.4l83.1-77.1H89.1zM256 144.3h-89.1l-19.6-33.8zM83.3 0L109 110l19-32.7z" opacity=".1" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">googleDrive</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M5.617 3.283c-.583.068-1.098.327-1.552.781a2.721 2.721 0 00-.696 1.116l-.109.32v3l.109.32c.151.444.362.783.695 1.116.333.333.672.544 1.116.695l.32.109h3l.32-.109a2.743 2.743 0 001.116-.695c.333-.333.544-.672.695-1.116l.109-.32v-3l-.109-.32a2.721 2.721 0 00-.696-1.116c-.472-.471-.961-.709-1.606-.783-.41-.047-2.303-.045-2.712.002m10 0c-.583.068-1.098.327-1.552.781a2.721 2.721 0 00-.696 1.116l-.109.32v3l.109.32c.151.444.362.783.695 1.116.333.333.672.544 1.116.695l.32.109h3l.32-.109a2.743 2.743 0 001.116-.695c.333-.333.544-.672.695-1.116l.109-.32v-3l-.109-.32a2.721 2.721 0 00-.696-1.116c-.472-.471-.961-.709-1.606-.783-.41-.047-2.303-.045-2.712.002m-7.089 1.59c.239.118.481.36.599.599.092.185.093.208.093 1.528 0 1.322-.001 1.342-.093 1.529-.132.268-.416.534-.674.63-.2.075-.311.081-1.453.081-1.142 0-1.253-.006-1.453-.081-.258-.096-.542-.362-.674-.63-.091-.184-.093-.223-.105-1.449-.008-.882.002-1.311.035-1.43.062-.221.262-.501.467-.652.313-.23.35-.235 1.77-.226 1.27.008 1.304.01 1.488.101m10 0c.239.118.481.36.599.599.092.185.093.208.093 1.528 0 1.322-.001 1.342-.093 1.529-.132.268-.416.534-.674.63-.2.075-.311.081-1.453.081-1.142 0-1.253-.006-1.453-.081-.258-.096-.542-.362-.674-.63-.091-.184-.093-.223-.105-1.449-.008-.882.002-1.311.035-1.43.062-.221.262-.501.467-.652.313-.23.35-.235 1.77-.226 1.27.008 1.304.01 1.488.101m-12.911 8.41c-.583.068-1.098.327-1.552.781a2.721 2.721 0 00-.696 1.116l-.109.32v3l.109.32c.151.444.362.783.695 1.116.333.333.672.544 1.116.695l.32.109h3l.32-.109a2.743 2.743 0 001.116-.695c.333-.333.544-.672.695-1.116l.109-.32v-3l-.109-.32a2.721 2.721 0 00-.696-1.116c-.472-.471-.961-.709-1.606-.783-.41-.047-2.303-.045-2.712.002m10 0c-.583.068-1.098.327-1.552.781a2.721 2.721 0 00-.696 1.116l-.109.32v3l.109.32c.151.444.362.783.695 1.116.333.333.672.544 1.116.695l.32.109h3l.32-.109a2.743 2.743 0 001.116-.695c.333-.333.544-.672.695-1.116l.109-.32v-3l-.109-.32a2.721 2.721 0 00-.696-1.116c-.472-.471-.961-.709-1.606-.783-.41-.047-2.303-.045-2.712.002m-7.089 1.59c.239.118.481.36.599.599.092.185.093.208.093 1.528 0 1.322-.001 1.342-.093 1.529-.132.268-.416.534-.674.63-.2.075-.311.081-1.453.081-1.142 0-1.253-.006-1.453-.081-.258-.096-.542-.362-.674-.63-.091-.184-.093-.223-.105-1.449-.008-.882.002-1.311.035-1.43.062-.221.262-.501.467-.652.313-.23.35-.235 1.77-.226 1.27.008 1.304.01 1.488.101m10 0c.239.118.481.36.599.599.092.185.093.208.093 1.528 0 1.322-.001 1.342-.093 1.529-.132.268-.416.534-.674.63-.2.075-.311.081-1.453.081-1.142 0-1.253-.006-1.453-.081-.258-.096-.542-.362-.674-.63-.091-.184-.093-.223-.105-1.449-.008-.882.002-1.311.035-1.43.062-.221.262-.501.467-.652.313-.23.35-.235 1.77-.226 1.27.008 1.304.01 1.488.101" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">grid</code>
    </div>
  </Card>
</CardGroup>

<CardGroup cols={4}>
  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path fill="currentColor" d="M5.5 7.34375C6.9375 5.34375 9.3125 4 12 4C16.4062 4 20 7.59375 20 12C20 16.4375 16.4062 20 12 20C10.3438 20 8.84375 19.5312 7.5625 18.6875C7.21875 18.4688 7.125 18 7.375 17.6562C7.59375 17.3125 8.0625 17.2188 8.40625 17.4375C9.4375 18.125 10.6562 18.5 12 18.5C15.5625 18.5 18.5 15.5938 18.5 12C18.5 8.4375 15.5625 5.5 12 5.5C9.6875 5.5 7.65625 6.71875 6.5 8.5H8.25C8.65625 8.5 9 8.84375 9 9.25C9 9.6875 8.65625 10 8.25 10H4.75C4.3125 10 4 9.6875 4 9.25V5.75C4 5.34375 4.3125 5 4.75 5C5.15625 5 5.5 5.34375 5.5 5.75V7.34375ZM12 8H11.9688C12.4062 8 12.7188 8.34375 12.7188 8.75V11.7188L14.75 13.75C15.0625 14.0312 15.0625 14.5 14.75 14.7812C14.4688 15.0938 14 15.0938 13.7188 14.7812L11.4688 12.5312C11.3125 12.4062 11.25 12.2188 11.25 12V8.75C11.25 8.34375 11.5625 8 12 8Z" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">history</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path fill="currentColor" d="M6.75 4H17.25C17.6562 4 18 4.34375 18 4.75C18 5.1875 17.6562 5.5 17.25 5.5H17V6.09375C17 7.375 16.5 8.5625 15.5938 9.46875L13.0312 12L15.5938 14.5625C16.5 15.4375 17 16.6562 17 17.9062V18.5H17.25C17.6562 18.5 18 18.8438 18 19.25C18 19.6875 17.6562 20 17.25 20H6.75C6.3125 20 6 19.6875 6 19.25C6 18.8438 6.3125 18.5 6.75 18.5H7V17.9062C7 16.6562 7.5 15.4375 8.375 14.5625L10.9375 12L8.375 9.46875C7.5 8.5625 7 7.375 7 6.09375V5.5H6.75C6.3125 5.5 6 5.1875 6 4.75C6 4.34375 6.3125 4 6.75 4ZM12 13.0625L9.4375 15.625C8.84375 16.2188 8.5 17.0625 8.5 17.9062V18.5H15.5V17.9062C15.5 17.0625 15.1562 16.2188 14.5312 15.625L12 13.0625ZM12 10.9375V10.9688L14.5312 8.40625C15.1562 7.78125 15.5 6.96875 15.5 6.09375V5.5H8.5V6.09375C8.5 6.96875 8.84375 7.78125 9.4375 8.40625L12 10.9375Z" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">hourglass</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M11.32 2.28A9.74 9.74 0 003.258 7.7c-.46.94-.762 1.914-.924 2.98-.097.636-.097 2.004 0 2.64.446 2.941 2.052 5.409 4.533 6.968 1.075.676 2.441 1.17 3.813 1.378.636.097 2.004.097 2.64 0 2.1-.319 3.932-1.206 5.405-2.618 1.601-1.534 2.6-3.479 2.941-5.728.097-.636.097-2.004 0-2.64-.443-2.919-2.04-5.389-4.49-6.941-.824-.522-2.118-1.053-3.056-1.253a10.872 10.872 0 00-2.8-.206m2 1.578a8.277 8.277 0 014.628 2.435c1.176 1.231 1.913 2.713 2.2 4.423.1.593.1 1.975 0 2.568-.612 3.649-3.463 6.426-7.08 6.895-3.771.489-7.369-1.653-8.767-5.219a9.164 9.164 0 01-.449-1.676c-.1-.593-.1-1.975 0-2.568.299-1.783 1.066-3.282 2.324-4.54 1.389-1.388 2.977-2.138 5.064-2.391.313-.038 1.715.011 2.08.073m-1.521 3.418c-.37.075-.536.299-.538.724-.002.508.236.74.759.74.325 0 .535-.102.65-.314.094-.173.094-.679 0-.852-.129-.24-.514-.371-.871-.298m-1 3.999c-.371.078-.536.3-.538.725-.002.486.213.709.719.75l.257.021.011 1.744c.012 1.674.015 1.751.095 1.902.15.287.278.323 1.157.323.69 0 .774-.008.917-.083.221-.115.323-.325.322-.657-.002-.482-.202-.691-.709-.743l-.267-.028-.011-1.744c-.014-1.978-.009-1.95-.323-2.127-.157-.089-.216-.096-.829-.104-.363-.005-.723.004-.801.021" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">info</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }} xmlns="http://www.w3.org/2000/svg">
        <path fill="currentColor" d="M10.5 9.5C10.5 9.84375 10.5312 10.1562 10.5938 10.4688C10.6562 10.7188 10.5938 10.9688 10.4062 11.1562L5.5 16.0625V18.5H7.5V17.25C7.5 16.8438 7.8125 16.5 8.25 16.5H9.5V15.25C9.5 14.8438 9.8125 14.5 10.25 14.5H11.9375L12.8438 13.5938C13.0312 13.4062 13.2812 13.3438 13.5312 13.4062C13.8438 13.4688 14.1562 13.5 14.5 13.5C16.6875 13.5 18.5 11.7188 18.5 9.5C18.5 7.3125 16.6875 5.5 14.5 5.5C12.2812 5.5 10.5 7.3125 10.5 9.5ZM14.5 4C17.5312 4 20 6.46875 20 9.5C20 12.5625 17.5312 15 14.5 15C14.1875 15 13.9062 15 13.625 14.9375L12.7812 15.7812C12.625 15.9375 12.4375 16 12.25 16H11V17.25C11 17.6875 10.6562 18 10.25 18H9V19.25C9 19.6875 8.65625 20 8.25 20H4.75C4.3125 20 4 19.6875 4 19.25V15.75C4 15.5625 4.0625 15.375 4.21875 15.2188L9.0625 10.375C9 10.0938 9 9.8125 9 9.5C9 6.46875 11.4375 4 14.5 4ZM15.5 9.5C14.9375 9.5 14.5 9.0625 14.5 8.5C14.5 7.96875 14.9375 7.5 15.5 7.5C16.0312 7.5 16.5 7.96875 16.5 8.5C16.5 9.0625 16.0312 9.5 15.5 9.5Z" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">key</code>
    </div>
  </Card>
</CardGroup>

<CardGroup cols={4}>
  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M12.807 2.279a.822.822 0 00-.27.147c-.075.063-2.189 2.624-4.697 5.693-3.505 4.286-4.572 5.616-4.605 5.738-.062.231.013.444.227.651a.98.98 0 00.326.209c.101.028 1.218.043 3.301.043h3.149l.011 3.25c.011 3.196.012 3.253.094 3.407.112.215.326.323.637.321a.874.874 0 00.37-.071c.085-.045 1.711-2.002 4.745-5.71 3.718-4.544 4.625-5.675 4.665-5.816.081-.292-.064-.585-.392-.789l-.148-.092-3.229-.011-3.229-.011-.011-3.249c-.01-3.026-.016-3.259-.082-3.392-.123-.247-.531-.397-.862-.318m-.464 8.138a.59.59 0 00.24.24c.153.081.225.083 2.983.103l2.827.02-3.315 4.052-3.316 4.052-.011-2.572c-.012-2.906.002-2.769-.322-2.955l-.169-.097-2.826-.02-2.827-.02 3.307-4.041 3.306-4.041.02 2.561c.019 2.49.022 2.565.103 2.718" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">lightningBolt</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M16.527 2.284c-.729.065-1.519.349-2.18.782-.335.22-1.911 1.757-2.005 1.956a.57.57 0 00.017.535c.102.202.376.433.575.487.299.08.438-.011 1.306-.864.975-.958 1.205-1.118 1.868-1.309.45-.129 1.334-.129 1.784 0a3.325 3.325 0 012.237 2.237c.129.45.129 1.334 0 1.784a2.929 2.929 0 01-.47.968c-.095.132-1.204 1.266-2.466 2.521-2.372 2.358-2.447 2.425-2.995 2.646-.552.223-1.462.274-2.058.116a3.512 3.512 0 01-1.1-.561c-.552-.455-.639-.512-.813-.531-.449-.051-.94.503-.822.928.087.315.796.925 1.46 1.256.713.356 1.32.497 2.135.497 1.04 0 1.942-.286 2.76-.875.387-.278 4.876-4.773 5.131-5.137.562-.803.841-1.705.841-2.72 0-1.34-.488-2.488-1.45-3.413A4.65 4.65 0 0017.4 2.281a9.017 9.017 0 00-.48-.035c-.011.003-.188.02-.393.038m-6 6c-.727.065-1.515.347-2.18.781-.375.245-4.88 4.725-5.204 5.175-.589.818-.876 1.723-.876 2.76 0 1.292.439 2.372 1.343 3.306.914.943 2.062 1.426 3.39 1.426 1.016 0 1.92-.28 2.72-.842.324-.227 1.857-1.74 1.939-1.914.152-.32-.014-.693-.427-.954-.144-.091-.418-.092-.592-.002-.076.039-.5.425-.94.856-.812.794-1.028.96-1.5 1.15-.7.283-1.7.283-2.4 0a3.064 3.064 0 01-.988-.642c-.483-.45-.774-.91-.941-1.492-.129-.45-.129-1.334 0-1.784.108-.375.239-.646.471-.968.21-.293 4.606-4.681 4.858-4.849.287-.192.572-.323.908-.42.259-.074.411-.089.892-.089.481 0 .633.015.892.089.509.146.854.344 1.316.754.392.347.611.409.909.256.34-.173.559-.567.479-.859-.137-.495-1.389-1.345-2.356-1.6-.299-.079-1.22-.202-1.32-.176-.011.003-.188.02-.393.038" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">link</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path fill="currentColor" d="M4.77419 5H6.32258C6.74194 5 7.09677 5.35484 7.09677 5.77419V7.32258C7.09677 7.77419 6.74194 8.09677 6.32258 8.09677H4.77419C4.32259 8.09677 4 7.77419 4 7.32258V5.77419C4 5.35484 4.32259 5 4.77419 5ZM9.41935 5.77419H19.2258C19.6452 5.77419 20 6.12903 20 6.54839C20 6.99999 19.6452 7.32258 19.2258 7.32258H9.41935C8.96775 7.32258 8.64516 6.99999 8.64516 6.54839C8.64516 6.12903 8.96775 5.77419 9.41935 5.77419ZM9.41935 10.9355H19.2258C19.6452 10.9355 20 11.2903 20 11.7097C20 12.1613 19.6452 12.4839 19.2258 12.4839H9.41935C8.96775 12.4839 8.64516 12.1613 8.64516 11.7097C8.64516 11.2903 8.96775 10.9355 9.41935 10.9355ZM9.41935 16.0968H19.2258C19.6452 16.0968 20 16.4516 20 16.871C20 17.3225 19.6452 17.6452 19.2258 17.6452H9.41935C8.96775 17.6452 8.64516 17.3225 8.64516 16.871C8.64516 16.4516 8.96775 16.0968 9.41935 16.0968ZM4 10.9355C4 10.5161 4.32259 10.1613 4.77419 10.1613H6.32258C6.74194 10.1613 7.09677 10.5161 7.09677 10.9355V12.4839C7.09677 12.9355 6.74194 13.2581 6.32258 13.2581H4.77419C4.32259 13.2581 4 12.9355 4 12.4839V10.9355ZM4.77419 15.3226H6.32258C6.74194 15.3226 7.09677 15.6774 7.09677 16.0968V17.6452C7.09677 18.0967 6.74194 18.4194 6.32258 18.4194H4.77419C4.32259 18.4194 4 18.0967 4 17.6452V16.0968C4 15.6774 4.32259 15.3226 4.77419 15.3226Z" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">list</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path fill="currentColor" d="M10.8438 7.5H16.5V6.5H10.8438L10.3438 7L10.8438 7.5ZM8.59375 7.375C8.40625 7.1875 8.40625 6.84375 8.59375 6.65625L9.9375 5.3125C10.125 5.125 10.375 5 10.6562 5H17C17.5312 5 18 5.46875 18 6V8C18 8.5625 17.5312 9 17 9H10.6562C10.375 9 10.125 8.90625 9.9375 8.71875L8.59375 7.375ZM6 8C5.4375 8 5 7.5625 5 7C5 6.46875 5.4375 6 6 6C6.53125 6 7 6.46875 7 7C7 7.5625 6.53125 8 6 8ZM6 13C5.4375 13 5 12.5625 5 12C5 11.4688 5.4375 11 6 11C6.53125 11 7 11.4688 7 12C7 12.5625 6.53125 13 6 13ZM5 17C5 16.4688 5.4375 16 6 16C6.53125 16 7 16.4688 7 17C7 17.5625 6.53125 18 6 18C5.4375 18 5 17.5625 5 17ZM10.8438 17.5H16.5V16.5H10.8438L10.3438 17L10.8438 17.5ZM8.59375 17.375C8.40625 17.1875 8.40625 16.8438 8.59375 16.6562L9.9375 15.3125C10.125 15.125 10.375 15 10.6562 15H17C17.5312 15 18 15.4688 18 16V18C18 18.5625 17.5312 19 17 19H10.6562C10.375 19 10.125 18.9062 9.9375 18.7188L8.59375 17.375ZM10.3438 12L10.8438 12.5H18.5V11.5H10.8438L10.3438 12ZM9.9375 13.7188L8.59375 12.375C8.40625 12.1875 8.40625 11.8438 8.59375 11.6562L9.9375 10.3125C10.125 10.125 10.375 10 10.6562 10H19C19.5312 10 20 10.4688 20 11V13C20 13.5625 19.5312 14 19 14H10.6562C10.375 14 10.125 13.9062 9.9375 13.7188Z" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">listTimeline</code>
    </div>
  </Card>
</CardGroup>

<CardGroup cols={4}>
  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M11.544 2.283c-1.955.173-3.655 1.626-4.14 3.538-.137.543-.163.977-.164 2.729v1.69h-.61c-1.366.001-1.918.178-2.565.824a2.742 2.742 0 00-.696 1.116l-.109.32v7l.109.32c.151.445.362.783.695 1.116.333.333.671.544 1.116.695l.32.109h13l.32-.109a2.736 2.736 0 001.116-.695c.333-.333.544-.671.695-1.116l.109-.32v-7l-.109-.32a2.742 2.742 0 00-.696-1.116c-.647-.646-1.199-.823-2.565-.824h-.61V8.55c-.001-.93-.019-1.852-.041-2.05a4.774 4.774 0 00-3.563-4.101c-.244-.062-1.152-.175-1.236-.153-.011.003-.18.019-.376.037m1.37 1.595c.508.146.893.372 1.321.78.436.416.725.877.892 1.428.085.283.089.366.103 2.224l.015 1.93h-6.49l.015-1.93c.014-1.858.018-1.941.103-2.224.158-.52.382-.898.785-1.321a3.113 3.113 0 011.775-.967c.321-.058 1.152-.013 1.481.08m5.614 7.995c.239.118.481.36.599.599l.093.188v6.68l-.093.189c-.132.268-.416.534-.674.63-.213.08-.297.081-6.453.081-6.156 0-6.24-.001-6.453-.081-.258-.096-.542-.362-.674-.63l-.093-.189-.012-3.26c-.008-2.399.001-3.305.036-3.43.093-.34.433-.7.782-.828.131-.048 1.114-.056 6.454-.049l6.3.007.188.093m-6.729 2.403c-.212.043-.39.165-.468.322-.063.127-.071.278-.071 1.402 0 1.196.004 1.268.083 1.417.115.22.325.323.657.323s.542-.103.657-.323c.079-.149.083-.221.083-1.417 0-1.13-.007-1.275-.071-1.403-.123-.246-.516-.391-.87-.321" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">lock</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path fill="currentColor" d="M5.7 4.276c-1.295.024-1.326.026-1.607.129-.382.14-.785.414-1.101.749a2.573 2.573 0 0 0-.619 1.026l-.113.32-.011 5.48-.011 5.48.152.4c.19.499.372.776.744 1.129.343.326.597.478 1.079.647l.353.124H19.437l.383-.137c.467-.167.716-.32 1.069-.657.35-.334.563-.667.735-1.148l.139-.389-.012-5.464L21.74 6.5l-.117-.334a2.913 2.913 0 0 0-1.456-1.645c-.518-.258-.17-.245-6.967-.258a706.793 706.793 0 0 0-7.5.013m13.828 1.608c.228.117.442.325.565.55.095.175.111.259.133.694l.025.494-3.368 2.233c-4.172 2.765-4.433 2.931-4.688 2.966-.385.053-.54.001-1.16-.388a398.554 398.554 0 0 1-3.929-2.587L3.752 7.62l.018-.46c.02-.531.098-.761.342-1.013.303-.312.334-.321 1.226-.352.441-.015 3.779-.019 7.418-.009 6.506.018 6.618.02 6.772.098M7.094 11.633c3.723 2.47 3.643 2.42 4.01 2.546.778.269 1.616.18 2.312-.244.134-.081 1.708-1.12 3.498-2.307 2.568-1.704 3.263-2.147 3.293-2.104.025.036.032 1.471.02 3.939-.018 3.876-.019 3.884-.104 4.052a1.46 1.46 0 0 1-.58.598l-.203.107H4.66l-.188-.094c-.219-.108-.469-.365-.594-.61l-.088-.172-.021-3.826c-.019-3.513-.012-4.038.056-4.038.013 0 1.484.969 3.269 2.153" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">mail</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path fill="currentColor" d="M4.5 7.625C4.1875 7.34375 4 6.96875 4 6.5C4 5.6875 4.65625 5 5.5 5C5.9375 5 6.34375 5.21875 6.59375 5.5H17.375C17.6562 5.21875 18.0312 5 18.5 5C19.3125 5 20 5.6875 20 6.5C20 6.96875 19.7812 7.34375 19.5 7.625V16.4062C19.7812 16.6562 20 17.0625 20 17.5C20 18.3438 19.3125 19 18.5 19C18.0312 19 17.6562 18.8125 17.375 18.5H6.59375C6.34375 18.8125 5.9375 19 5.5 19C4.65625 19 4 18.3438 4 17.5C4 17.0625 4.1875 16.6562 4.5 16.4062V7.625ZM6.90625 7C6.75 7.4375 6.40625 7.78125 6 7.9375V16.0938C6.40625 16.25 6.75 16.5938 6.90625 17H17.0625C17.2188 16.5938 17.5625 16.25 18 16.0938V7.9375C17.5625 7.78125 17.2188 7.4375 17.0625 7H6.90625ZM7 9C7 8.46875 7.4375 8 8 8H12C12.5312 8 13 8.46875 13 9V12C13 12.5625 12.5312 13 12 13H8C7.4375 13 7 12.5625 7 12V9ZM11 14H12C13.0938 14 14 13.125 14 12V11H16C16.5312 11 17 11.4688 17 12V15C17 15.5625 16.5312 16 16 16H12C11.4375 16 11 15.5625 11 15V14Z" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">objectGroup</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path fill="currentColor" d="M18.5 12.0938C18.5 12.0625 18.5 12.0312 18.5 12C18.5 8.4375 15.5625 5.5 12 5.5C8.40625 5.5 5.5 8.4375 5.5 12C5.5 15.5938 8.40625 18.5 12 18.5C12.0625 18.5 12.1562 18.5 12.25 18.5C12.2812 18.5 12.2812 18.5 12.3125 18.5C12.3125 18.5 12.3438 18.4688 12.375 18.4375C12.4375 18.375 12.5 18.25 12.5 18.0625C12.5 18.0312 12.4688 17.9062 12.3125 17.5312C12.2812 17.5 12.2812 17.4375 12.25 17.4062C12.125 17.0938 11.9062 16.625 11.8125 16.125C11.75 15.9375 11.75 15.7188 11.75 15.5C11.75 13.8438 13.0938 12.5 14.75 12.5H17.8125C18.0312 12.5 18.25 12.4375 18.3438 12.3438C18.4688 12.25 18.5 12.1562 18.5 12.0938ZM20 12.0938C19.9688 13.25 18.9375 14 17.8125 14H14.75C13.9062 14 13.25 14.6875 13.25 15.5C13.25 15.625 13.25 15.7188 13.2812 15.8125C13.3438 16.1562 13.4688 16.4375 13.5938 16.75C13.7812 17.1875 14 17.625 14 18.0625C14 19.0625 13.3125 19.9688 12.3125 20C12.2188 20 12.0938 20 12 20C7.5625 20 4 16.4375 4 12C4 7.59375 7.5625 4 12 4C16.4062 4 20 7.59375 20 12C20 12.0312 20 12.0625 20 12.0938ZM9 12C9 12.5625 8.53125 13 8 13C7.4375 13 7 12.5625 7 12C7 11.4688 7.4375 11 8 11C8.53125 11 9 11.4688 9 12ZM9 10C8.4375 10 8 9.5625 8 9C8 8.46875 8.4375 8 9 8C9.53125 8 10 8.46875 10 9C10 9.5625 9.53125 10 9 10ZM13 8C13 8.5625 12.5312 9 12 9C11.4375 9 11 8.5625 11 8C11 7.46875 11.4375 7 12 7C12.5312 7 13 7.46875 13 8ZM15 10C14.4375 10 14 9.5625 14 9C14 8.46875 14.4375 8 15 8C15.5312 8 16 8.46875 16 9C16 9.5625 15.5312 10 15 10Z" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">palette</code>
    </div>
  </Card>
</CardGroup>

<CardGroup cols={4}>
  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path fill="currentColor" d="M5.125 15.2812C5.25 14.8438 5.5 14.4375 5.8125 14.125L15.3125 4.625C16.0938 3.84375 17.375 3.84375 18.1562 4.625L19.375 5.84375C19.4688 5.9375 19.5625 6.0625 19.625 6.15625C20.1562 6.9375 20.0625 8 19.375 8.6875L9.875 18.1875C9.84375 18.2188 9.78125 18.25 9.75 18.3125C9.4375 18.5625 9.09375 18.75 8.71875 18.875L6.28125 19.5938L4.9375 20C4.6875 20.0625 4.40625 20 4.21875 19.7812C4 19.5938 3.9375 19.3125 4.03125 19.0625L4.40625 17.7188L5.125 15.2812ZM6.5625 15.7188L6.34375 16.4375L5.84375 18.1562L7.5625 17.6562L8.28125 17.4375C8.5 17.375 8.65625 17.2812 8.8125 17.125L15.9688 9.96875L14.0312 8.03125L6.875 15.1875C6.84375 15.1875 6.84375 15.2188 6.8125 15.25C6.6875 15.375 6.625 15.5312 6.5625 15.7188Z" />

        {" "}
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">pen</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path fill="currentColor" d="M1.39062 2.64062L6.6875 6.76562L10.4844 2.96875C11.0703 2.38281 12.0312 2.38281 12.6172 2.96875L13.5312 3.88281C13.6016 3.95312 13.6719 4.04688 13.7188 4.11719C14.1172 4.70312 14.0469 5.5 13.5312 6.01562L10.0859 9.4375L15.2656 13.5156C15.5234 13.7031 15.5703 14.0547 15.3594 14.2891C15.1719 14.5469 14.8203 14.5938 14.5859 14.3828L0.710938 3.50781C0.453125 3.32031 0.40625 2.96875 0.617188 2.73438C0.804688 2.47656 1.15625 2.42969 1.39062 2.64062ZM7.57812 7.46875L9.19531 8.75781L10.9766 6.97656L9.52344 5.52344L7.57812 7.46875ZM4.15625 10.8906C4.13281 10.8906 4.13281 10.9141 4.10938 10.9375C4.01562 11.0312 3.96875 11.1484 3.92188 11.2891L3.75781 11.8281L3.38281 13.1172L4.67188 12.7422L5.21094 12.5781C5.35156 12.5312 5.49219 12.4609 5.60938 12.3438L7.60156 10.3516L8.49219 11.0547L6.40625 13.1406C6.38281 13.1641 6.33594 13.1875 6.3125 13.2344C6.07812 13.4219 5.82031 13.5625 5.53906 13.6562L3.71094 14.1953L2.70312 14.4766C2.51562 14.5469 2.30469 14.5 2.16406 14.3359C2 14.1953 1.95312 13.9844 2.02344 13.7969L2.30469 12.7891L2.84375 10.9609C2.9375 10.6328 3.125 10.3281 3.35938 10.0938L5.07031 8.38281L5.96094 9.08594L4.15625 10.8906Z" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">penSlash</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M15.58 3.076c-.317.148-.812.79-1.016 1.321-.157.408-.21.729-.2 1.216l.008.407-2.776 2.191c-1.527 1.206-2.87 2.265-2.984 2.354l-.209.162-.402-.143c-1.007-.358-2.011-.411-2.918-.155-.544.153-1.225.556-1.653.978-.354.349-.418.608-.24.973.032.066.925.988 1.983 2.05l1.925 1.929-1.586 1.591c-1.727 1.732-1.669 1.657-1.622 2.072.052.459.572.742 1.021.557.101-.042.645-.557 1.699-1.61l1.55-1.548 1.81 1.808c1.237 1.235 1.857 1.827 1.959 1.869.183.076.432.08.602.008.255-.107.798-.767 1.058-1.286.319-.636.432-1.209.399-2.03-.021-.543-.114-1.045-.266-1.445-.035-.091-.032-.134.013-.2.031-.047 1.082-1.442 2.335-3.1l2.277-3.015.537-.01c.556-.01.729-.045 1.206-.245.317-.133.619-.332.909-.601.353-.327.444-.543.36-.861-.04-.155-.301-.43-2.532-2.667-1.69-1.695-2.538-2.518-2.647-2.569a.67.67 0 00-.6-.001m3.86 5.332c0 .054-.34.121-.606.119-.616-.006-1.236-.331-1.918-1.007-.727-.722-1.045-1.322-1.049-1.98-.001-.176.022-.39.051-.475l.052-.155 1.735 1.735c.954.954 1.735 1.748 1.735 1.763m-4.193-.492c.287.386.841.935 1.253 1.244.176.132.334.24.35.24.017 0 .03.018.03.04 0 .022-.889 1.218-1.975 2.657l-1.974 2.617-.381-.507a12.308 12.308 0 00-2.351-2.385c-.186-.143-.339-.276-.339-.296 0-.02 1.143-.938 2.54-2.04 2.139-1.687 2.546-1.993 2.58-1.939.022.036.142.202.267.369m-8.464 3.886c1.095.193 2.35.94 3.512 2.091 1.688 1.672 2.481 3.448 2.129 4.77-.062.232-.223.617-.259.617-.037 0-7.165-7.135-7.165-7.172 0-.054.42-.229.688-.287a3.27 3.27 0 011.095-.019" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">pin</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path fill="currentColor" d="M18.5 5C18.5 4.96875 18.4688 4.96875 18.4688 4.96875H18.4375V5C18.4375 5.03125 18.4375 5.03125 18.4375 5.03125C18.4688 5.03125 18.4688 5.03125 18.5 5.03125C18.5 5 18.5 5 18.5 5ZM18.3125 5.6875C17.9375 5.8125 17.4688 6.03125 16.9062 6.375C16.5 6 16.0312 5.6875 15.5625 5.4375C17.5625 4.15625 19.125 3.65625 19.7188 4.28125C20.4375 4.96875 19.6562 6.9375 17.9375 9.375C18.2812 10.1875 18.5 11.0625 18.5 12C18.5 15.5938 15.5625 18.5 12 18.5C11.0625 18.5 10.1562 18.3125 9.34375 17.9688C6.90625 19.6875 4.9375 20.4375 4.25 19.75C3.625 19.1562 4.125 17.5938 5.40625 15.5938C5.65625 16.0625 5.96875 16.5312 6.34375 16.9375C6 17.5 5.78125 17.9688 5.65625 18.3438C6.03125 18.2188 6.53125 17.9688 7.15625 17.5938C7.40625 17.4688 7.6875 17.2812 7.9375 17.0938C6.4375 15.9062 5.5 14.0625 5.5 12C5.5 8.4375 8.40625 5.5 12 5.5C14.0625 5.5 15.875 6.46875 17.0938 7.96875C17.25 7.6875 17.4375 7.4375 17.5938 7.1875C17.9375 6.5625 18.1875 6.0625 18.3125 5.6875ZM16.1562 9.25C15.2812 7.90625 13.7188 7 12 7C9.21875 7 7 9.25 7 12C7 13.75 7.875 15.2812 9.21875 16.1875C10.4062 15.3125 11.6562 14.2188 12.9062 12.9375C14.1875 11.6875 15.2812 10.4062 16.1562 9.25ZM10.7812 16.875C11.1875 16.9688 11.5625 17 12 17C14.75 17 17 14.7812 17 12C17 11.5938 16.9375 11.2188 16.8438 10.8125C16 11.8438 15.0625 12.9375 13.9688 14C12.9062 15.0625 11.8125 16.0312 10.7812 16.875ZM4.96875 18.5C4.96875 18.5312 4.96875 18.5312 5 18.5312C5 18.5 5 18.5 5 18.4688C5 18.4688 5 18.4688 4.96875 18.4688H4.9375V18.5C4.9375 18.5 4.9375 18.5312 4.96875 18.5ZM5.46875 19C5.46875 19.0312 5.46875 19.0312 5.46875 19.0625H5.5C5.53125 19.0625 5.53125 19.0625 5.53125 19.0625C5.5625 19.0312 5.5625 19.0312 5.53125 19C5.53125 19 5.53125 19 5.5 19C5.5 19 5.5 19 5.46875 19ZM19 5.5C18.9688 5.53125 18.9688 5.53125 18.9688 5.53125C18.9688 5.5625 18.9688 5.5625 18.9688 5.5625C19 5.59375 19 5.59375 19.0312 5.5625C19.0312 5.5625 19.0312 5.5625 19.0312 5.53125V5.5C19 5.5 19 5.5 19 5.5Z" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">planetRinged</code>
    </div>
  </Card>
</CardGroup>

<CardGroup cols={4}>
  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path fill="currentColor" d="M11.614 3.344c-.28.138-.31.208-.34.789-.015.29-.028 2.005-.03 3.811l-.004 3.284-3.758.021c-3.583.02-3.763.024-3.885.096-.265.155-.388.477-.32.84a.646.646 0 0 0 .327.475c.133.078.221.08 3.883.093l3.746.014.014 3.746c.013 3.696.014 3.749.095 3.887a.708.708 0 0 0 .496.335c.353.057.664-.071.82-.335.081-.138.082-.192.095-3.887l.014-3.746 3.746-.014c3.662-.013 3.75-.015 3.883-.093a.646.646 0 0 0 .327-.475c.068-.363-.055-.685-.32-.84-.122-.072-.302-.076-3.882-.096l-3.754-.021-.013-3.744c-.014-3.673-.016-3.747-.095-3.884-.163-.282-.717-.418-1.045-.256" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">plus</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M11.32 2.28A9.74 9.74 0 003.258 7.7c-.46.94-.762 1.914-.924 2.98-.097.636-.097 2.004 0 2.64.446 2.941 2.052 5.409 4.533 6.968 1.075.676 2.441 1.17 3.813 1.378.636.097 2.004.097 2.64 0 2.1-.319 3.932-1.206 5.405-2.618 1.601-1.534 2.6-3.479 2.941-5.728.097-.636.097-2.004 0-2.64-.443-2.919-2.04-5.389-4.49-6.941-.824-.522-2.118-1.053-3.056-1.253a10.872 10.872 0 00-2.8-.206m2 1.578a8.277 8.277 0 014.628 2.435c1.176 1.231 1.913 2.713 2.2 4.423.1.593.1 1.975 0 2.568-.612 3.649-3.463 6.426-7.08 6.895-3.771.489-7.369-1.653-8.767-5.219a9.164 9.164 0 01-.449-1.676c-.1-.593-.1-1.975 0-2.568.299-1.783 1.066-3.282 2.324-4.54 1.389-1.388 2.977-2.138 5.064-2.391.313-.038 1.715.011 2.08.073m-1.88 2.425c-1.257.107-2.4.619-3.2 1.433-.512.52-.843 1.141-.783 1.465.064.338.494.602.952.583.155-.006.356-.2.554-.534.429-.727 1.275-1.244 2.31-1.415a5.172 5.172 0 011.85.078c.89.229 1.646.774 1.963 1.415.165.332.198.795.084 1.156-.194.61-.77 1.164-1.533 1.474a6.26 6.26 0 01-.665.203c-.52.131-.891.315-1.146.57-.395.393-.558.761-.563 1.269-.005.521.226.76.737.76.46 0 .687-.196.745-.642.036-.283.158-.399.499-.476 1.042-.237 1.827-.649 2.479-1.299.708-.708 1.017-1.417 1.009-2.323-.005-.73-.218-1.348-.67-1.949-.589-.784-1.696-1.444-2.797-1.669-.287-.059-1.173-.147-1.365-.135-.044.002-.251.019-.46.036m.359 9.993c-.37.075-.536.299-.538.724-.002.508.236.74.759.74.325 0 .535-.102.65-.314.094-.173.094-.679 0-.852-.129-.24-.514-.371-.871-.298" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">questionCircle</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M9.369 2.283A7.858 7.858 0 005.1 4c-.382.314-1.038.996-1.307 1.361-1.118 1.512-1.669 3.403-1.52 5.209.06.726.164 1.233.391 1.905a7.348 7.348 0 001.773 2.898c.688.706 1.238 1.115 2.079 1.543a7.763 7.763 0 004.054.811 7.259 7.259 0 001.905-.391 7.634 7.634 0 002.158-1.128l.294-.22 2.866 2.863c3.148 3.143 3.007 3.021 3.372 2.912.218-.065.533-.38.598-.598.109-.365.231-.224-2.912-3.372l-2.863-2.866.22-.294c1.104-1.468 1.671-3.412 1.518-5.203a7.384 7.384 0 00-.39-1.905 7.37 7.37 0 00-1.754-2.88c-.702-.724-1.295-1.159-2.162-1.587a7.541 7.541 0 00-2.869-.777c-.577-.044-.579-.044-1.182.002m1.771 1.575c.198.036.575.137.838.225a6.283 6.283 0 014.168 4.802c.098.521.098 1.709 0 2.23a6.723 6.723 0 01-.853 2.195c-.514.808-1.278 1.566-2.04 2.024a6.854 6.854 0 01-2.019.793c-.355.078-.531.091-1.234.091s-.879-.013-1.234-.091a6.842 6.842 0 01-2.019-.793c-.629-.376-1.388-1.088-1.839-1.723a6.706 6.706 0 01-1.055-2.491c-.097-.523-.097-1.713-.001-2.232.488-2.633 2.625-4.69 5.268-5.07.481-.07 1.529-.049 2.02.04" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">search</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M11.74 4.279c-.103.051-.934.855-2.307 2.23-2.359 2.364-2.304 2.298-2.196 2.656.065.218.38.533.598.598.354.106.322.133 2.335-1.876L12 6.062l1.83 1.825c2.013 2.009 1.981 1.982 2.335 1.876.218-.065.533-.38.598-.598.108-.358.163-.292-2.197-2.656-1.422-1.426-2.201-2.178-2.309-2.23-.205-.1-.316-.099-.517 0M7.729 14.285c-.209.103-.435.36-.496.563-.103.344-.151.288 2.24 2.679 2.408 2.407 2.33 2.343 2.697 2.236.148-.043.458-.338 2.357-2.236 2.404-2.404 2.344-2.332 2.236-2.692-.065-.218-.38-.533-.598-.598-.354-.106-.322-.133-2.335 1.876L12 17.938l-1.81-1.807C8.396 14.339 8.237 14.2 7.991 14.2a.8.8 0 00-.262.085" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">selector</code>
    </div>
  </Card>
</CardGroup>

<CardGroup cols={4}>
  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path fill="currentColor" d="M11 6.5V17.5H18C18.25 17.5 18.5 17.2812 18.5 17V7C18.5 6.75 18.25 6.5 18 6.5H11ZM4 7C4 5.90625 4.875 5 6 5H18C19.0938 5 20 5.90625 20 7V17C20 18.125 19.0938 19 18 19H6C4.875 19 4 18.125 4 17V7ZM6 7.75C6 8.1875 6.3125 8.5 6.75 8.5H8.25C8.65625 8.5 9 8.1875 9 7.75C9 7.34375 8.65625 7 8.25 7H6.75C6.3125 7 6 7.34375 6 7.75ZM6.75 10C6.3125 10 6 10.3438 6 10.75C6 11.1875 6.3125 11.5 6.75 11.5H8.25C8.65625 11.5 9 11.1875 9 10.75C9 10.3438 8.65625 10 8.25 10H6.75ZM6 13.75C6 14.1875 6.3125 14.5 6.75 14.5H8.25C8.65625 14.5 9 14.1875 9 13.75C9 13.3438 8.65625 13 8.25 13H6.75C6.3125 13 6 13.3438 6 13.75Z" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">sidebar</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path fill="currentColor" d="M12.75 6.75V13H15V12.25C15 11.3125 15.7812 10.5 16.75 10.5H18.5C18.9062 10.5 19.25 10.8438 19.25 11.25C19.25 11.6875 18.9062 12 18.5 12H16.75C16.5938 12 16.5 12.125 16.5 12.25V13H19.25C19.6562 13 20 13.3438 20 13.75C20 14.1875 19.6562 14.5 19.25 14.5H12H4.75C4.3125 14.5 4 14.1875 4 13.75C4 13.3438 4.3125 13 4.75 13H7.5V12.25C7.5 12.125 7.375 12 7.25 12H5.75C5.3125 12 5 11.6875 5 11.25C5 10.8438 5.3125 10.5 5.75 10.5H7.25C8.1875 10.5 9 11.3125 9 12.25V13H11.25V6.75C11.25 5.25 12.4688 4 14 4C15.5 4 16.75 5.25 16.75 6.75V7.5C16.75 7.9375 16.4062 8.25 16 8.25C15.5625 8.25 15.25 7.9375 15.25 7.5V6.75C15.25 6.0625 14.6875 5.5 14 5.5C13.2812 5.5 12.75 6.0625 12.75 6.75ZM5 15.5H6.5V16.25C6.5 17.5 7.5 18.5 8.75 18.5H15.25C16.4688 18.5 17.5 17.5 17.5 16.25V15.5H19V16.25C19 18.3438 17.3125 20 15.25 20H8.75C6.65625 20 5 18.3438 5 16.25V15.5Z" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">sink</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path fill="currentColor" d="M6.39551 9.50391L5.93066 9.94141C5.82129 9.83203 5.7666 9.69531 5.73926 9.55859C5.73926 9.39453 5.71191 9.23047 5.73926 9.09375C4.8916 9.3125 4.23535 9.61328 3.74316 9.94141C3.08691 10.4062 2.89551 10.7891 2.89551 11.0898C2.89551 11.3086 2.97754 11.582 3.30566 11.8828C3.63379 12.2109 4.15332 12.5117 4.83691 12.7852C6.2041 13.332 8.14551 13.6875 10.333 13.6875C12.4932 13.6875 14.4346 13.332 15.8018 12.7852C16.4854 12.5117 16.9775 12.2109 17.3057 11.8828C17.6338 11.582 17.7432 11.3086 17.7432 11.0898C17.7432 10.7891 17.5518 10.4062 16.8955 9.94141C16.4033 9.61328 15.7197 9.3125 14.8994 9.09375C14.8994 9.23047 14.8994 9.39453 14.8994 9.55859C14.8721 9.69531 14.8174 9.83203 14.708 9.94141L14.2432 9.50391C14.708 9.94141 14.708 9.94141 14.708 9.94141V9.96875H14.6807C14.6807 9.99609 14.6533 10.0234 14.626 10.0508C14.5713 10.0781 14.5166 10.1328 14.4072 10.2148C14.2432 10.3516 13.9697 10.5156 13.6143 10.6797C12.9033 10.9805 11.8369 11.3086 10.3057 11.3086C8.80176 11.3086 7.73535 10.9805 7.02441 10.6797C6.66895 10.5156 6.39551 10.3516 6.23145 10.2148C6.12207 10.1328 6.06738 10.0781 6.0127 10.0508C5.98535 10.0234 5.95801 9.99609 5.95801 9.96875C5.93066 9.96875 5.93066 9.96875 5.93066 9.96875V9.94141C5.93066 9.94141 5.93066 9.94141 6.39551 9.50391ZM14.6807 7.67188C15.8564 7.94531 16.8682 8.35547 17.6338 8.875C18.4268 9.39453 19.083 10.1602 19.083 11.0898C19.083 11.7734 18.7275 12.375 18.2354 12.8398C17.7432 13.3047 17.0596 13.6875 16.2939 14.0156C14.7354 14.6445 12.6299 15 10.333 15C8.03613 15 5.90332 14.6445 4.34473 14.0156C3.5791 13.6875 2.89551 13.3047 2.40332 12.8398C1.91113 12.375 1.58301 11.7734 1.58301 11.0898C1.58301 10.1602 2.21191 9.39453 3.00488 8.875C3.77051 8.35547 4.78223 7.94531 5.95801 7.67188C6.58691 5.78516 8.33691 4.5 10.333 4.5C12.3018 4.5 14.0518 5.78516 14.6807 7.67188ZM13.6143 9.17578C13.6143 7.26172 12.1104 5.8125 10.333 5.8125C8.55566 5.8125 7.02441 7.26172 7.05176 9.17578C7.16113 9.25781 7.3252 9.36719 7.57129 9.47656C8.09082 9.72266 8.99316 9.99609 10.333 9.99609C11.6455 9.99609 12.5479 9.72266 13.0674 9.47656C13.3135 9.36719 13.4775 9.25781 13.6143 9.17578ZM5.73926 11.2812C5.73926 11.6641 5.43848 11.9375 5.08301 11.9375C4.7002 11.9375 4.42676 11.6641 4.42676 11.2812C4.42676 10.9258 4.7002 10.625 5.08301 10.625C5.43848 10.625 5.73926 10.9258 5.73926 11.2812ZM10.9893 12.375C10.9893 12.7578 10.6885 13.0312 10.333 13.0312C9.9502 13.0312 9.67676 12.7578 9.67676 12.375C9.67676 12.0195 9.9502 11.7188 10.333 11.7188C10.6885 11.7188 10.9893 12.0195 10.9893 12.375ZM15.583 11.9375C15.2002 11.9375 14.9268 11.6641 14.9268 11.2812C14.9268 10.9258 15.2002 10.625 15.583 10.625C15.9385 10.625 16.2393 10.9258 16.2393 11.2812C16.2393 11.6641 15.9385 11.9375 15.583 11.9375Z" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">spaceShip</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M4.799 2.276c-.212.043-.39.165-.468.322-.059.117-.073.273-.084.888l-.013.745-.747.015c-.7.014-.758.021-.916.111-.221.126-.308.307-.31.643-.001.332.101.542.322.657.139.074.242.084.904.096l.747.013.013.747c.015.863.054.997.336 1.144.216.114.618.114.834 0 .282-.147.321-.281.336-1.144l.013-.747.747-.013c.662-.012.765-.022.904-.096.221-.115.323-.325.322-.657-.002-.336-.089-.517-.31-.643-.158-.09-.216-.097-.916-.111l-.747-.015-.013-.745c-.015-.85-.049-.974-.304-1.115a1.077 1.077 0 00-.65-.095m7.813.042a.765.765 0 00-.2.187c-.04.059-.576 1.611-1.192 3.447L10.1 9.291l-2.754 1.031c-1.759.658-2.79 1.065-2.855 1.124-.335.309-.33.915.008 1.137.057.037 1.34.531 2.852 1.097l2.749 1.029 1.122 3.351c1.071 3.197 1.129 3.356 1.267 3.482.336.308.878.285 1.099-.047.04-.059.576-1.611 1.192-3.447l1.12-3.339 2.76-1.033c2.481-.928 2.773-1.047 2.887-1.171.204-.221.276-.627.154-.864a.717.717 0 00-.187-.205c-.07-.05-1.362-.553-2.871-1.118L15.9 9.291l-1.12-3.343c-1.225-3.656-1.169-3.522-1.533-3.646-.246-.084-.48-.078-.635.016m1.203 5.507c.692 2.078.812 2.405.928 2.533.121.134.296.208 2.094.881 1.08.404 1.963.747 1.963.761 0 .014-.832.337-1.85.718a72.392 72.392 0 00-1.995.766.915.915 0 00-.246.193c-.073.086-.33.805-.895 2.502-.436 1.309-.803 2.381-.814 2.381-.011 0-.378-1.072-.814-2.381-.565-1.697-.822-2.416-.895-2.502a.915.915 0 00-.246-.193c-.08-.041-.977-.385-1.995-.766-1.017-.381-1.85-.704-1.85-.718 0-.014.883-.357 1.963-.761 1.798-.673 1.973-.747 2.094-.881.116-.128.236-.455.928-2.533.437-1.312.804-2.385.815-2.385.011 0 .378 1.073.815 2.385m-8.016 8.451c-.212.043-.39.165-.468.322-.059.117-.073.273-.084.888l-.013.745-.747.015c-.7.014-.758.021-.916.111-.221.126-.308.307-.31.643-.001.332.101.542.322.657.139.074.242.084.904.096l.747.013.013.747c.012.662.022.765.096.904.115.22.325.323.657.323s.542-.103.657-.323c.074-.139.084-.242.096-.904l.013-.747.747-.013c.662-.012.765-.022.904-.096.221-.115.323-.325.322-.657-.002-.336-.089-.517-.31-.643-.158-.09-.216-.097-.916-.111l-.747-.015-.013-.745c-.015-.85-.049-.974-.304-1.115a1.077 1.077 0 00-.65-.095" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">sparkles</code>
    </div>
  </Card>
</CardGroup>

<CardGroup cols={4}>
  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M4.617 5.283c-.583.068-1.098.327-1.552.781a2.742 2.742 0 00-.696 1.116l-.109.32v9l.109.32c.151.445.362.783.695 1.116.333.333.671.544 1.116.695l.32.109h15l.32-.109a2.736 2.736 0 001.116-.695c.333-.333.544-.671.695-1.116l.109-.32v-9l-.109-.32a2.742 2.742 0 00-.696-1.116c-.472-.471-.961-.709-1.606-.783-.426-.049-14.293-.047-14.712.002m14.911 1.59c.239.118.481.36.599.599.086.174.094.247.105.978l.013.79H3.76v-.735c0-.806.027-.948.236-1.233.14-.19.38-.373.59-.45.131-.048 1.254-.056 7.454-.049l7.3.007.188.093M11.24 12v1.24H3.76v-2.48h7.48V12m9 0v1.24h-7.48v-2.48h7.48V12m-9 4v1.24H8.002c-3.15 0-3.245-.002-3.455-.081-.258-.096-.542-.362-.674-.63-.086-.175-.094-.246-.105-.979l-.013-.79H11.24V16m8.992-.45c-.011.733-.019.804-.105.979-.132.268-.416.534-.674.63-.21.079-.305.081-3.455.081H12.76v-2.48H20.245l-.013.79" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">table</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M16.0558 5.25049C16.019 5.49498 16 5.74526 16 6C16 6.2642 16.0205 6.52361 16.06 6.77674L12.04 6.77288C5.84001 6.76588 4.71701 6.77388 4.58601 6.82188C4.37601 6.89888 4.13601 7.08188 3.99601 7.27188C3.78701 7.55688 3.76001 7.69888 3.76001 8.50488V9.23988H17.1916C17.7867 9.93874 18.5707 10.4717 19.4647 10.7599H12.76V13.2399H20.24V11.9999V10.9426C20.4878 10.9804 20.7416 11 21 11C21.2514 11 21.4985 10.9814 21.74 10.9456V16.4999L21.631 16.8199C21.48 17.2649 21.269 17.6029 20.936 17.9359C20.626 18.2548 20.243 18.4934 19.82 18.6309L19.5 18.7399H4.50001L4.18001 18.6309C3.73501 18.4799 3.39701 18.2689 3.06401 17.9359C2.73101 17.6029 2.52001 17.2649 2.36901 16.8199L2.26001 16.4999V7.49988L2.36901 7.17988C2.50703 6.75693 2.74591 6.37391 3.06501 6.06388C3.51901 5.60988 4.03401 5.35088 4.61701 5.28288C4.91062 5.24855 11.8075 5.23729 16.0558 5.25049ZM11.24 13.2399V11.9999V10.7599H3.76001V13.2399H11.24ZM11.24 17.2399V15.9999V14.7599H3.75501L3.76801 15.5499C3.77901 16.2829 3.78701 16.3539 3.87301 16.5289C4.00501 16.7969 4.28901 17.0629 4.54701 17.1589C4.75701 17.2379 4.85201 17.2399 8.00201 17.2399H11.24ZM20.127 16.5289C20.213 16.3539 20.221 16.2829 20.232 15.5499L20.245 14.7599H12.76V17.2399H15.998C19.148 17.2399 19.243 17.2379 19.453 17.1589C19.711 17.0629 19.995 16.7969 20.127 16.5289Z" />

        <path fill="currentColor" d="M18 6C18 4.34315 19.3431 3 21 3V3C22.6569 3 24 4.34315 24 6V6C24 7.65685 22.6569 9 21 9V9C19.3431 9 18 7.65685 18 6V6Z" className="table-dot-dot" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">tableDot</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M9.701 2.285c-.332.048-.638.212-.925.495-.483.477-.534.695-.535 2.288L8.24 6.236l-2.25.012-2.25.012-.169.097c-.221.126-.308.308-.31.643-.002.495.208.706.749.754l.289.026.406 5.72c.251 3.543.431 5.849.473 6.06.196 1 .967 1.818 1.983 2.106.245.07.514.074 4.819.074 3.731 0 4.6-.01 4.78-.055 1.031-.257 1.826-1.056 2.053-2.065.041-.178.213-2.382.475-6.065l.412-5.786.285-.018c.537-.035.756-.252.754-.751-.002-.335-.089-.517-.31-.643l-.169-.097-2.25-.012-2.25-.012-.001-1.168c-.001-1.593-.052-1.811-.535-2.288-.296-.292-.592-.445-.964-.498-.342-.049-4.22-.047-4.559.003m4.466 1.541c.068.061.073.154.073 1.24V6.24H9.76V5.073c0-1.029.008-1.175.066-1.24.063-.069.183-.073 2.167-.073 1.899 0 2.108.006 2.174.066m4.009 4.124c-.01.105-.198 2.706-.417 5.78l-.397 5.59-.108.222c-.12.245-.32.446-.582.586l-.172.092h-9l-.172-.092a1.327 1.327 0 01-.583-.589l-.111-.226-.394-5.546c-.217-3.051-.405-5.65-.417-5.777l-.022-.23h12.395l-.02.19m-8.377 2.326c-.212.043-.39.165-.468.322-.066.132-.071.366-.071 3.402 0 3.216.001 3.262.083 3.417.115.22.325.323.657.323s.542-.103.657-.323c.082-.155.083-.201.083-3.417 0-3.05-.005-3.269-.071-3.403-.123-.246-.516-.391-.87-.321m4 0c-.212.043-.39.165-.468.322-.066.132-.071.366-.071 3.402 0 3.216.001 3.262.083 3.417.115.22.325.323.657.323s.542-.103.657-.323c.082-.155.083-.201.083-3.417 0-3.05-.005-3.269-.071-3.403-.123-.246-.516-.391-.87-.321" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">trash</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path fill="currentColor" d="M13 5.5H6C5.71875 5.5 5.5 5.75 5.5 6V7H9.5C9.75 7 10 7.25 10 7.5C10 7.78125 9.75 8 9.5 8H2.5C2.21875 8 2 7.78125 2 7.5C2 7.25 2.21875 7 2.5 7H4V6C4 4.90625 4.875 4 6 4H13C14.0938 4 15 4.90625 15 6V7H16.3125C16.7812 7 17.2188 7.1875 17.5625 7.53125L20.4688 10.4375C20.8125 10.7812 21 11.2188 21 11.6875V15.5H21.25C21.6562 15.5 22 15.8438 22 16.25C22 16.6875 21.6562 17 21.25 17H20C20 18.6562 18.6562 20 17 20C15.3438 20 14 18.6562 14 17H13.75H13H12H10C10 18.6562 8.65625 20 7 20C5.34375 20 4 18.6562 4 17V15.5V13H5.5V14.4062C5.9375 14.1562 6.4375 14 7 14C8.09375 14 9.0625 14.625 9.59375 15.5H12H13C13.25 15.5 13.5 15.2812 13.5 15V6C13.5 5.75 13.25 5.5 13 5.5ZM19.4062 11.5L16.5 8.59375C16.4375 8.53125 16.375 8.5 16.3125 8.5H15V11.5H19.4375H19.4062ZM8.5 17C8.5 16.4688 8.1875 16 7.75 15.7188C7.28125 15.4375 6.6875 15.4375 6.25 15.7188C5.78125 16 5.5 16.4688 5.5 17C5.5 17.5625 5.78125 18.0312 6.25 18.3125C6.6875 18.5938 7.28125 18.5938 7.75 18.3125C8.1875 18.0312 8.5 17.5625 8.5 17ZM17 18.5C17.5312 18.5 18 18.2188 18.2812 17.75C18.5625 17.3125 18.5625 16.7188 18.2812 16.25C18 15.8125 17.5312 15.5 17 15.5C16.4375 15.5 15.9688 15.8125 15.6875 16.25C15.4062 16.7188 15.4062 17.3125 15.6875 17.75C15.9688 18.2188 16.4375 18.5 17 18.5ZM3.5 9H10.5C10.75 9 11 9.25 11 9.5C11 9.78125 10.75 10 10.5 10H3.5C3.21875 10 3 9.78125 3 9.5C3 9.25 3.21875 9 3.5 9ZM2.5 11H9.5C9.75 11 10 11.25 10 11.5C10 11.7812 9.75 12 9.5 12H2.5C2.21875 12 2 11.7812 2 11.5C2 11.25 2.21875 11 2.5 11Z" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">truck</code>
    </div>
  </Card>
</CardGroup>

<CardGroup cols={4}>
  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path fill="currentColor" d="M7.5 11.7188L6.96875 12.2188C6.84375 12.0938 6.78125 11.9375 6.75 11.7812C6.75 11.5938 6.71875 11.4062 6.75 11.25C5.78125 11.5 5.03125 11.8438 4.46875 12.2188C3.71875 12.75 3.5 13.1875 3.5 13.5312C3.5 13.7812 3.59375 14.0938 3.96875 14.4375C4.34375 14.8125 4.9375 15.1562 5.71875 15.4688C7.28125 16.0938 9.5 16.5 12 16.5C14.4688 16.5 16.6875 16.0938 18.25 15.4688C19.0312 15.1562 19.5938 14.8125 19.9688 14.4375C20.3438 14.0938 20.4688 13.7812 20.4688 13.5312C20.4688 13.1875 20.25 12.75 19.5 12.2188C18.9375 11.8438 18.1562 11.5 17.2188 11.25C17.2188 11.4062 17.2188 11.5938 17.2188 11.7812C17.1875 11.9375 17.125 12.0938 17 12.2188L16.4688 11.7188C17 12.2188 17 12.2188 17 12.2188V12.25H16.9688C16.9688 12.2812 16.9375 12.3125 16.9062 12.3438C16.8438 12.375 16.7812 12.4375 16.6562 12.5312C16.4688 12.6875 16.1562 12.875 15.75 13.0625C14.9375 13.4062 13.7188 13.7812 11.9688 13.7812C10.25 13.7812 9.03125 13.4062 8.21875 13.0625C7.8125 12.875 7.5 12.6875 7.3125 12.5312C7.1875 12.4375 7.125 12.375 7.0625 12.3438C7.03125 12.3125 7 12.2812 7 12.25C6.96875 12.25 6.96875 12.25 6.96875 12.25V12.2188C6.96875 12.2188 6.96875 12.2188 7.5 11.7188ZM16.9688 9.625C18.3125 9.9375 19.4688 10.4062 20.3438 11C21.25 11.5938 22 12.4688 22 13.5312C22 14.3125 21.5938 15 21.0312 15.5312C20.4688 16.0625 19.6875 16.5 18.8125 16.875C17.0312 17.5938 14.625 18 12 18C9.375 18 6.9375 17.5938 5.15625 16.875C4.28125 16.5 3.5 16.0625 2.9375 15.5312C2.375 15 2 14.3125 2 13.5312C2 12.4688 2.71875 11.5938 3.625 11C4.5 10.4062 5.65625 9.9375 7 9.625C7.71875 7.46875 9.71875 6 12 6C14.25 6 16.25 7.46875 16.9688 9.625ZM15.75 11.3438C15.75 9.15625 14.0312 7.5 12 7.5C9.96875 7.5 8.21875 9.15625 8.25 11.3438C8.375 11.4375 8.5625 11.5625 8.84375 11.6875C9.4375 11.9688 10.4688 12.2812 12 12.2812C13.5 12.2812 14.5312 11.9688 15.125 11.6875C15.4062 11.5625 15.5938 11.4375 15.75 11.3438ZM6.75 13.75C6.75 14.1875 6.40625 14.5 6 14.5C5.5625 14.5 5.25 14.1875 5.25 13.75C5.25 13.3438 5.5625 13 6 13C6.40625 13 6.75 13.3438 6.75 13.75ZM12.75 15C12.75 15.4375 12.4062 15.75 12 15.75C11.5625 15.75 11.25 15.4375 11.25 15C11.25 14.5938 11.5625 14.25 12 14.25C12.4062 14.25 12.75 14.5938 12.75 15ZM18 14.5C17.5625 14.5 17.25 14.1875 17.25 13.75C17.25 13.3438 17.5625 13 18 13C18.4062 13 18.75 13.3438 18.75 13.75C18.75 14.1875 18.4062 14.5 18 14.5Z" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">ufo</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M11.646 3.323c-.135.068-.246.143-.246.168 0 .024-.925.972-2.056 2.107-2.26 2.267-2.214 2.21-2.107 2.567.065.218.38.533.598.598.347.104.357.097 1.954-1.495l1.45-1.444.01 5.218c.011 5.185.012 5.219.094 5.375.115.22.325.323.657.323s.542-.103.657-.323c.082-.156.083-.19.094-5.375l.01-5.218 1.45 1.444c1.597 1.592 1.607 1.599 1.954 1.495.218-.065.533-.38.598-.598.107-.357.153-.3-2.107-2.567C13.525 4.463 12.6 3.515 12.6 3.491c0-.063-.471-.291-.6-.291-.059 0-.218.055-.354.123M3.799 15.276c-.212.043-.39.165-.468.322-.061.123-.071.26-.071 1.002 0 .962.042 1.233.281 1.83a3.802 3.802 0 002.029 2.029c.746.299.333.281 6.43.281 6.097 0 5.684.018 6.43-.281a3.802 3.802 0 002.029-2.029c.239-.597.281-.868.281-1.83 0-.989-.022-1.079-.307-1.239-.232-.13-.634-.13-.866 0-.276.155-.301.251-.331 1.259-.015.502-.047.949-.075 1.04-.151.495-.64 1.084-1.101 1.327-.507.267-.177.253-6.06.253s-5.553.014-6.06-.253c-.461-.243-.95-.832-1.101-1.327-.028-.091-.06-.538-.075-1.04-.029-.996-.057-1.106-.315-1.249a1.077 1.077 0 00-.65-.095" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">upload</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M11.544 2.283C9.6 2.455 7.927 3.872 7.417 5.779A4.736 4.736 0 008.034 9.6c.286.441.925 1.08 1.366 1.366a4.73 4.73 0 005.2 0c.441-.286 1.08-.925 1.366-1.366 1.211-1.871.99-4.275-.541-5.871a4.626 4.626 0 00-3.029-1.448 8.87 8.87 0 00-.476-.035c-.011.003-.18.019-.376.037m1.37 1.595c.508.146.893.372 1.321.78.446.425.733.89.894 1.45.129.45.129 1.334 0 1.784-.167.582-.458 1.042-.941 1.492-.633.588-1.319.856-2.188.856-.869 0-1.555-.268-2.188-.856-.483-.45-.774-.91-.941-1.492-.129-.45-.129-1.334 0-1.784.152-.53.375-.91.787-1.343a3.113 3.113 0 011.775-.967c.321-.058 1.152-.013 1.481.08m-1.545 9.405A7.858 7.858 0 007.1 15a8.533 8.533 0 00-1.695 1.932 8.499 8.499 0 00-1.003 2.528c-.125.611-.187 1.484-.126 1.758.061.273.21.434.459.497.131.033 2.121.045 7.265.045s7.134-.012 7.265-.045c.428-.108.536-.409.461-1.289a7.38 7.38 0 00-.39-1.901 7.37 7.37 0 00-1.754-2.88c-.702-.724-1.295-1.159-2.162-1.587a7.541 7.541 0 00-2.869-.777c-.577-.044-.579-.044-1.182.002m1.771 1.575c1.892.343 3.574 1.62 4.465 3.391.192.382.448 1.138.513 1.512.024.142.054.309.066.369l.022.11H5.796l.024-.15c.407-2.527 2.207-4.513 4.67-5.153.702-.182 1.884-.217 2.65-.079" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">user</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path fill="currentColor" d="M9.22 2.286a4.566 4.566 0 0 0-2.467 1.048c-.748.641-1.22 1.401-1.481 2.385-.099.375-.141 1.298-.078 1.704.42 2.689 3.032 4.41 5.64 3.716a4.404 4.404 0 0 0 1.956-1.113c.754-.724 1.164-1.51 1.346-2.583.115-.679.059-1.315-.185-2.083a3.946 3.946 0 0 0-.979-1.645c-.772-.812-1.675-1.273-2.766-1.412-.538-.069-.523-.068-.986-.017m1.22 1.571c.331.09.912.394 1.16.606.45.385.776.892.966 1.499.121.388.131 1.191.018 1.598-.244.889-.985 1.714-1.834 2.041-.636.246-1.537.25-2.154.01A3.14 3.14 0 0 1 6.734 7.52c-.099-.373-.089-1.118.021-1.531a2.7 2.7 0 0 1 .749-1.283c.53-.532.942-.762 1.596-.89.338-.066 1.023-.045 1.34.041m7.425 4.104c-.139.042-.289.176-.378.339-.056.102-.068.299-.08 1.287l-.014 1.168-1.167.012c-1.081.012-1.176.019-1.302.093-.248.146-.304.264-.304.64 0 .362.045.465.275.638.105.078.172.083 1.308.095l1.197.012.003 1.008c.003 1.124.027 1.379.142 1.538.293.402 1.064.372 1.275-.051.073-.147.081-.255.093-1.326l.013-1.166 1.214-.014c1.151-.013 1.22-.018 1.324-.096.383-.286.366-1.046-.028-1.278-.126-.074-.222-.081-1.326-.094l-1.19-.014-.003-1.026c-.004-1.296-.019-1.418-.207-1.589a.893.893 0 0 0-.845-.176m-8.824 4.722a6.436 6.436 0 0 0-4.185 2.147c-1.137 1.292-1.66 2.853-1.608 4.79.021.772.061.888.346 1.028l.186.091 4.9.012c2.695.007 5.381-.001 5.968-.019l1.068-.032.136-.132c.197-.191.228-.346.228-1.124 0-1.125-.115-1.844-.426-2.66a6.488 6.488 0 0 0-3.302-3.541 6.518 6.518 0 0 0-3.311-.56m1.105 1.517c1.14.087 2.137.556 2.974 1.398.877.882 1.37 1.971 1.428 3.152l.024.49H4.76v-.178c0-.355.091-1.009.187-1.342a5.934 5.934 0 0 1 .7-1.469c.742-1.081 2.115-1.92 3.353-2.049.442-.046.567-.046 1.146-.002" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">userAdd</code>
    </div>
  </Card>
</CardGroup>

<CardGroup cols={4}>
  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M11.595 3.282c-.46.05-.773.142-1.215.357-1.06.514-1.74 1.36-2.03 2.521a4.03 4.03 0 000 1.68c.183.733.493 1.287 1.008 1.802.73.73 1.606 1.092 2.642 1.092 1.036 0 1.912-.362 2.642-1.092.73-.73 1.092-1.606 1.092-2.642 0-1.589-.926-2.924-2.441-3.515-.441-.173-1.171-.26-1.698-.203m.961 1.54c.378.089.707.281 1.024.598.454.454.659.945.659 1.58 0 .635-.205 1.126-.659 1.58-.456.456-.944.66-1.58.66-.636 0-1.124-.204-1.58-.66-.454-.454-.659-.945-.659-1.58 0-.635.205-1.126.659-1.58.31-.31.646-.509 1.005-.597a2.87 2.87 0 011.131-.001M4.617 7.283c-.585.069-1.098.328-1.552.781a2.687 2.687 0 00-.693 1.116c-.091.277-.105.387-.105.82 0 .433.014.543.105.82.146.44.357.781.692 1.116.335.335.676.546 1.116.692.277.091.387.105.82.105.433 0 .543-.014.82-.105.44-.146.781-.357 1.116-.692.335-.335.546-.676.692-1.116.091-.277.105-.387.105-.82 0-.432-.014-.543-.105-.82-.425-1.294-1.642-2.06-3.011-1.897m14 0c-.585.069-1.098.328-1.552.781a2.687 2.687 0 00-.693 1.116c-.091.277-.105.387-.105.82 0 .433.014.543.105.82.146.44.357.781.692 1.116.335.335.676.546 1.116.692.277.091.387.105.82.105.433 0 .543-.014.82-.105.44-.146.781-.357 1.116-.692.335-.335.546-.676.692-1.116.091-.277.105-.387.105-.82 0-.432-.014-.543-.105-.82-.425-1.294-1.642-2.06-3.011-1.897M5.528 8.873c.239.117.481.359.599.599.133.27.133.787 0 1.057-.464.943-1.795.943-2.252 0a1.425 1.425 0 01-.074-.871c.097-.348.43-.703.785-.838.232-.088.708-.061.942.053m14 0c.239.117.481.359.599.599.133.27.133.787 0 1.057-.464.943-1.795.943-2.252 0a1.425 1.425 0 01-.074-.871c.097-.348.43-.703.785-.838.232-.088.708-.061.942.053M11.5 12.281a5.396 5.396 0 00-2 .547 5.898 5.898 0 00-2.207 1.864l-.147.208-.446-.223c-.685-.344-1.343-.469-2.065-.394a3.21 3.21 0 00-1.255.356c-1.073.52-1.771 1.402-2.046 2.581-.064.279-.074.495-.074 1.68 0 1.297.004 1.367.083 1.517a.59.59 0 00.24.24l.157.083h20.52l.157-.083a.59.59 0 00.24-.24c.079-.15.083-.22.083-1.517 0-1.185-.01-1.401-.074-1.68-.275-1.179-.973-2.061-2.046-2.581a3.21 3.21 0 00-1.255-.356c-.722-.075-1.38.05-2.065.394l-.446.223-.147-.208c-.872-1.23-2.299-2.131-3.718-2.349-.5-.076-1.055-.1-1.489-.062m1.52 1.593c.867.218 1.714.755 2.26 1.433.244.304.56.814.56.904 0 .023.046.138.102.257.224.473.268.753.288 1.802l.018.97H7.752l.018-.97c.02-1.049.064-1.329.288-1.802.056-.119.102-.235.102-.258 0-.078.284-.547.511-.845.589-.771 1.555-1.354 2.559-1.544.433-.082 1.36-.055 1.79.053m-7.249 2.02c.3.114.709.368.709.44 0 .025-.035.192-.078.37-.111.462-.162 1.041-.162 1.84v.696H2.76l.001-.77c0-1.146.117-1.508.659-2.05.492-.493.947-.669 1.66-.644.329.012.479.037.691.118m13.785-.072c.378.089.707.281 1.024.598.542.542.659.904.659 2.05l.001.77h-3.48v-.696c0-.808-.052-1.398-.162-1.831a3.09 3.09 0 01-.078-.366c0-.128.639-.47 1.02-.546a2.943 2.943 0 011.016.021" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">userGroup</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path fill="currentColor" d="M8.72 2.266c-.785.083-1.392.258-1.951.56-2.065 1.117-3.011 3.531-2.244 5.725.254.728.57 1.215 1.18 1.822A4.526 4.526 0 0 0 9 11.733c1.3 0 2.394-.459 3.334-1.399.935-.936 1.397-2.036 1.398-3.334 0-1.282-.473-2.421-1.391-3.342a4.599 4.599 0 0 0-1.991-1.194c-.466-.135-1.287-.235-1.63-.198m.999 1.579c1.081.163 2.238 1.314 2.44 2.429.064.351.057 1.177-.013 1.509-.208.994-1.106 1.96-2.14 2.304-.368.122-.415.128-1.006.128s-.638-.006-1.006-.128c-1.024-.34-1.907-1.28-2.138-2.277-.082-.355-.08-1.273.004-1.634.224-.97 1.125-1.934 2.101-2.252.496-.161 1.048-.186 1.758-.079m5.834 7.431c-.839.022-.916.03-1.02.108-.191.142-.26.306-.262.613-.002.318.075.49.28.628.117.079.202.089.99.115a118.1 118.1 0 0 0 3.292.013c2.326-.015 2.437-.02 2.565-.095a.85.85 0 0 0 .212-.183c.168-.226.168-.724 0-.95-.182-.244-.084-.235-2.73-.255a151.486 151.486 0 0 0-3.327.006m-7.567 2.067a6.746 6.746 0 0 0-2.793 1.104C3.685 15.49 2.71 17 2.36 18.832c-.073.379-.088.613-.093 1.44-.007.923-.002.997.073 1.124.176.299.183.3 1.393.336.598.017 3.427.026 6.287.019 5.088-.012 5.203-.014 5.359-.092.259-.128.329-.274.36-.749.034-.527-.037-1.842-.121-2.23-.319-1.476-1.106-2.829-2.175-3.74-1.069-.911-2.247-1.438-3.616-1.619-.429-.056-1.412-.045-1.841.022m2.094 1.536c1.515.309 2.875 1.357 3.594 2.77.336.66.507 1.317.552 2.121l.026.47H3.76v-.271c0-.854.257-1.807.688-2.549a5.282 5.282 0 0 1 3.892-2.617c.426-.059 1.257-.022 1.74.076" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">userRemove</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path fill="currentColor" d="M12 4.5C12.1875 4.5 12.3125 4.4375 12.4688 4.3125C12.6875 4.1875 12.9375 4 13.5 4C14.4375 4 15.125 5.375 15.5625 6.8125C17.0312 7.09375 18 7.53125 18 8C18 8.4375 17.2812 8.8125 16.1875 9.09375C16.2188 9.3125 16.25 9.53125 16.25 9.75C16.25 10.1875 16.1562 10.625 16.0625 11H17.5625C17.8125 11 18 11.1875 18 11.4375C18 11.5 17.9688 11.5312 17.9688 11.5938L16.75 14.625C18.0938 15.625 19 17.25 19 19.0938C19 19.5938 18.5625 20 18.0625 20H13.75H10.25H5.90625C5.40625 20 5 19.5938 5 19.0938C5 17.25 5.875 15.625 7.21875 14.625L6.03125 11.5938C6 11.5312 6 11.5 6 11.4375C6 11.1875 6.1875 11 6.40625 11H7.9375C7.8125 10.625 7.75 10.1875 7.75 9.75C7.75 9.53125 7.75 9.3125 7.78125 9.09375C6.6875 8.8125 6 8.4375 6 8C6 7.53125 6.9375 7.09375 8.4375 6.8125C8.875 5.375 9.53125 4 10.5 4C11.0625 4 11.2812 4.1875 11.5 4.3125C11.6562 4.4375 11.7812 4.5 12 4.5ZM13.375 18.5H17.4375C17.2812 17.4062 16.6875 16.4688 15.8438 15.8125C15.3125 15.4062 15.0938 14.6875 15.3438 14.0625L15.9688 12.5H15.2188C14.6875 13.125 14 13.5938 13.1875 13.8438L12.6875 14.6562C12.5625 14.875 12.5312 15.1562 12.5938 15.4062L13.375 18.5ZM10.7812 13.8438C9.96875 13.5938 9.28125 13.125 8.75 12.5H8L8.625 14.0625C8.875 14.6875 8.65625 15.4062 8.125 15.8125C7.28125 16.4688 6.6875 17.4062 6.53125 18.5H10.625L11.375 15.4062C11.4375 15.1562 11.4062 14.875 11.2812 14.6562L10.7812 13.8438ZM12 12.5C13.1875 12.5 14.1875 11.75 14.5625 10.6875C14.3438 10.9062 14.0625 11 13.75 11H13.3438C12.8438 11 12.375 10.6875 12.2188 10.1875C12.125 9.96875 11.8438 9.96875 11.75 10.1875C11.5938 10.6875 11.125 11 10.625 11H10.25C9.90625 11 9.625 10.9062 9.40625 10.6875C9.78125 11.75 10.7812 12.5 12 12.5Z" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">userSecret</code>
    </div>
  </Card>

  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{ width: "24px", height: "24px" }}>
        <path fill="currentColor" d="M18.2188 5.5625L5.625 16.9688C5.53125 17.0625 5.5 17.1562 5.5 17.2812C5.5 17.4062 5.53125 17.5 5.59375 17.5625L6.4375 18.4062C6.5 18.4688 6.59375 18.5 6.71875 18.5C6.84375 18.5 6.9375 18.4688 7.03125 18.375L18.4375 5.78125C18.4688 5.75 18.5 5.71875 18.5 5.65625C18.5 5.59375 18.4062 5.5 18.3438 5.5C18.3125 5.5 18.25 5.53125 18.2188 5.5625ZM18.3438 4C19.25 4 20 4.75 20 5.65625C20 6.0625 19.8438 6.46875 19.5625 6.78125L18.125 8.375C18.0312 8.46875 18 8.59375 18 8.71875V9.5C18 9.78125 17.75 10 17.5 10H16.8438C16.7188 10 16.5625 10.0625 16.4688 10.1875L8.125 19.375C7.78125 19.7812 7.25 20 6.71875 20C6.21875 20 5.71875 19.8125 5.375 19.4375L4.5625 18.625C4.1875 18.2812 4 17.7812 4 17.2812C4 16.75 4.21875 16.2188 4.625 15.875L6.8125 13.875C6.9375 13.7812 7 13.625 7 13.5V12.5C7 12.25 7.21875 12 7.5 12H8.65625C8.78125 12 8.90625 11.9688 9 11.875L17.2188 4.4375C17.5312 4.15625 17.9375 4 18.3438 4ZM17.5 13C17.5938 13 17.6875 13.0938 17.7188 13.1875L18.1875 14.8125L19.8125 15.2812C19.9062 15.3125 20 15.4062 20 15.5C20 15.625 19.9062 15.7188 19.8125 15.75L18.1875 16.2188L17.7188 17.8438C17.6875 17.9375 17.5938 18 17.5 18C17.375 18 17.2812 17.9375 17.25 17.8438L16.7812 16.2188L15.1562 15.75C15.0625 15.7188 15 15.625 15 15.5C15 15.4062 15.0625 15.3125 15.1562 15.2812L16.7812 14.8125L17.25 13.1875C17.2812 13.0938 17.375 13 17.5 13ZM6.71875 6.1875L7.1875 7.8125L8.8125 8.28125C8.90625 8.3125 9 8.40625 9 8.5C9 8.625 8.90625 8.71875 8.8125 8.75L7.1875 9.21875L6.71875 10.8438C6.6875 10.9375 6.59375 11 6.5 11C6.375 11 6.28125 10.9375 6.25 10.8438L5.78125 9.21875L4.15625 8.75C4.0625 8.71875 4 8.625 4 8.5C4 8.40625 4.0625 8.3125 4.15625 8.28125L5.78125 7.8125L6.25 6.1875C6.28125 6.09375 6.375 6 6.5 6C6.59375 6 6.6875 6.09375 6.71875 6.1875ZM10.5 4C10.5938 4 10.6875 4.09375 10.7188 4.21875L10.9375 5.0625L11.7812 5.28125C11.9062 5.3125 12 5.40625 12 5.5C12 5.625 11.9062 5.71875 11.7812 5.75L10.9375 5.96875L10.7188 6.8125C10.6875 6.9375 10.5938 7 10.5 7C10.375 7 10.2812 6.9375 10.25 6.8125L10.0312 5.96875L9.1875 5.75C9.0625 5.71875 9 5.625 9 5.5C9 5.40625 9.0625 5.3125 9.1875 5.28125L10.0312 5.0625L10.25 4.21875C10.2812 4.09375 10.375 4 10.5 4Z" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">wandSparkles</code>
    </div>
  </Card>
</CardGroup>

<CardGroup cols={4}>
  <Card title>
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }}>
      <svg style={{width: '24px', height: '24px'}}>
        <path fill="currentColor" fillRule="evenodd" d="M11.32 2.28A9.74 9.74 0 003.258 7.7c-.46.94-.762 1.914-.924 2.98-.097.636-.097 2.004 0 2.64.446 2.941 2.052 5.409 4.533 6.968 1.075.676 2.441 1.17 3.813 1.378.636.097 2.004.097 2.64 0 2.1-.319 3.932-1.206 5.405-2.618 1.601-1.534 2.6-3.479 2.941-5.728.097-.636.097-2.004 0-2.64-.443-2.919-2.04-5.389-4.49-6.941-.824-.522-2.118-1.053-3.056-1.253a10.872 10.872 0 00-2.8-.206m2 1.578a8.277 8.277 0 014.628 2.435c1.176 1.231 1.913 2.713 2.2 4.423.1.593.1 1.975 0 2.568-.612 3.649-3.463 6.426-7.08 6.895-3.771.489-7.369-1.653-8.767-5.219a9.164 9.164 0 01-.449-1.676c-.1-.593-.1-1.975 0-2.568.299-1.783 1.066-3.282 2.324-4.54 1.389-1.388 2.977-2.138 5.064-2.391.313-.038 1.715.011 2.08.073M9.729 9.285c-.209.103-.435.36-.496.563-.093.31-.028.407.879 1.322l.824.83-.824.83c-.916.923-.973 1.01-.875 1.335.065.218.38.533.598.598.325.098.412.041 1.335-.875l.83-.824.83.824c.923.916 1.01.973 1.335.875.218-.065.533-.38.598-.598.098-.325.041-.412-.875-1.335l-.824-.83.824-.83c.916-.923.973-1.01.875-1.335-.065-.218-.38-.533-.598-.598-.325-.098-.412-.041-1.335.876l-.831.824-.81-.807c-.973-.969-1.082-1.032-1.46-.845" />
      </svg>

      <code className="text-sm text-gray-600 dark:text-gray-400">xCircle</code>
    </div>
  </Card>
</CardGroup>
