# component-creator

> React/TypeScript component development with shadcn/ui. Use for building reusable UI components.

- Author: Wonjun_gram
- Repository: ownuun/kpi
- Version: 20251229105107
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/ownuun/kpi
- Web: https://mule.run/skillshub/@@ownuun/kpi~component-creator:20251229105107

---

---
name: component-creator
description: React/TypeScript component development with shadcn/ui. Use for building reusable UI components.
---

# Component Creator Skill

Expert in creating React/TypeScript components with shadcn/ui.

## Component Pattern

```typescript
// components/ui/metric-card.tsx
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';

interface MetricCardProps {
  title: string;
  value: string | number;
  change?: number;
  icon?: React.ReactNode;
}

export function MetricCard({ title, value, change, icon }: MetricCardProps) {
  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
        <CardTitle className="text-sm font-medium">{title}</CardTitle>
        {icon}
      </CardHeader>
      <CardContent>
        <div className="text-2xl font-bold">{value}</div>
        {change !== undefined && (
          <p className="text-xs text-muted-foreground">
            {change > 0 ? '+' : ''}{change}% from last month
          </p>
        )}
      </CardContent>
    </Card>
  );
}
```

## Form Component Pattern

```typescript
'use client';

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';

const schema = z.object({
  name: z.string().min(1),
  email: z.string().email(),
});

type FormData = z.infer<typeof schema>;

export function UserForm() {
  const form = useForm<FormData>({
    resolver: zodResolver(schema),
  });

  async function onSubmit(data: FormData) {
    await fetch('/api/users', {
      method: 'POST',
      body: JSON.stringify(data),
    });
  }

  return (
    <form onSubmit={form.handleSubmit(onSubmit)}>
      <Input {...form.register('name')} />
      <Input {...form.register('email')} type="email" />
      <Button type="submit">Submit</Button>
    </form>
  );
}
```