> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-design-linden-theme.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# CometChat Docs

export function openSearch() {
  document.getElementById('search-bar-entry').click();
}

<div className="relative w-full flex items-center justify-center" style={{ height: '26rem', overflow: 'hidden'}}>
  <div className="absolute inset-0 bg-primary dark:bg-primary-light" style={{opacity: 0.05 }} />

  <div style={{ position: 'absolute', textAlign: 'center', padding: '0 1rem' }}>
    <div
      className="text-gray-900 dark:text-white"
      style={{
   fontWeight: '800',
   fontSize: '2.5rem',
   margin: '0',
   marginTop: '5rem'
  }}
    >
      Get Started
    </div>

    <p className="mt-4 text-gray-900 dark:text-white" style={{ fontSize: '1rem', fontWeight: '600' , maxWidth: '40rem'}}>Seamlessly integrate real-time chat, voice, and video functionalities.  </p>

    <div className="flex items-center justify-center" style={{ maxWidth: '800px', margin: '0 auto' }}>
      <button
        type="button"
        className="hidden w-full lg:flex items-center text-sm leading-6 py-4 pl-4 pr-4 text-gray-500 rounded-full"
        id="home-search-entry"
        style={{
    marginTop: '2rem',
    maxWidth: '40rem',
    background: '#FFF',
    boxShadow: '0px 1px 4px 0px rgba(8, 9, 10, 0.25), 0px 0px 0px 4px rgba(255, 255, 255, 0.20)',
    cursor: 'pointer',
    textAlign: 'left',
  }}
        onClick={openSearch}
      >
        <svg
          className="h-4 w-4 ml-1.5 flex-none bg-primary hover:bg-gray-600 dark:bg-primary-dark dark:hover:bg-white/70"
          style={{
    marginRight: '0.5rem',
     maskImage:
       'url("https://mintlify.b-cdn.net/v6.5.1/solid/magnifying-glass.svg")',
     maskRepeat: 'no-repeat',
     maskPosition: 'center center',
    }}
        />

        Search or ask...
      </button>
    </div>
  </div>
</div>

<div
  style={{marginTop: '2rem', marginBottom: '8rem', maxWidth: '70rem', marginLeft: 'auto',
marginRight: 'auto', paddingLeft: '1.25rem',
paddingRight: '1.25rem' }}
>
  <div className="flex flex-col w-full " style={{ marginTop: '2rem', marginBottom: '0.5rem' }}>
    <h2
      className="text-primary"
      style={{
  fontSize: '2rem',
  fontWeight: '500',
}}
    >
      UI Kits
    </h2>

    <h3
      className="text-gray-900 dark:text-gray-200"
      style={{
  fontSize: '1.5rem',
  fontWeight: '500',
}}
    >
      Pre-built UI & business logic
    </h3>

    <p
      className="text-gray-700 dark:text-gray-300"
      style={{
  fontSize: '1.05rem',
  marginBottom: '1rem'
}}
    >
      Quickly implement chat functionality with UI Kits that include built-in business logic and a customizable user interface.
    </p>
  </div>

  <CardGroup cols={4}>
    <Card title="React" icon="react" iconType="solid" href="/docs/ui-kit/react/overview" horizontal />

    <Card title="React Native" icon="react" iconType="solid" href="/docs/ui-kit/react-native/overview" horizontal />

    <Card title="iOS" icon="apple" iconType="solid" href="/docs/ui-kit/ios/overview" horizontal />

    <Card title="Android" icon="android" iconType="solid" href="/docs/ui-kit/android/overview" horizontal />

    <Card title="Flutter" icon="flutter" iconType="solid" href="/docs/ui-kit/flutter/overview" horizontal />

    <Card title="Angular" icon="angular" iconType="solid" href="/docs/ui-kit/angular/overview" horizontal />

    <Card title="Vue" icon="vuejs" iconType="solid" href="/docs/ui-kit/vue/overview" horizontal />
  </CardGroup>

  <div className="flex flex-col w-full " style={{ marginTop: '2rem', marginBottom: '0.5rem' }}>
    <h2
      className="text-primary"
      style={{
  fontSize: '2rem',
  fontWeight: '500',
}}
    >
      SDKs
    </h2>

    <h3
      className="text-gray-900 dark:text-gray-200"
      style={{
  fontSize: '1.5rem',
  fontWeight: '500',
}}
    >
      Build bespoke chat experiences
    </h3>

    <p
      className="text-gray-700 dark:text-gray-300"
      style={{
  fontSize: '1.05rem',
  marginBottom: '1rem'
}}
    >
      Use Our SDKs to tap into the full potential of CometChat while building your own user interface.
    </p>
  </div>

  <CardGroup cols={4}>
    <Card title="JavaScript" icon="js" iconType="solid" href="/docs/sdk/javascript/overview" horizontal />

    <Card title="React Native" icon="react" iconType="solid" href="/docs/sdk/react-native/overview" horizontal />

    <Card title="iOS" icon="apple" iconType="solid" href="/docs/sdk/ios/overview" horizontal />

    <Card title="Android" icon="android" iconType="solid" href="/docs/sdk/android/overview" horizontal />

    <Card title="Flutter" icon="flutter" iconType="solid" href="/docs/sdk/flutter/overview" horizontal />

    <Card title="Ionic" icon="mobile-screen-button" iconType="solid" href="/docs/sdk/ionic/overview" horizontal />
  </CardGroup>

  <div className="flex flex-col w-full " style={{ marginTop: '2rem', marginBottom: '0.5rem' }}>
    <h2
      className="text-primary"
      style={{
  fontSize: '2rem',
  fontWeight: '500',
}}
    >
      Widgets
    </h2>

    <h3
      className="text-gray-900 dark:text-gray-200"
      style={{
  fontSize: '1.5rem',
  fontWeight: '500',
}}
    >
      For simpler websites
    </h3>

    <p
      className="text-gray-700 dark:text-gray-300"
      style={{
  fontSize: '1.05rem',
  marginBottom: '1rem'
}}
    >
      Integrate chat into any simple HTML, Bootstrap, or jQuery site effortlessly with our copy-and-paste code.
    </p>
  </div>

  <CardGroup cols={2}>
    <Card title="Wordpress / BuddyPress" icon="wordpress" iconType="solid" href="/docs/widget/wordpress-buddypress" horizontal />

    <Card title="HTML / Bootstrap / jQuery" icon="html5" iconType="solid" href="/docs/widget/html-bootstrap-jquery" horizontal />
  </CardGroup>
</div>