---
slug: "elements"
source_type: "readme"
source_url: "https://cdn.jsdelivr.net/gh/crafter-station/elements@main/README.md"
repo: "https://github.com/crafter-station/elements"
source_file: "README.md"
branch: "main"
---
<h3 align="center">
  <a href="https://tryelements.dev" target="_blank">
    <img src="https://github.com/crafter-station/elements/blob/main/logo-elements.webp" width="80" alt="Elements Logo"/>
  </a>
  <br/>
  <span style="font-weight:600;font-size:20px;">Elements</span>
  <br/>
  <br/>
  <a href="https://github.com/crafter-station/elements/stargazers" target="_blank">
    <img src="https://img.shields.io/github/stars/crafter-station/elements?style=social" alt="GitHub stars"/>
  </a>
  &nbsp;
  <a href="https://github.com/crafter-station/elements/blob/main/LICENSE" target="_blank">
    <img src="https://img.shields.io/github/license/crafter-station/elements" alt="License"/>
  </a>
</h3>

<p align="center">
  Full-stack shadcn/ui blocks for auth, payments, AI, logos, and more. Built for Next.js, TypeScript, and the agentic era.
</p>

## Quick Start

```bash
npx shadcn@latest add @elements/clerk-sign-in
npx shadcn@latest add @elements/logos
npx shadcn@latest add @elements/polar-pricing-card
```

> Elements is a [trusted shadcn registry](https://ui.shadcn.com/docs/directory?q=elements) -- no manual config needed.

## What's Inside

| Category | Elements | Description |
|----------|----------|-------------|
| [**Brand Logos**](https://tryelements.dev/docs/logos) | 154 | Theme-adaptive logos for tech companies and AI services |
| [**Clerk**](https://tryelements.dev/docs/clerk) | 6 | Auth flows: sign-in, sign-up, org switcher, waitlist |
| [**AI Elements**](https://tryelements.dev/docs/ai-elements) | 37 | Chat, reasoning, tool calls, streaming for Vercel AI SDK |
| [**Claude Code**](https://tryelements.dev/docs/claude-code) | 12 | Automation hooks: notifications, safety guards, DX |
| [**Polar**](https://tryelements.dev/docs/polar) | 5 | Sponsorship badges, pricing cards, license keys |
| [**UploadThing**](https://tryelements.dev/docs/uploadthing) | 7 | File upload with drag & drop and progress |
| [**Upstash**](https://tryelements.dev/docs/upstash) | 5 | Rate limiting, caching, leaderboards |
| [**GitHub**](https://tryelements.dev/docs/github) | 7 | Stars, contributions, repo stats |
| [**Dev Tools**](https://tryelements.dev/docs/devtools) | 9 | JSON viewer, schema viewer, webhook tester |
| [**SFX**](https://tryelements.dev/docs/sfx) | 24 | CC0 sound effects for UI and video |
| [**Theme Switcher**](https://tryelements.dev/docs/theme) | 6 | Dark/light mode toggles with variants |
| [**Loaders**](https://tryelements.dev/docs/loaders) | 6 | Animated loading indicators |
| [**PDF**](https://tryelements.dev/docs/pdf) | 2 | PDF viewer and utilities |

Browse all at [tryelements.dev](https://tryelements.dev).

## Development

```bash
bun install
bun dev
bun run build
```

## Ecosystem

| Product | Role | URL |
|---------|------|-----|
| **Elements** | Install production-ready blocks | [tryelements.dev](https://tryelements.dev) |
| **Tinte** | Generate design systems | [tinte.dev](https://tinte.dev) |

## License

MIT License - see [LICENSE](https://github.com/crafter-station/elements/tree/HEAD/LICENSE) for details.