Feature Shadcn - UI Components Package

Shared UI component library based on shadcn-ui patterns for use across all features in the monorepo.

Overview

This package provides a centralized collection of reusable UI components that follow shadcn-ui design patterns. All components use Tailwind CSS for styling and are built with accessibility in mind.

Components

This package includes shadcn-ui style components for common UI patterns. For detailed component documentation, API references, and usage examples, please refer to the official shadcn-ui documentation.

Available components include:

• Alert - Alert, AlertTitle, AlertDescription
• Button - Button component with variants
• Card - Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, CardAction
• Field - Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldSet, FieldLegend, FieldSeparator
• Input - Text input component
• Label - Form label component (Radix UI based)
• Pagination - Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PaginationEllipsis
• Select - Select, SelectContent, SelectItem, SelectTrigger, SelectValue, SelectGroup, SelectLabel, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton
• Skeleton - Loading skeleton component for placeholder content
• Spinner - Loading spinner component
• Table - Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption
• Tabs - Tabs, TabsList, TabsTrigger, TabsContent

All components are available in the components/ui/ directory after the feature is applied to your project.

Usage

Creating a New Feature

To create a new feature that uses feature-shadcn, you can use the CLI:

npm run new-feature <feature_name>

Then add feature-shadcn as a dependency in your feature's feature.ts file.

Adding to a Feature

1. Add feature-react-shadcn as a dependency in your feature's feature.ts:

// packages/your-feature/feature.ts
import type { Feature } from "../cli/src/types.js";

const feature: Feature = {
  dependencies: ["packages/feature/feature-react-shadcn"],
  // ... rest of your feature config
};

export default feature;

2. Import components in your feature code:

// Individual imports
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

// Or use the index file for convenience
import { Button, Input, Tabs } from "@/components/ui";

Type Safety Tip: If you need to reference UI components in your feature's template files for type checking and IDE autocomplete, you can create __inherit__ files. For example, create __inherit__button.tsx in your feature's template directory and copy the component file contents. This provides type safety during development while ensuring the actual component comes from feature-shadcn when the feature is applied. The CLI automatically fixes import paths to remove the __inherit__ prefix.

Import Paths

Components are available at:

• @/components/ui/{component-name} - Individual component
• @/components/ui - All components (via index.ts)

The cn utility function is available at:

• @/lib/utils - Standard utility for className merging

Dependencies

This package requires the following npm packages (automatically installed when using this feature):

• @radix-ui/react-label - Label component primitives
• @radix-ui/react-slot - Slot component for composition
• class-variance-authority - Variant management
• clsx - Class name utility
• lucide-react - Icon library (for Spinner)
• tailwind-merge - Tailwind class merging

Architecture

• No Feature Dependencies: This package is a leaf node - it doesn't depend on any other features
• Relative Imports: Components use relative imports (../../lib/utils) to avoid path alias issues
• Template-Based: Components are provided as template files that get patched into consuming features
• TypeScript: All components are fully typed

Development

Testing Components

Since this is a template package, test components by:

1. Adding this package as a dependency to a feature
2. Running the patch system to apply components
3. Testing in the consuming feature's development environment

Updating Components

⚠️ Breaking Changes: When updating components, test all consuming features to ensure compatibility.

Best Practices

1. Use Relative Imports: Always use relative imports within this package to avoid path resolution issues
2. Maintain Accessibility: All components should follow ARIA guidelines
3. Document Props: Use TypeScript interfaces to document component props
4. Test Across Features: Test component changes in multiple consuming features
5. Version Carefully: Consider the impact of changes on all consumers

Migration Guide

If you're migrating from per-feature UI components:

1. Remove components/ui/ from your feature's template
2. Add packages/feature/feature-react-shadcn to your feature's dependencies
3. Update imports if needed (should work as-is if using @/components/ui)
4. Run the patch system to apply changes
5. Test thoroughly

Support

For issues or questions about UI components:

1. Check component documentation in source files
2. Review consuming features for usage examples
3. Test in isolation before reporting issues