LARC Component Registry

The official registry for LARC web components. Browse, discover, and share components built for the LARC framework.

🌟 Features

Searchable Directory: Find components by category, tags, or keywords
Quality Verified: Components reviewed and verified by the LARC team
Try Before Install: Test components directly in the playground
NPM Integration: All components available via npm
CDN Ready: Use components directly from CDN without build steps

📦 Browse Components

Visit larcjs.com/components to browse the full registry.

🚀 Quick Start

Using a Component

# Install from npm
npm install @larcjs/ui

# Or use from CDN

<script type="importmap">
{
  "imports": {
    "@larcjs/ui": "https://cdn.jsdelivr.net/npm/@larcjs/ui@latest/dist/index.js"
  }
}
</script>

<script type="module">
  import '@larcjs/ui/pan-card';
</script>

<pan-card header="Hello World">
  Your content here
</pan-card>

Using the CLI

# Create a new LARC app
npx create-larc-app my-app

# Add a component
cd my-app
npx larc add @username/component-name

# Generate a new component
npx larc generate component my-widget

🤝 Contributing a Component

We welcome community contributions! Here's how to add your component to the registry:

Prerequisites

Publish to npm - Your component must be available on npm

Follow LARC conventions - Use PAN bus for communication

Include documentation - README with examples

Add tests (recommended) - Improves quality score

Submission Process

Fork this repository

Create a component entry in components/your-component.json:

{
  "name": "your-component",
  "displayName": "Your Component",
  "description": "Brief description of what it does",
  "category": "ui",
  "npm": {
    "package": "@username/your-component",
    "version": "1.0.0",
    "url": "https://www.npmjs.com/package/@username/your-component"
  },
  "repository": {
    "type": "github",
    "url": "https://github.com/username/your-component"
  },
  "demo": "https://username.github.io/your-component",
  "icon": "🎨",
  "tags": ["ui", "widget"],
  "status": "stable",
  "author": {
    "name": "Your Name",
    "github": "username"
  },
  "license": "MIT",
  "panTopics": ["widget:*"],
  "attributes": [
    {
      "name": "color",
      "type": "string",
      "default": "blue",
      "description": "Widget color",
      "required": false
    }
  ]
}

Submit a Pull Request

See CONTRIBUTING.md for detailed guidelines.

📋 Component Requirements

Required

✅ Published on npm
✅ Valid component name (kebab-case with at least one hyphen)
✅ Basic documentation
✅ MIT-compatible license
✅ Follows web component standards

Recommended (for better quality score)

⭐ TypeScript definitions
⭐ Unit tests
⭐ Live demo
⭐ Usage examples
⭐ PAN bus integration

🏆 Quality Badges

Components receive quality scores based on:

A Grade: Tests, types, docs, examples, verified
B Grade: Types, docs, examples
C Grade: Basic docs
D Grade: Minimal docs
F Grade: No docs

🔍 Verification

The LARC team reviews submitted components for:

✅ Security (no malicious code)
✅ Standards compliance (proper web component implementation)
✅ PAN bus usage (correct topic patterns)
✅ Documentation quality
✅ Code quality

Verified components get a ✓ badge in the registry.

📊 Statistics

Components with npm packages get automatic stats:

Monthly downloads
GitHub stars
Last updated date
Bundle size

🛠️ Development

Building the Registry

# Install dependencies
npm install

# Generate registry from component files
npm run build

# Validate registry
npm run validate

# Run tests
npm test

Local Preview

# Start registry browser locally
npm run dev

# Open http://localhost:3000

📚 Documentation

🔗 Links

📄 License

MIT License - see LICENSE for details

🙏 Credits

Built with ❤️ by the LARC community.

Special thanks to all contributors!