Hello World

A simple test component for the Waghubinger Registry. Demonstrates basic component structure, client-side state management, and Tailwind styling.

Features

• Interactive counter with state management
• Customizable greeting name
• Client-side React component
• Tailwind CSS styling with theme support
• Zero dependencies (only React)

Installation

Install this component via the Waghubinger Registry:

pnpm dlx shadcn add https://registry.tools.asscompact.at/r/hello-world.json?token=YOUR_TOKEN

What gets installed:

• Components: 1 file (hello-world.tsx)
• No additional dependencies required

Prerequisites

Before using this component, ensure you have:

• Next.js 14+ with App Router
• React 18+
• TypeScript 5+
• Tailwind CSS configured

Quick Start

Basic Usage

Here's a minimal working example:

'use client'

import { HelloWorld } from "@/components/hello-world/hello-world"

export default function ExamplePage() {
  return (
    <div className="container mx-auto p-8">
      <HelloWorld />
    </div>
  )
}

With Custom Name

'use client'

import { HelloWorld } from "@/components/hello-world/hello-world"

export default function ExamplePage() {
  return (
    <div className="container mx-auto p-8">
      <HelloWorld name="Thomas" />
      <HelloWorld name="Waghubinger" />
    </div>
  )
}

Component API

Props

TypeScript Interface

export interface HelloWorldProps {
  name?: string
}

Examples

See the /examples folder for complete working examples:

• basic-usage.tsx - Minimal setup and basic usage

Customization

Styling

This component uses Tailwind CSS and can be customized by modifying the source:

// Modify the component after installation in your project
<div className="p-6 border rounded-lg shadow-sm bg-card">
  {/* Component content */}
</div>

The component respects your theme configuration for:

• primary colors (button background)
• primary-foreground (button text)
• muted-foreground (secondary text)

Troubleshooting

Problem: Component not rendering

Symptoms: Component doesn't appear or shows errors

Solution:

1. Ensure you're using 'use client' at the top of your page/component
2. Verify Tailwind CSS is properly configured
3. Check that the import path is correct: @/components/hello-world/hello-world

Problem: Styles not applied

Symptoms: Component appears unstyled

Solution: Ensure Tailwind is configured to scan the component:

// tailwind.config.ts
module.exports = {
  content: [
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    // ... other paths
  ],
}

Use Cases

This component is primarily for:

• Testing registry installation
• Learning registry structure
• Template for creating new components
• Demo purposes

Contributing

Found a bug or want to contribute? This component is part of the Waghubinger Registry.

Development Setup:

1. Clone the registry repository
2. Make your changes in registry/waghubinger/hello-world/
3. Test in the /app/hello-world/ demo page
4. Update this README if adding features
5. Update CHANGELOG.md with your changes
6. Rebuild registry: pnpm registry:build

License

MIT License - Part of Waghubinger Registry

Support

For issues or questions:

1. Check the Troubleshooting section above
2. Review the Examples folder
3. Check the Changelog for recent updates

---

Version: 1.0.0 Last Updated: 2025-01-03 Registry: https://registry.tools.asscompact.at Documentation: https://registry.tools.asscompact.at/hello-world