---
slug: "8bitcn-ui"
source_type: "readme"
source_url: "https://cdn.jsdelivr.net/gh/theorcdev/8bitcn-ui@main/README.md"
repo: "https://github.com/theorcdev/8bitcn-ui"
source_file: "README.md"
branch: "main"
---
<div align="center">

# 8bitcn/ui

<p><strong>Accessible retro components that you can copy and paste into your apps.<br>Free. Open Source. Built on shadcn/ui.</strong></p>

<a href="https://8bitcn.com">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="./public/assets/8bitcn-showcase-dark.png">
    <source media="(prefers-color-scheme: light)" srcset="./public/assets/8bitcn-showcase-light.png">
    <img alt="8bitcn/ui components" src="./public/assets/8bitcn-showcase-light.png">
  </picture>
</a>

<p>
  <a href="https://github.com/TheOrcDev/8bitcn-ui/stargazers"><img alt="Stars" src="https://shieldcn.dev/github/stars/TheOrcDev/8bitcn-ui.svg"></a>
  <a href="https://github.com/TheOrcDev/8bitcn-ui/forks"><img alt="Forks" src="https://shieldcn.dev/github/forks/TheOrcDev/8bitcn-ui.svg"></a>
  <a href="/license.md"><img alt="License" src="https://shieldcn.dev/github/license/TheOrcDev/8bitcn-ui.svg"></a>
  <a href="https://ui.shadcn.com"><img alt="Built with shadcn/ui" src="https://shieldcn.dev/badge/built_with-shadcn%2Fui.svg?logo=shadcnui"></a>
  <a href="https://github.com/sponsors/theorcdev"><img alt="Sponsor" src="https://shieldcn.dev/badge/sponsor-%E2%9D%A4.svg?logo=githubsponsors&logoColor=18181b"></a>
</p>

<p>
  <a href="https://8bitcn.com/docs"><strong>Documentation</strong></a> ·
  <a href="https://8bitcn.com/docs/components"><strong>Components</strong></a> ·
  <a href="https://8bitcn.com/docs/blocks"><strong>Blocks</strong></a> ·
  <a href="https://8bitcn.com/themes"><strong>Themes</strong></a> ·
  <a href="https://discord.com/invite/uFB5YzH9YG"><strong>Discord</strong></a>
</p>

</div>

## Contributing

Please read the [contributing guide](https://github.com/theorcdev/8bitcn-ui/blob/HEAD/contributing.md).

### Usage Example

To add the `button` component to your project, run the following command:

```bash
pnpm dlx shadcn@latest add @8bitcn/button
```

Once installed, you can import and use the component in your files:

```typescript
import { Button } from "@/components/ui/8bit";

export default function App() {
  return <Button>Click me</Button>;
}
```

**Note:** The import path `@/components/ui/8bit` assumes your project has a path alias configured (common in Next.js and similar frameworks). Adjust the path to match your project's structure if needed.

<p align="center">
  <img src="./public/images/readme/8bitcn-button-example.png" alt="8bitcn Button example" />
</p>

## License

Licensed under the [MIT license](https://github.com/theorcdev/8bitcn-ui/blob/HEAD/license.md).

## Open Source Program

<a href="https://vercel.com/oss">
  <img alt="Vercel OSS Program" src="https://vercel.com/oss/program-badge.svg" />
</a>

## Star History

[![RepoStars](https://repostars.dev/api/embed?repo=TheOrcDev%2F8bitcn-ui&theme=terminal)](https://repostars.dev/?repos=TheOrcDev%2F8bitcn-ui&theme=terminal)