---
name: "@elements"
slug: "elements"
description: "Elements by Crafter Station is a full-stack shadcn registry for Next.js and TypeScript that goes beyond visual UI. It bundles 154 theme-adaptive brand logos, 6 Clerk auth flow components (sign-in, sign-up, org switcher, waitlist), 37 AI/chat elements for the Vercel AI SDK (chat, reasoning, tool calls, streaming), 12 Claude Code automation components, 5 Polar monetization components (pricing cards, badges, license keys), 7 UploadThing upload components, 5 Upstash rate-limiting/caching components, 7 GitHub stats components, 9 dev-tool components (JSON viewer, webhook tester), 24 CC0 sound effects, 6 theme switchers, 6 loaders, and 2 PDF utilities. Free, MIT licensed. Use for: rapidly wiring auth, payments, AI chat, and file uploads into a Next.js app using registry-installed, source-owned blocks rather than npm packages."
category: "Component library (general)"
tags: ["ai", "audio", "auth", "blocks", "buttons", "cards", "components", "crypto", "developer-tools", "editor", "forms", "hooks", "icons", "loaders", "marketing", "media", "mobile", "navigation", "payments", "saas", "theming"]
framework: "react"
license: "MIT"
author: "crafter-station"
website: "https://www.tryelements.dev"
github: "https://github.com/crafter-station/elements"
registry: "https://www.tryelements.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 511
component_count: 250
generated_at: "2026-07-28T08:00:50.948Z"
---

# @elements

Elements by Crafter Station is a full-stack shadcn registry for Next.js and TypeScript that goes beyond visual UI. It bundles 154 theme-adaptive brand logos, 6 Clerk auth flow components (sign-in, sign-up, org switcher, waitlist), 37 AI/chat elements for the Vercel AI SDK (chat, reasoning, tool calls, streaming), 12 Claude Code automation components, 5 Polar monetization components (pricing cards, badges, license keys), 7 UploadThing upload components, 5 Upstash rate-limiting/caching components, 7 GitHub stats components, 9 dev-tool components (JSON viewer, webhook tester), 24 CC0 sound effects, 6 theme switchers, 6 loaders, and 2 PDF utilities. Free, MIT licensed. Use for: rapidly wiring auth, payments, AI chat, and file uploads into a Next.js app using registry-installed, source-owned blocks rather than npm packages.

## Links

- Website: https://www.tryelements.dev
- GitHub: https://github.com/crafter-station/elements
- Registry JSON: https://www.tryelements.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/elements
- This file: https://sh4dcn.vercel.app/md/elements.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://www.tryelements.dev/r/registry.json
pnpm dlx shadcn@latest add https://www.tryelements.dev/r/registry.json
bunx shadcn@latest add https://www.tryelements.dev/r/registry.json
# clone the source repo
git clone https://github.com/crafter-station/elements.git
# fetch the raw registry index
curl -s https://www.tryelements.dev/r/registry.json
```

## Components (250)

| name | type | description | install |
| --- | --- | --- | --- |
| ably-logo | registry:ui | Ably logo with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/ably-logo.json` |
| agent-context | registry:ui | Display and optionally edit agent context data with type indicators, nested object support, and collapsible sections. Visualizes user/team context for AI agent… | `npx shadcn@latest add https://www.tryelements.dev/r/agent-context.json` |
| agent-roster | registry:ui | Display a directory of AI agents with status indicators, match patterns, and selection support. Supports grid and list layouts for multi-agent orchestration UI… | `npx shadcn@latest add https://www.tryelements.dev/r/agent-roster.json` |
| agent-status | registry:ui | Display current agent handling a request with status indicators, animated pulse for active states, and handoff visualization for multi-agent workflows. | `npx shadcn@latest add https://www.tryelements.dev/r/agent-status.json` |
| agentic-coding | registry:block | AI coding agents, IDEs, and copilots | `npx shadcn@latest add https://www.tryelements.dev/r/agentic-coding.json` |
| agentmail-logo | registry:block | AgentMail logo with icon variant and dark/light modes | `npx shadcn@latest add https://www.tryelements.dev/r/agentmail-logo.json` |
| ai-badge | registry:block | Interactive 3D badge component with Atropos effect, customizable branding, QR code, and AI avatar support | `npx shadcn@latest add https://www.tryelements.dev/r/ai-badge.json` |
| ai-services | registry:block | Major AI service providers and LLM platforms | `npx shadcn@latest add https://www.tryelements.dev/r/ai-services.json` |
| algolia-logo | registry:ui | Algolia logo with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/algolia-logo.json` |
| amp-logo | registry:ui | Amp (by Sourcegraph) coding agent logo with icon and wordmark variants | `npx shadcn@latest add https://www.tryelements.dev/r/amp-logo.json` |
| anthropic-logo | registry:ui | Anthropic logo component with theme-adaptive colors | `npx shadcn@latest add https://www.tryelements.dev/r/anthropic-logo.json` |
| antigravity-logo | registry:ui | Google Antigravity agentic IDE logo with icon and color variants | `npx shadcn@latest add https://www.tryelements.dev/r/antigravity-logo.json` |
| api-response-viewer | registry:ui | HTTP response viewer with tabbed Body, Headers, and Timing display | `npx shadcn@latest add https://www.tryelements.dev/r/api-response-viewer.json` |
| apple-logo | registry:ui | Apple logo component with theme-adaptive colors | `npx shadcn@latest add https://www.tryelements.dev/r/apple-logo.json` |
| artifact | registry:ui | TODO: Add description | `npx shadcn@latest add https://www.tryelements.dev/r/artifact.json` |
| astro-logo | registry:block | Astro web framework logo with icon and icon-mono variants | `npx shadcn@latest add https://www.tryelements.dev/r/astro-logo.json` |
| auth0-logo | registry:ui | Auth0 logo with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/auth0-logo.json` |
| aws-all | registry:block | Complete collection of AWS service logos | `npx shadcn@latest add https://www.tryelements.dev/r/aws-all.json` |
| aws-amplify | registry:ui | AWS Amplify service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-amplify.json` |
| aws-analytics | registry:block | AWS analytics service logos | `npx shadcn@latest add https://www.tryelements.dev/r/aws-analytics.json` |
| aws-api-gateway | registry:ui | Amazon API Gateway service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-api-gateway.json` |
| aws-appsync | registry:ui | AWS AppSync service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-appsync.json` |
| aws-athena | registry:ui | Amazon Athena service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-athena.json` |
| aws-bedrock | registry:ui | Amazon Bedrock service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-bedrock.json` |
| aws-cloudformation | registry:ui | AWS CloudFormation service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-cloudformation.json` |
| aws-cloudfront | registry:ui | Amazon CloudFront service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-cloudfront.json` |
| aws-cloudwatch | registry:ui | Amazon CloudWatch service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-cloudwatch.json` |
| aws-codebuild | registry:ui | AWS CodeBuild service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-codebuild.json` |
| aws-codecommit | registry:ui | AWS CodeCommit service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-codecommit.json` |
| aws-codedeploy | registry:ui | AWS CodeDeploy service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-codedeploy.json` |
| aws-codepipeline | registry:ui | AWS CodePipeline service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-codepipeline.json` |
| aws-cognito | registry:ui | Amazon Cognito service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-cognito.json` |
| aws-compute | registry:block | AWS compute service logos | `npx shadcn@latest add https://www.tryelements.dev/r/aws-compute.json` |
| aws-database | registry:block | AWS database service logos | `npx shadcn@latest add https://www.tryelements.dev/r/aws-database.json` |
| aws-devtools | registry:block | AWS developer tool logos | `npx shadcn@latest add https://www.tryelements.dev/r/aws-devtools.json` |
| aws-dynamodb | registry:ui | Amazon DynamoDB service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-dynamodb.json` |
| aws-ec2 | registry:ui | Amazon EC2 service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-ec2.json` |
| aws-ecs | registry:ui | Amazon ECS service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-ecs.json` |
| aws-eks | registry:ui | Amazon EKS service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-eks.json` |
| aws-elastic-beanstalk | registry:ui | AWS Elastic Beanstalk service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-elastic-beanstalk.json` |
| aws-eventbridge | registry:ui | Amazon EventBridge service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-eventbridge.json` |
| aws-fargate | registry:ui | AWS Fargate service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-fargate.json` |
| aws-glue | registry:ui | AWS Glue service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-glue.json` |
| aws-iam | registry:ui | AWS IAM service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-iam.json` |
| aws-kinesis | registry:ui | Amazon Kinesis service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-kinesis.json` |
| aws-kms | registry:ui | AWS KMS service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-kms.json` |
| aws-lambda | registry:ui | AWS Lambda service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-lambda.json` |
| aws-logo | registry:ui | AWS logo component with brand orange and white | `npx shadcn@latest add https://www.tryelements.dev/r/aws-logo.json` |
| aws-messaging | registry:block | AWS messaging service logos | `npx shadcn@latest add https://www.tryelements.dev/r/aws-messaging.json` |
| aws-ml | registry:block | AWS ML service logos | `npx shadcn@latest add https://www.tryelements.dev/r/aws-ml.json` |
| aws-monitoring | registry:block | AWS monitoring service logos | `npx shadcn@latest add https://www.tryelements.dev/r/aws-monitoring.json` |
| aws-networking | registry:block | AWS networking service logos | `npx shadcn@latest add https://www.tryelements.dev/r/aws-networking.json` |
| aws-rds | registry:ui | Amazon RDS service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-rds.json` |
| aws-redshift | registry:ui | Amazon Redshift service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-redshift.json` |
| aws-route53 | registry:ui | Amazon Route 53 service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-route53.json` |
| aws-s3 | registry:ui | Amazon S3 service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-s3.json` |
| aws-sagemaker | registry:ui | Amazon SageMaker service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-sagemaker.json` |
| aws-secrets-manager | registry:ui | AWS Secrets Manager service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-secrets-manager.json` |
| aws-security | registry:block | AWS security service logos | `npx shadcn@latest add https://www.tryelements.dev/r/aws-security.json` |
| aws-serverless | registry:block | AWS serverless service logos | `npx shadcn@latest add https://www.tryelements.dev/r/aws-serverless.json` |
| aws-sns | registry:ui | Amazon SNS service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-sns.json` |
| aws-sqs | registry:ui | Amazon SQS service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-sqs.json` |
| aws-step-functions | registry:ui | AWS Step Functions service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-step-functions.json` |
| aws-storage | registry:block | AWS storage service logos | `npx shadcn@latest add https://www.tryelements.dev/r/aws-storage.json` |
| aws-vpc | registry:ui | Amazon VPC service logo component with official brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/aws-vpc.json` |
| axiom-logo | registry:ui | Axiom logo with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/axiom-logo.json` |
| bash-logo | registry:ui | Bash shell logo component | `npx shadcn@latest add https://www.tryelements.dev/r/bash-logo.json` |
| beincrypto-logo | registry:ui | BeInCrypto logo component with icon and wordmark variants | `npx shadcn@latest add https://www.tryelements.dev/r/beincrypto-logo.json` |
| better-auth-logo | registry:ui | Better Auth logo component with theme-adaptive colors | `npx shadcn@latest add https://www.tryelements.dev/r/better-auth-logo.json` |
| biome-logo | registry:ui | Biome - One toolchain for your web project | `npx shadcn@latest add https://www.tryelements.dev/r/biome-logo.json` |
| braintrust-logo | registry:ui | Braintrust logo with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/braintrust-logo.json` |
| browser-use-logo | registry:block | Browser Use logo with icon variant and dark/light modes | `npx shadcn@latest add https://www.tryelements.dev/r/browser-use-logo.json` |
| browserbase-logo | registry:block | Browserbase logo with icon and wordmark variants | `npx shadcn@latest add https://www.tryelements.dev/r/browserbase-logo.json` |
| bun-logo | registry:ui | Bun logo component - fast all-in-one JavaScript runtime | `npx shadcn@latest add https://www.tryelements.dev/r/bun-logo.json` |
| bytedance-logo | registry:ui | ByteDance logo with variant support | `npx shadcn@latest add https://www.tryelements.dev/r/bytedance-logo.json` |
| cerebras-logo | registry:ui | Cerebras logo with variant support | `npx shadcn@latest add https://www.tryelements.dev/r/cerebras-logo.json` |
| chain-of-thought | registry:ui | Visualize AI reasoning steps with search results and images for step-by-step thinking display. | `npx shadcn@latest add https://www.tryelements.dev/r/chain-of-thought.json` |
| chat | registry:ui | Main chat container with header, body, and footer sections for building AI chat interfaces | `npx shadcn@latest add https://www.tryelements.dev/r/chat.json` |
| chat-input | registry:ui | Expandable chat input with send button, file attachments, and keyboard shortcuts | `npx shadcn@latest add https://www.tryelements.dev/r/chat-input.json` |
| claude-code-logo | registry:ui | Claude Code logo with variant support | `npx shadcn@latest add https://www.tryelements.dev/r/claude-code-logo.json` |
| claude-logo | registry:ui | Claude logo component with brand orange | `npx shadcn@latest add https://www.tryelements.dev/r/claude-logo.json` |
| clerk-logo | registry:ui | Clerk logo component with variants, color schemes, modes, and backgrounds | `npx shadcn@latest add https://www.tryelements.dev/r/clerk-logo.json` |
| clerk-oauth-buttons | registry:block | Social login button group with Google, GitHub, Apple, and Microsoft. Supports default, outline, and icon-only variants with horizontal/vertical layouts. | `npx shadcn@latest add https://www.tryelements.dev/r/clerk-oauth-buttons.json` |
| clerk-org-switcher | registry:block | Organization switcher dropdown with personal account, org list with role badges, and create organization option. | `npx shadcn@latest add https://www.tryelements.dev/r/clerk-org-switcher.json` |
| clerk-sign-in | registry:block | Multi-step sign-in form with email/password and social OAuth buttons. Features step transitions, forgot password link, and clean Clerk aesthetic. | `npx shadcn@latest add https://www.tryelements.dev/r/clerk-sign-in.json` |
| clerk-sign-up | registry:block | Multi-step sign-up form with name, email, password and email verification via OTP input. Includes password strength indicator. | `npx shadcn@latest add https://www.tryelements.dev/r/clerk-sign-up.json` |
| clerk-user-button | registry:block | User avatar with dropdown menu showing profile, settings, and sign-out options. Features initials fallback and click-outside-to-close. | `npx shadcn@latest add https://www.tryelements.dev/r/clerk-user-button.json` |
| clerk-waitlist | registry:block | Waitlist signup form with email input, animated success state, and queue position display. Built for Clerk Core 3's useWaitlist() hook. | `npx shadcn@latest add https://www.tryelements.dev/r/clerk-waitlist.json` |
| cli-output | registry:ui | Terminal-style output display with ANSI color support and controls | `npx shadcn@latest add https://www.tryelements.dev/r/cli-output.json` |
| cline-logo | registry:ui | Cline autonomous coding agent logo | `npx shadcn@latest add https://www.tryelements.dev/r/cline-logo.json` |
| cloud-infrastructure | registry:block | Cloud services, infrastructure, and backend platforms | `npx shadcn@latest add https://www.tryelements.dev/r/cloud-infrastructure.json` |
| cloudflare-logo | registry:ui | Cloudflare brand logo component with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/cloudflare-logo.json` |
| cloudinary-logo | registry:ui | Cloudinary logo with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/cloudinary-logo.json` |
| code-diff-viewer | registry:ui | Side-by-side or unified diff view with syntax highlighting via Shiki | `npx shadcn@latest add https://www.tryelements.dev/r/code-diff-viewer.json` |
| codex-logo | registry:ui | OpenAI Codex coding agent logo with mono, color, and wordmark variants | `npx shadcn@latest add https://www.tryelements.dev/r/codex-logo.json` |
| cohere-logo | registry:ui | Cohere logo component with brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/cohere-logo.json` |
| composio-logo | registry:block | Composio logo with icon variant and dark/light modes | `npx shadcn@latest add https://www.tryelements.dev/r/composio-logo.json` |
| confirmation | registry:ui | Human-in-the-loop tool approval workflow with accept/reject states for agentic AI applications. | `npx shadcn@latest add https://www.tryelements.dev/r/confirmation.json` |
| continue-logo | registry:ui | Continue open-source AI code agent logo | `npx shadcn@latest add https://www.tryelements.dev/r/continue-logo.json` |
| conversation-tree | registry:ui | Visualize branching conversations with a tree structure. Shows node types (user, assistant, system, tool), expandable branches, active path highlighting, and c… | `npx shadcn@latest add https://www.tryelements.dev/r/conversation-tree.json` |
| convex-logo | registry:ui | Convex logo with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/convex-logo.json` |
| cplusplus-logo | registry:ui | C++ programming language logo component | `npx shadcn@latest add https://www.tryelements.dev/r/cplusplus-logo.json` |
| crafter-station-logo | registry:ui | Crafter Station logo component with icon, wordmark, and logo variants | `npx shadcn@latest add https://www.tryelements.dev/r/crafter-station-logo.json` |
| css-logo | registry:ui | CSS programming language logo component | `npx shadcn@latest add https://www.tryelements.dev/r/css-logo.json` |
| cursor-logo | registry:ui | Cursor - The AI Code Editor | `npx shadcn@latest add https://www.tryelements.dev/r/cursor-logo.json` |
| datadog-logo | registry:ui | Datadog logo with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/datadog-logo.json` |
| daytona-logo | registry:block | Daytona logo with icon variant and dark/light modes | `npx shadcn@latest add https://www.tryelements.dev/r/daytona-logo.json` |
| deepl-logo | registry:ui | DeepL logo with variant support | `npx shadcn@latest add https://www.tryelements.dev/r/deepl-logo.json` |
| deepseek-logo | registry:ui | DeepSeek logo component with brand purple | `npx shadcn@latest add https://www.tryelements.dev/r/deepseek-logo.json` |
| developer-tools | registry:block | Development platforms, productivity tools, and workflows | `npx shadcn@latest add https://www.tryelements.dev/r/developer-tools.json` |
| dify-logo | registry:ui | Dify logo with variant support | `npx shadcn@latest add https://www.tryelements.dev/r/dify-logo.json` |
| discord-logo | registry:ui | Discord logo component with brand purple | `npx shadcn@latest add https://www.tryelements.dev/r/discord-logo.json` |
| docker-logo | registry:block | Docker container platform logo with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/docker-logo.json` |
| drizzle-logo | registry:ui | Drizzle ORM brand logo component with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/drizzle-logo.json` |
| e2b-logo | registry:ui | E2B logo with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/e2b-logo.json` |
| elevenlabs-logo | registry:block | ElevenLabs AI voice platform logo with icon and wordmark variants | `npx shadcn@latest add https://www.tryelements.dev/r/elevenlabs-logo.json` |
| env-editor | registry:ui | Environment variable editor with key-value grid, masked values, and import/export | `npx shadcn@latest add https://www.tryelements.dev/r/env-editor.json` |
| error-boundary-ui | registry:ui | Error display component for React error boundaries with stack trace and retry | `npx shadcn@latest add https://www.tryelements.dev/r/error-boundary-ui.json` |
| exa-logo | registry:block | Exa logo with icon variant and dark/light modes | `npx shadcn@latest add https://www.tryelements.dev/r/exa-logo.json` |
| expo-logo | registry:ui | Expo logo with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/expo-logo.json` |
| fal-logo | registry:ui | fal logo with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/fal-logo.json` |
| figma-logo | registry:block | Figma brand logo with icon, icon-mono, wordmark, and logo variants | `npx shadcn@latest add https://www.tryelements.dev/r/figma-logo.json` |
| fireworks-logo | registry:ui | Fireworks logo with variant support | `npx shadcn@latest add https://www.tryelements.dev/r/fireworks-logo.json` |
| flyio-logo | registry:ui | Fly.io logo with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/flyio-logo.json` |
| gemini-logo | registry:ui | Gemini logo component with brand gradient colors | `npx shadcn@latest add https://www.tryelements.dev/r/gemini-logo.json` |
| generate-badge | registry:ui | Hook and utilities for generating badge images from SVG, with PNG/JPEG export support | `npx shadcn@latest add https://www.tryelements.dev/r/generate-badge.json` |
| ghostty-logo | registry:ui | Ghostty - A fast, feature-rich terminal emulator | `npx shadcn@latest add https://www.tryelements.dev/r/ghostty-logo.json` |
| github-activity-calendar | registry:block | The iconic GitHub contribution calendar showing activity levels throughout the year with customizable color schemes. | `npx shadcn@latest add https://www.tryelements.dev/r/github-activity-calendar.json` |
| github-contributions | registry:block | Display contribution activity grid like GitHub's profile | `npx shadcn@latest add https://www.tryelements.dev/r/github-contributions.json` |
| github-copilot-logo | registry:ui | GitHub Copilot AI coding assistant logo | `npx shadcn@latest add https://www.tryelements.dev/r/github-copilot-logo.json` |
| github-languages | registry:block | A visual language breakdown bar showing the programming languages used in a GitHub repository with percentage labels. | `npx shadcn@latest add https://www.tryelements.dev/r/github-languages.json` |
| github-logo | registry:ui | GitHub logo component with theme-aware variants | `npx shadcn@latest add https://www.tryelements.dev/r/github-logo.json` |
| github-profile-card | registry:block | A comprehensive profile card displaying GitHub user information including avatar, bio, location, company, and follower stats. | `npx shadcn@latest add https://www.tryelements.dev/r/github-profile-card.json` |
| github-repo-card | registry:block | A card component displaying GitHub repository information including name, description, stars, forks, and primary language. | `npx shadcn@latest add https://www.tryelements.dev/r/github-repo-card.json` |
| github-star-button | registry:block | An interactive star button with live star count that links to a GitHub repository. Perfect for call-to-action elements. | `npx shadcn@latest add https://www.tryelements.dev/r/github-star-button.json` |
| github-stars | registry:block | Display repository star history with area chart visualization | `npx shadcn@latest add https://www.tryelements.dev/r/github-stars.json` |
| gitlab-logo | registry:ui | GitLab logo component with brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/gitlab-logo.json` |
| go-logo | registry:ui | Go programming language logo component with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/go-logo.json` |
| google-logo | registry:ui | Google logo component with brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/google-logo.json` |
| goose-logo | registry:ui | Goose by Block open-source AI agent logo | `npx shadcn@latest add https://www.tryelements.dev/r/goose-logo.json` |
| grafana-logo | registry:ui | Grafana logo with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/grafana-logo.json` |
| grok-logo | registry:ui | Grok logo component with theme-adaptive colors | `npx shadcn@latest add https://www.tryelements.dev/r/grok-logo.json` |
| groq-logo | registry:ui | Groq logo component with brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/groq-logo.json` |
| guardrails | registry:ui | Display content moderation and safety check results with blocked/modified/approved states, before/after comparison, and override actions for AI safety workflow… | `npx shadcn@latest add https://www.tryelements.dev/r/guardrails.json` |
| handoff-chain | registry:ui | Visualize agent transition breadcrumbs showing the chain of agents with arrows, active agent highlighting, and clickable nodes for handoff details. | `npx shadcn@latest add https://www.tryelements.dev/r/handoff-chain.json` |
| hook-auto-format | registry:ui | Automatically run your project formatter (Biome, Prettier, Black, rustfmt) after Claude edits a file. | `npx shadcn@latest add https://www.tryelements.dev/r/hook-auto-format.json` |
| hook-cat-sounds | registry:ui | Play cat meow sounds when Claude Code needs your attention. Fun personality hook. | `npx shadcn@latest add https://www.tryelements.dev/r/hook-cat-sounds.json` |
| hook-context-monitor | registry:ui | Warn when Claude Code context window is running low. Alerts at 40%, 25%, and 15%. | `npx shadcn@latest add https://www.tryelements.dev/r/hook-context-monitor.json` |
| hook-guard-branch | registry:ui | Block pushes to protected branches (main, master, production). | `npx shadcn@latest add https://www.tryelements.dev/r/hook-guard-branch.json` |
| hook-guard-destructive | registry:ui | Block dangerous commands like rm -rf, git reset --hard, and DROP TABLE. | `npx shadcn@latest add https://www.tryelements.dev/r/hook-guard-destructive.json` |
| hook-guard-secrets | registry:ui | Block edits to .env files and credential files. | `npx shadcn@latest add https://www.tryelements.dev/r/hook-guard-secrets.json` |
| hook-notify-discord | registry:ui | Send a Discord notification when Claude Code needs input or finishes a task. | `npx shadcn@latest add https://www.tryelements.dev/r/hook-notify-discord.json` |
| hook-notify-macos | registry:ui | Native macOS notification when Claude Code needs input or finishes a task. | `npx shadcn@latest add https://www.tryelements.dev/r/hook-notify-macos.json` |
| hook-notify-slack | registry:ui | Send a Slack notification when Claude Code needs input or finishes a task. | `npx shadcn@latest add https://www.tryelements.dev/r/hook-notify-slack.json` |
| hook-notify-sound | registry:ui | Play a system sound when Claude Code needs input or finishes a task. Cross-platform. | `npx shadcn@latest add https://www.tryelements.dev/r/hook-notify-sound.json` |
| hook-notify-telegram | registry:ui | Send a Telegram notification when Claude Code needs input or finishes a task. | `npx shadcn@latest add https://www.tryelements.dev/r/hook-notify-telegram.json` |
| hook-session-summary | registry:ui | Generate a summary of your Claude Code session when it ends. | `npx shadcn@latest add https://www.tryelements.dev/r/hook-session-summary.json` |
| html-logo | registry:ui | HTML5 programming language logo component | `npx shadcn@latest add https://www.tryelements.dev/r/html-logo.json` |
| hugging-face-logo | registry:ui | Hugging Face logo component with brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/hugging-face-logo.json` |
| hyperbrowser-logo | registry:block | Hyperbrowser logo with icon variant and dark/light modes | `npx shadcn@latest add https://www.tryelements.dev/r/hyperbrowser-logo.json` |
| inngest-logo | registry:ui | Inngest logo with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/inngest-logo.json` |
| instagram-logo | registry:ui | Instagram logo component with brand gradient and theme-aware icon | `npx shadcn@latest add https://www.tryelements.dev/r/instagram-logo.json` |
| java-logo | registry:ui | Java programming language logo component | `npx shadcn@latest add https://www.tryelements.dev/r/java-logo.json` |
| javascript-logo | registry:ui | JavaScript programming language logo component with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/javascript-logo.json` |
| json-logo | registry:ui | JSON data format logo component | `npx shadcn@latest add https://www.tryelements.dev/r/json-logo.json` |
| json-viewer | registry:ui | Collapsible JSON tree viewer with syntax highlighting, search, and copy path | `npx shadcn@latest add https://www.tryelements.dev/r/json-viewer.json` |
| kapso-logo | registry:ui | Kapso WhatsApp notifications platform logo with icon, wordmark, and logo variants | `npx shadcn@latest add https://www.tryelements.dev/r/kapso-logo.json` |
| kebo-logo | registry:ui | Kebo logo component with brand purple | `npx shadcn@latest add https://www.tryelements.dev/r/kebo-logo.json` |
| kilo-code-logo | registry:ui | Kilo Code agentic coding platform logo with brand yellow | `npx shadcn@latest add https://www.tryelements.dev/r/kilo-code-logo.json` |
| kimi-logo | registry:ui | Kimi logo component with theme-adaptive colors | `npx shadcn@latest add https://www.tryelements.dev/r/kimi-logo.json` |
| kite-logo | registry:block | Kite logo with icon variant and dark/light modes | `npx shadcn@latest add https://www.tryelements.dev/r/kite-logo.json` |
| kotlin-logo | registry:ui | Kotlin programming language logo component | `npx shadcn@latest add https://www.tryelements.dev/r/kotlin-logo.json` |
| langchain-logo | registry:ui | LangChain logo with variant support | `npx shadcn@latest add https://www.tryelements.dev/r/langchain-logo.json` |
| langfuse-logo | registry:ui | Langfuse logo with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/langfuse-logo.json` |
| latency-meter | registry:ui | Response time visualization with TTFB and total duration display, color-coded performance indicators, animated progress bar, and compact/expanded variants. | `npx shadcn@latest add https://www.tryelements.dev/r/latency-meter.json` |
| launchdarkly-logo | registry:ui | LaunchDarkly logo with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/launchdarkly-logo.json` |
| linear-logo | registry:block | Linear issue tracking and project management platform logo with multiple variants | `npx shadcn@latest add https://www.tryelements.dev/r/linear-logo.json` |
| linkedin-logo | registry:ui | LinkedIn logo component with color schemes and variants | `npx shadcn@latest add https://www.tryelements.dev/r/linkedin-logo.json` |
| loader-cli-spinner | registry:block | 90 terminal-style text spinners in a single React component. Zero dependencies, keyboard-safe, tabular-nums for stable layout. | `npx shadcn@latest add https://www.tryelements.dev/r/loader-cli-spinner.json` |
| loader-dot-matrix | registry:block | A grid of dots with ripple, wave, and cascade animation effects | `npx shadcn@latest add https://www.tryelements.dev/r/loader-dot-matrix.json` |
| loader-glitch-text | registry:block | Text with RGB channel splitting, clip-path distortion, and character scrambling | `npx shadcn@latest add https://www.tryelements.dev/r/loader-glitch-text.json` |
| loader-helix | registry:block | DNA double-helix with dots traveling along sinusoidal paths creating a 3D illusion | `npx shadcn@latest add https://www.tryelements.dev/r/loader-helix.json` |
| loader-morphing-blob | registry:block | Polished liquid sphere with subtle organic deformation and specular highlights | `npx shadcn@latest add https://www.tryelements.dev/r/loader-morphing-blob.json` |
| loader-signal-bars | registry:block | Audio waveform / frequency spectrum bars that pulse rhythmically as a loading indicator | `npx shadcn@latest add https://www.tryelements.dev/r/loader-signal-bars.json` |
| loader-terminal-decode | registry:block | Terminal-style text decoder that cycles through random characters before resolving | `npx shadcn@latest add https://www.tryelements.dev/r/loader-terminal-decode.json` |
| logos | registry:block | All popular tech companies and services | `npx shadcn@latest add https://www.tryelements.dev/r/logos.json` |
| lovable-logo | registry:ui | Lovable logo component with brand gradient colors | `npx shadcn@latest add https://www.tryelements.dev/r/lovable-logo.json` |
| luma-logo | registry:ui | Luma logo with variant support | `npx shadcn@latest add https://www.tryelements.dev/r/luma-logo.json` |
| meilisearch-logo | registry:ui | Meilisearch logo with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/meilisearch-logo.json` |
| mem0-logo | registry:block | Mem0 logo with icon and wordmark variants | `npx shadcn@latest add https://www.tryelements.dev/r/mem0-logo.json` |
| memory-viewer | registry:ui | Display and manage working memory and conversation history with source badges, timestamps, search/filter, and add/remove functionality for agent memory systems. | `npx shadcn@latest add https://www.tryelements.dev/r/memory-viewer.json` |
| message-bubble | registry:ui | Chat message component with user/assistant variants and copy functionality | `npx shadcn@latest add https://www.tryelements.dev/r/message-bubble.json` |
| messages | registry:ui | Scrollable message list with auto-scroll to bottom and scroll-to-bottom button | `npx shadcn@latest add https://www.tryelements.dev/r/messages.json` |
| meta-logo | registry:ui | Meta logo component with brand gradient blue | `npx shadcn@latest add https://www.tryelements.dev/r/meta-logo.json` |
| microsoft-logo | registry:ui | Microsoft logo component with brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/microsoft-logo.json` |
| mistral-logo | registry:ui | Mistral logo component with brand colors | `npx shadcn@latest add https://www.tryelements.dev/r/mistral-logo.json` |
| modal-logo | registry:block | Modal logo with icon variant and dark/light modes | `npx shadcn@latest add https://www.tryelements.dev/r/modal-logo.json` |
| model-info | registry:ui | Display AI model metadata including provider, context window, capabilities badges (vision, tools, streaming, JSON, functions), pricing info, and release date. … | `npx shadcn@latest add https://www.tryelements.dev/r/model-info.json` |
| model-selector | registry:ui | A functional AI model selector with provider logos and popular models from Vercel AI Gateway. Features searchable combobox, provider icons, and model grouping. | `npx shadcn@latest add https://www.tryelements.dev/r/model-selector.json` |
| mongodb-logo | registry:block | MongoDB database logo with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/mongodb-logo.json` |
| moonshot-ai-logo | registry:ui | MoonshotAI logo component with theme-adaptive colors | `npx shadcn@latest add https://www.tryelements.dev/r/moonshot-ai-logo.json` |
| n8n-logo | registry:ui | n8n logo with variant support | `npx shadcn@latest add https://www.tryelements.dev/r/n8n-logo.json` |
| neon-logo | registry:ui | Neon database brand logo component with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/neon-logo.json` |
| nextjs-logo | registry:ui | Next.js brand logo component with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/nextjs-logo.json` |
| nodejs-logo | registry:ui | Node.js brand logo component with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/nodejs-logo.json` |
| notion-logo | registry:ui | Notion logo component with theme-adaptive colors | `npx shadcn@latest add https://www.tryelements.dev/r/notion-logo.json` |
| npm-logo | registry:ui | npm logo component - Node package manager | `npx shadcn@latest add https://www.tryelements.dev/r/npm-logo.json` |
| nvidia-logo | registry:ui | Nvidia logo with variant support | `npx shadcn@latest add https://www.tryelements.dev/r/nvidia-logo.json` |
| obsidian-logo | registry:ui | Obsidian - A knowledge base that works on local Markdown files | `npx shadcn@latest add https://www.tryelements.dev/r/obsidian-logo.json` |
| og-image-explorer | registry:block | A dev tool to audit and preview Open Graph images from all routes in your app. Visual gallery with status indicators for broken images. | `npx shadcn@latest add https://www.tryelements.dev/r/og-image-explorer.json` |
| ollama-logo | registry:ui | Ollama logo with variant support | `npx shadcn@latest add https://www.tryelements.dev/r/ollama-logo.json` |
| openai-logo | registry:ui | OpenAI logo with icon and wordmark variants | `npx shadcn@latest add https://www.tryelements.dev/r/openai-logo.json` |
| opencode-logo | registry:ui | OpenCode terminal AI coding agent pixelated wordmark | `npx shadcn@latest add https://www.tryelements.dev/r/opencode-logo.json` |
| openhands-logo | registry:ui | OpenHands AI-driven development platform logo | `npx shadcn@latest add https://www.tryelements.dev/r/openhands-logo.json` |
| package-managers | registry:block | JavaScript package managers: npm, pnpm, Yarn, and Bun | `npx shadcn@latest add https://www.tryelements.dev/r/package-managers.json` |
| page-comments | registry:block | Figma-style commenting overlay with text selection highlights, pin comments, keyboard navigation, and replies. Includes adapters for Vercel KV, Upstash, Supaba… | `npx shadcn@latest add https://www.tryelements.dev/r/page-comments.json` |
| pagerduty-logo | registry:ui | PagerDuty logo with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/pagerduty-logo.json` |
| payload-logo | registry:ui | Payload logo with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/payload-logo.json` |
| pdf-utils | registry:ui | Utility functions for PDF manipulation: extract pages, screenshots, search text, and more | `npx shadcn@latest add https://www.tryelements.dev/r/pdf-utils.json` |
| pdf-viewer | registry:ui | Multi-mode PDF viewer with single page, continuous scroll, and book layout modes | `npx shadcn@latest add https://www.tryelements.dev/r/pdf-viewer.json` |
| perplexity-logo | registry:ui | Perplexity logo component with brand teal | `npx shadcn@latest add https://www.tryelements.dev/r/perplexity-logo.json` |
| pika-logo | registry:ui | Pika logo with variant support | `npx shadcn@latest add https://www.tryelements.dev/r/pika-logo.json` |
| pipeline | registry:ui | Multi-stage workflow visualization with horizontal or vertical layout, stage status indicators, progress tracking, and expandable stage details. | `npx shadcn@latest add https://www.tryelements.dev/r/pipeline.json` |
| plan | registry:ui | TODO: Add description | `npx shadcn@latest add https://www.tryelements.dev/r/plan.json` |
| planetscale-logo | registry:ui | PlanetScale logo with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/planetscale-logo.json` |
| pnpm-logo | registry:ui | pnpm logo component - Fast, disk space efficient package manager | `npx shadcn@latest add https://www.tryelements.dev/r/pnpm-logo.json` |
| polar-license-key | registry:block | Styled license key display with masking, copy functionality, and status indicators. | `npx shadcn@latest add https://www.tryelements.dev/r/polar-license-key.json` |
| polar-logo | registry:ui | Polar logo component with brand blue | `npx shadcn@latest add https://www.tryelements.dev/r/polar-logo.json` |
| polar-pricing-card | registry:block | Product pricing card with features list, price display, and checkout CTA. Supports monthly/yearly/one-time pricing. | `npx shadcn@latest add https://www.tryelements.dev/r/polar-pricing-card.json` |
| polar-revenue-card | registry:block | MRR/ARR metric card with trend sparkline and percentage change indicator. | `npx shadcn@latest add https://www.tryelements.dev/r/polar-revenue-card.json` |
| polar-sponsor-grid | registry:block | Grid of sponsor avatars grouped by tier with customizable colors and avatar sizes. | `npx shadcn@latest add https://www.tryelements.dev/r/polar-sponsor-grid.json` |
| polar-subscription-badge | registry:block | Subscription tier badge with status indicators and automatic tier-based coloring. | `npx shadcn@latest add https://www.tryelements.dev/r/polar-subscription-badge.json` |
| postgresql-logo | registry:block | PostgreSQL database logo with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/postgresql-logo.json` |
| posthog-logo | registry:ui | PostHog logo with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/posthog-logo.json` |
| prisma-logo | registry:ui | Prisma brand logo component with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/prisma-logo.json` |
| programming-languages | registry:block | Popular programming language logos: TypeScript, JavaScript, Python, Rust, Go, and more | `npx shadcn@latest add https://www.tryelements.dev/r/programming-languages.json` |
| prompt-diff | registry:ui | Compare system prompts with side-by-side or unified diff views. Shows added/removed line highlighting, line numbers, and copy buttons. Essential for prompt eng… | `npx shadcn@latest add https://www.tryelements.dev/r/prompt-diff.json` |
| python-logo | registry:ui | Python programming language logo component with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/python-logo.json` |
| qwen-logo | registry:ui | Qwen logo component with theme-adaptive colors | `npx shadcn@latest add https://www.tryelements.dev/r/qwen-logo.json` |
| railway-logo | registry:ui | Railway logo with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/railway-logo.json` |
| raycast-logo | registry:ui | Raycast - A blazingly fast, totally extendable launcher | `npx shadcn@latest add https://www.tryelements.dev/r/raycast-logo.json` |
| react-logo | registry:ui | React brand logo component with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/react-logo.json` |
| reasoning | registry:ui | Collapsible reasoning content with streaming awareness for DeepSeek R1-style thinking visualization. | `npx shadcn@latest add https://www.tryelements.dev/r/reasoning.json` |
| redis-logo | registry:block | Redis in-memory data store logo with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/redis-logo.json` |
| render-logo | registry:ui | Render logo with dark/light mode support | `npx shadcn@latest add https://www.tryelements.dev/r/render-logo.json` |
| replicate-logo | registry:ui | Replicate logo with variant support | `npx shadcn@latest add https://www.tryelements.dev/r/replicate-logo.json` |
| replit-logo | registry:ui | Replit logo with variant support | `npx shadcn@latest add https://www.tryelements.dev/r/replit-logo.json` |
| request-inspector | registry:ui | Display raw AI request/response data with collapsible sections, JSON syntax highlighting, copy buttons, and status code badges for debugging API calls. | `npx shadcn@latest add https://www.tryelements.dev/r/request-inspector.json` |
| resend-logo | registry:block | Resend brand logo with icon and wordmark variants | `npx shadcn@latest add https://www.tryelements.dev/r/resend-logo.json` |
| response-actions | registry:ui | Action buttons for AI responses: copy, regenerate, thumbs up/down, share | `npx shadcn@latest add https://www.tryelements.dev/r/response-actions.json` |

## For AI agents

```text
You are adding components from @elements to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/elements.md) for the component list.
2. Fetch the machine-readable index: https://www.tryelements.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: elements).
```