137 lines
3.2 KiB
Markdown
137 lines
3.2 KiB
Markdown
---
|
|
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
|