elements

Elements UI Logo # Elements UI Library **A component library experiment built with AI-assisted workflows in mind.** Created by university students exploring how agentic coding tools like Claude Code can transform library development. We're building a collection of UI components with an architecture optimized for AI-assisted contributions. [![npm version](https://img.shields.io/npm/v/@bitbybit-b3/elements-react.svg)](https://github.com/BitByBit-B3/elements/packages) [![License](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](LICENSE) [![GitHub](https://img.shields.io/badge/GitHub-BitByBit--B3-181717?logo=github)](https://github.com/BitByBit-B3) [![Claude Code](https://img.shields.io/badge/Optimized_for-Claude_Code-7C3AED?logo=anthropic)](https://www.anthropic.com/claude)

The Problem With Component Libraries

Contributing to traditional component libraries means hours of manual work: fixing imports, updating configs, managing dependencies, writing docs. It’s a barrier that keeps great components trapped in private projects.

How Elements UI Solves This

We’ve architected a system where agentic coding tools do the heavy lifting. Point Claude Code at your components, and automated workflows handle everything from import resolution to CI/CD updates.

What Makes This Different

Workflow Comparison

Traditional approach (2-3 hours per component):

1. Copy component code
2. Manually fix all imports
3. Update package.json dependencies
4. Configure build tools
5. Update exports in index.ts
6. Write documentation
7. Test everything manually
8. Create PR with all configs

With Elements UI (5 minutes):

# Using Claude Code or similar agentic tools
/update-components ~/my-project/components

# The automation handles:
# - Framework detection and package selection
# - Import path resolution and fixing
# - Dependency analysis and updates
# - Build configuration
# - CI/CD workflow integration
# - Documentation generation

Designed for Agentic Tools

Elements UI includes automation workflows that agentic coding assistants can execute:

Component Updates: Detect frameworks (React, Vue, Svelte, Next.js), create packages as needed, resolve imports, manage dependencies, update CI/CD

Package Creation: Scaffold new framework packages with TypeScript, build tools, and GitHub Actions integration—all through natural language instructions

Quick Start

npm install @bitbybit-b3/elements-react
# or
pnpm add @bitbybit-b3/elements-react

import { Button, Card, Dialog } from "@bitbybit-b3/elements-react";

function App() {
  return (
    <Card>
      <Button variant="default">Lightning Fast</Button>
    </Card>
  );
}

The Vision

The Problem We’re Tackling

Traditional component libraries:

Our Experiment:

What We’re Learning

This is an active experiment in AI-assisted development. We’re exploring:

Components

A growing collection of 49+ UI components built with Radix UI primitives and Tailwind CSS. Components focus on accessibility and modern React patterns.

View all components **Layout & Structure** - **Card** - Content containers - **Separator** - Visual dividers - **Aspect Ratio** - Media containers - **Scroll Area** - Custom scrolling - **Resizable** - Adjustable panels - **Sidebar** - App navigation **Forms & Inputs** - **Button** - Interactive buttons - **Input** - Text inputs - **Input OTP** - One-time password - **Textarea** - Multi-line text - **Checkbox** - Binary selection - **Radio Group** - Single selection - **Select** - Dropdown selection - **Switch** - Toggle controls - **Slider** - Range selection - **Label** - Form labels - **Form** - Form management **Navigation** - **Tabs** - Tabbed interfaces - **Accordion** - Collapsible sections - **Breadcrumb** - Navigation paths - **Navigation Menu** - Site navigation - **Menubar** - App menus - **Dropdown Menu** - Action menus - **Context Menu** - Right-click menus - **Pagination** - Page controls **Overlays & Dialogs** - **Dialog** - Modal windows - **Alert Dialog** - Confirmations - **Sheet** - Side panels - **Drawer** - Mobile panels - **Popover** - Floating content - **Hover Card** - Rich tooltips - **Tooltip** - Helpful hints **Feedback & Status** - **Alert** - Important messages - **Toast** - Notifications - **Sonner** - Toast alternative - **Progress** - Progress bars - **Skeleton** - Loading states - **Badge** - Status indicators **Data Display** - **Table** - Data tables - **Avatar** - Profile images - **Calendar** - Date pickers - **Chart** - Data visualization - **Carousel** - Content sliders **Advanced** - **Command** - Command palette - **Collapsible** - Expandable content - **Toggle** - Toggle buttons - **Toggle Group** - Toggle groups

Contributing with AI Assistance

What You’ll Need

An agentic coding assistant that can:

Optimized for: Claude Code, Cursor, GitHub Copilot, or similar tools

We’ve built slash commands that work with AI assistants:

  1. Fork and clone: 
    git clone https://github.com/YOUR_USERNAME/elements.git
cd elements
  2. Tell your AI assistant: 
    "Add the components from ~/my-project/components to this library"
  3. AI automatically:
    • Scans your components
    • Detects framework
    • Creates packages if needed
    • Fixes imports
    • Updates dependencies
    • Configures builds
    • Updates CI/CD
    • Creates documentation
  4. Done! Just review and commit.

Method 2: Use Slash Commands Directly

If your AI supports custom commands (we use them in our workflow):

# Update library with components from another project
/update-components ~/path/to/components

# Create a new framework package
/create-package elements-vue vue

# AI handles all configuration automatically

Method 3: Traditional (Manual)

Step-by-step manual process 1. Fork repository 2. Create feature branch 3. Add/modify components 4. Update exports in `packages/react/src/index.ts` 5. Add dependencies to `package.json` 6. Run `pnpm typecheck` and `pnpm build` 7. Create PR See [CONTRIBUTING.md](/elements/CONTRIBUTING.md) for details.

The AI-Expandable Architecture

How It Works

elements/
├── packages/
│   ├── react/          # React components
│   ├── core/           # Design tokens
│   ├── nextjs/         # Auto-created when needed
│   ├── vue/            # Auto-created when needed
│   ├── svelte/         # Auto-created when needed
│   └── utils/          # Auto-created when needed
├── .claude/            # AI automation commands (works with any AI)
│   └── commands/
│       ├── update-components.md   # Intelligent updater
│       └── create-package.md      # Package generator
└── .github/
    └── workflows/      # Self-scaling CI/CD
        └── publish.yml # Auto-detects new packages

Intelligent Automation

Our automation commands (usable by any AI):

Component Update Command:

Package Creation Command:

Self-Scaling Infrastructure

GitHub Actions that adapt automatically:

Why This Approach Matters

For Learning

Traditional barrier: Understanding complex build configs and tooling Our approach: Agentic tools abstract the complexity

Benefits:

For the Future

About Our Components

Components built using:

Packages

Current Packages

Package Description Status
@bitbybit-b3/elements-react React components Published (experimental)
@bitbybit-b3/elements-core Design tokens Published (experimental)

Potential Future Packages

Architecture supports auto-creation of framework-specific packages:

The system can expand when contributors add components for new frameworks.

Roadmap

What We’ve Built

What We’re Exploring

Framework Support

Built by BitByBit-B3

Organization: BitByBit-B3

Team (university students exploring AI-assisted development):

Want to experiment with us? Try the AI-assisted workflow and share your feedback!

Documentation

Tech Stack

FAQ

What makes this different from other component libraries?

We’re experimenting with agentic workflows for library contributions. Instead of manually managing build configs and dependencies, tools like Claude Code can handle that automatically through custom automation commands.

Was this built by AI?

No! Built by our team of university students. We designed the architecture to work seamlessly WITH agentic coding tools, but humans wrote the code and make the decisions.

What tools work with this?

The architecture is optimized for Claude Code, but works with any agentic coding assistant that can:

Also compatible with: Cursor, GitHub Copilot, and similar tools.

Do I need AI tools to use the components?

Not at all! Install and use like any npm package:

npm install @bitbybit-b3/elements-react

Agentic tools are only needed if you want to contribute using our automated workflows.

Is this production-ready?

This is an experimental/learning project by university students. Components use modern patterns (TypeScript, Radix UI, Tailwind), but consider it a proof-of-concept for AI-assisted development rather than battle-tested production code.

Use at your own discretion and feel free to contribute improvements!

Why build this?

We wanted to explore: Can agentic tools like Claude Code actually streamline open source contribution? This project is our answer—an experiment in making contribution workflows faster and more accessible through intelligent automation.

License

Apache 2.0 - See LICENSE for details.

An experiment in AI-assisted development Built by BitByBit-B3 university students Optimized for Claude Code and agentic workflows
This site is open source. Improve this page.