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

# Frontend SDKs

Here you will find our Frontend SDKs, designed to simplify the integration of Corbado into your frontend application. Additionally, we offer example applications that utilize our SDKs, along with links to our step-by-step integration guides.

<CardGroup cols={2}>
  <Card title="React" icon="react" iconType="brands" color="#61dafb">
    <div style={{display: 'flex', flexDirection: 'column', gap: '0.3em'}}>
      <div><a href="https://github.com/corbado/javascript/tree/develop/packages/react" target="_blank" style={badgeStyle}><span style={{verticalAlign: 'middle'}}>{githubIcon}</span> GitHub</a></div>
      <div><a href="https://github.com/corbado/example-passkeys-react" target="_blank" style={badgeStyle}><span style={{verticalAlign: 'middle'}}>{downloadIcon}</span> Example</a></div>
      <div><a href="https://app.corbado.com/integration-guides/react-hono" target="_blank" style={badgeStyle}><span style={{verticalAlign: 'middle'}}>{boltIcon}</span> React Guide</a></div>
    </div>
  </Card>

  <Card title="Angular" icon="angular" iconType="brands" color="#dd0031">
    <div style={{display: 'flex', flexDirection: 'column', gap: '0.3em'}}>
      <div><a href="https://github.com/corbado/javascript/tree/develop/packages/web-js" target="_blank" style={badgeStyle}><span style={{verticalAlign: 'middle'}}>{githubIcon}</span> GitHub</a></div>
      <div><a href="https://github.com/corbado/example-passkeys-angular" target="_blank" style={badgeStyle}><span style={{verticalAlign: 'middle'}}>{downloadIcon}</span> Example</a></div>
      <div><a href="https://app.corbado.com/integration-guides/angular" target="_blank" style={badgeStyle}><span style={{verticalAlign: 'middle'}}>{boltIcon}</span> Angular Guide</a></div>
    </div>
  </Card>

  <Card title="Vue" icon="vuejs" iconType="brands" color="#42b883">
    <div style={{display: 'flex', flexDirection: 'column', gap: '0.3em'}}>
      <div><a href="https://github.com/corbado/javascript/tree/develop/packages/web-js" target="_blank" style={badgeStyle}><span style={{verticalAlign: 'middle'}}>{githubIcon}</span> GitHub</a></div>
      <div><a href="https://github.com/corbado/example-passkeys-vuejs" target="_blank" style={badgeStyle}><span style={{verticalAlign: 'middle'}}>{downloadIcon}</span> Example</a></div>
      <div><a href="https://app.corbado.com/integration-guides/vuejs-express" target="_blank" style={badgeStyle}><span style={{verticalAlign: 'middle'}}>{boltIcon}</span> Vue Guide</a></div>
    </div>
  </Card>

  <Card title="Vanilla JS" icon="js" iconType="brands" color="#f7df1e">
    <div style={{display: 'flex', flexDirection: 'column', gap: '0.3em'}}>
      <div><a href="https://github.com/corbado/javascript/tree/develop/packages/web-js" target="_blank" style={badgeStyle}><span style={{verticalAlign: 'middle'}}>{githubIcon}</span> GitHub</a></div>
      <div><a href="https://github.com/corbado/example-passkeys-javascript" target="_blank" style={badgeStyle}><span style={{verticalAlign: 'middle'}}>{downloadIcon}</span> Example</a></div>
      <div><a href="https://app.corbado.com/integration-guides/vanillajs-express" target="_blank" style={badgeStyle}><span style={{verticalAlign: 'middle'}}>{boltIcon}</span> Vanilla JS Guide</a></div>
    </div>
  </Card>

  <Card title="Flutter" icon="flutter" iconType="brands" color="#02569b">
    <div style={{display: 'flex', flexDirection: 'column', gap: '0.3em'}}>
      <div><a href="https://github.com/corbado/flutter-passkeys" target="_blank" style={badgeStyle}><span style={{verticalAlign: 'middle'}}>{githubIcon}</span> GitHub</a></div>
      <div><a href="https://github.com/corbado/example-passkeys-flutter" target="_blank" style={badgeStyle}><span style={{verticalAlign: 'middle'}}>{downloadIcon}</span> Example</a></div>
      <div><a href="https://app.corbado.com/integration-guides/flutter" target="_blank" style={badgeStyle}><span style={{verticalAlign: 'middle'}}>{boltIcon}</span> Flutter Guide</a></div>
    </div>
  </Card>
</CardGroup>

export const githubIcon = <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.867 8.166 6.839 9.489.5.092.682-.217.682-.483 0-.237-.009-.868-.014-1.703-2.782.604-3.369-1.342-3.369-1.342-.454-1.154-1.11-1.461-1.11-1.461-.908-.62.069-.608.069-.608 1.004.07 1.532 1.032 1.532 1.032.892 1.529 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.339-2.22-.253-4.555-1.112-4.555-4.951 0-1.093.39-1.987 1.029-2.686-.103-.253-.446-1.272.098-2.65 0 0 .84-.269 2.75 1.025A9.564 9.564 0 0 1 12 6.844c.85.004 1.705.115 2.504.337 1.909-1.294 2.748-1.025 2.748-1.025.546 1.378.202 2.397.1 2.65.64.699 1.028 1.593 1.028 2.686 0 3.848-2.338 4.695-4.566 4.944.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.749 0 .268.18.579.688.481C19.135 20.162 22 16.418 22 12c0-5.523-4.477-10-10-10z" /></svg>;

export const downloadIcon = <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="7 10 12 15 17 10" /><line x1="12" y1="15" x2="12" y2="3" /></svg>;

export const boltIcon = <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" /></svg>;

export const badgeStyle = {
  display: 'inline-flex',
  alignItems: 'center',
  gap: '0.3em',
  borderRadius: '1em',
  padding: '0.2em 0.2em',
  size: '0.7em',
  color: "inherit",
  textDecoration: 'none',
  fontWeight: 500,
  transition: 'background 0.15s'
};