---
name: shadcn-ui
description: Create beautiful, accessible React Native components following shadcn/ui design principles. Use for building UI components with consistent styling, proper TypeScript types, and accessibility features.
---

# shadcn/ui Style Components for React Native

This skill helps create React Native components following shadcn/ui design principles:

## Core Principles

1. **Component Philosophy**
   - Components are copied into the project (not npm installed)
   - Full ownership and customization
   - TypeScript-first with proper type definitions
   - Composable and reusable

2. **Design Tokens**
   - Use the project's theme system from `src/lib/theme/index.ts`
   - Consistent spacing, colors, and typography
   - Support light/dark mode if configured

3. **Component Structure**
   ```typescript
   import React from 'react';
   import { View, Text, StyleSheet } from 'react-native';
   import { theme } from '@/lib/theme';

   export interface ComponentProps {
     variant?: 'default' | 'outline' | 'ghost';
     size?: 'sm' | 'md' | 'lg';
     // Add prop types
   }

   export function Component({ variant = 'default', size = 'md', ...props }: ComponentProps) {
     return (
       <View style={[styles.base, styles[variant], styles[size]]}>
         {/* Component content */}
       </View>
     );
   }

   const styles = StyleSheet.create({
     base: {
       // Base styles
     },
     // Variant styles
     default: {},
     outline: {},
     ghost: {},
     // Size styles
     sm: {},
     md: {},
     lg: {},
   });
   ```

4. **Accessibility**
   - Always include `accessibilityLabel`
   - Use `accessibilityRole` appropriately
   - Support `accessibilityHint` when helpful
   - Test with screen readers

5. **Common Patterns**

   **Button Component:**
   - Variants: default, outline, ghost, destructive
   - Sizes: sm, md, lg
   - States: disabled, loading
   - Supports press feedback

   **Card Component:**
   - Header, Content, Footer sections
   - Optional borders and shadows
   - Consistent padding

   **Input Component:**
   - Label and error message support
   - Focus states
   - Validation feedback

   **Badge Component:**
   - Variants: default, success, warning, error
   - Compact sizing

6. **File Organization**
   - Place components in `src/components/`
   - Export from `src/components/index.ts`
   - Keep component + styles in same file
   - Create compound components when needed

7. **Styling Approach**
   - Use StyleSheet.create for performance
   - Leverage theme tokens
   - Support style prop for overrides
   - Use flexbox for layouts

## Examples

### Button with Variants
```typescript
<Button variant="outline" size="lg" onPress={handlePress}>
  Click me
</Button>
```

### Card Composition
```typescript
<Card>
  <Card.Header>
    <Card.Title>Title</Card.Title>
  </Card.Header>
  <Card.Content>
    Content here
  </Card.Content>
</Card>
```

### Form Input
```typescript
<Input
  label="Email"
  value={email}
  onChangeText={setEmail}
  error={errors.email}
  accessibilityLabel="Email input"
/>
```

## When to Use This Skill

- Creating new UI components
- Refactoring existing components to be more consistent
- Adding variants or sizes to components
- Improving component accessibility
- Establishing a design system