---
title: Discord Components
description: Discord message components to easily build and display fake Discord messages on your webpage.
template: splash
hero:
    tagline: Discord message components to easily build and display fake Discord messages on your webpage.
    image:
        file: ../../assets/discord-components-logo.png
    actions:
        - text: Documentation
          link: /api/readme
          icon: right-arrow
          variant: primary
---

import { Card, CardGrid, Code, Icon } from '@astrojs/starlight/components';
import { Tabs, TabItem } from '@astrojs/starlight/components';
import { npmToBun, npmToYarn, npmToPnpm } from '@sapphire/docusaurus-plugin-npm2yarn2pnpm';
import Templates from '../../components/astro/framework-grid.astro';

<CardGrid stagger>
	<Card title="Installation Core package" icon="seti:html">
		<Tabs>
		<TabItem label="npm" icon="seti:npm">
			<Code code="npm install @skyra/discord-components-core" lang="sh"></Code>
		</TabItem>
		<TabItem label="yarn" icon="seti:yarn">
			<Code code={npmToYarn("npm install @skyra/discord-components-core")} lang="sh"></Code>
		</TabItem>
		<TabItem label="pnpm" icon="pnpm">
			<Code code={npmToPnpm("npm install @skyra/discord-components-core")} lang="sh"></Code>
		</TabItem>
		<TabItem label="bun" icon="bun">
			<Code code={npmToBun("npm install @skyra/discord-components-core")} lang="sh"></Code>
		</TabItem>
		</Tabs>
	</Card>

    <Card title="Installation React bindings" icon="seti:html">
    	<Tabs>
    		<TabItem label="npm" icon="seti:npm">
    			<Code code="npm install @skyra/discord-components-react" lang="sh"></Code>
    		</TabItem>
    		<TabItem label="yarn" icon="seti:yarn">
    			<Code code={npmToYarn('npm install @skyra/discord-components-react')} lang="sh"></Code>
    		</TabItem>
    		<TabItem label="pnpm" icon="pnpm">
    			<Code code={npmToPnpm('npm install @skyra/discord-components-react')} lang="sh"></Code>
    		</TabItem>
    		<TabItem label="bun" icon="bun">
    			<Code code={npmToBun('npm install @skyra/discord-components-react')} lang="sh"></Code>
    		</TabItem>
    	</Tabs>
    </Card>

</CardGrid>

<Templates />
