React & TailwindCSS Starter Component Library

## Component Library Overview ### 1. Button Components - **PrimaryButton** – Solid background with hover/focus states - **SecondaryButton** – Outline style with subtle shadow - **IconButton** – Circular button with icon support - **LoadingButton** – Button with spinner state - **ButtonGroup** – Horizontal group of connected buttons ### 2. Form Components - **InputField** – Text input with label, error, and helper text - **Textarea** – Multi-line input with character counter - **SelectDropdown** – Custom styled select with options - **CheckboxGroup** – Grouped checkboxes with label - **RadioGroup** – Grouped radio buttons with label - **FormWrapper** – Container with validation summary ### 3. Modal Components - **Modal** – Overlay dialog with backdrop blur - **ConfirmModal** – Pre-styled confirmation dialog - **SlideOver** – Side panel modal for forms/details - **Tooltip** – Hover-triggered popover ### 4. Navigation Components - **Navbar** – Responsive top navigation with mobile menu - **Sidebar** – Collapsible side navigation with icons - **Breadcrumbs** – Path navigation with separators - **Tabs** – Tabbed interface with active state - **Pagination** – Page navigation with ellipsis ### 5. Card Components - **BasicCard** – Simple card with title, description, image - **ProductCard** – E-commerce card with price, rating, add-to-cart - **ProfileCard** – User card with avatar, name, bio - **StatsCard** – Metric card with icon, value, trend - **CardGrid** – Responsive grid layout for cards ### 6. Data Display Components - **Table** – Sortable table with header, rows, pagination - **Badge** – Status badge (success, warning, error, info) - **ProgressBar** – Animated progress indicator - **Avatar** – User avatar with initials or image fallback - **ListGroup** – Ordered/unordered list with icons - **Accordion** – Expandable content sections ### 7. Utility Components - **Spinner** – Loading spinner with size variants - **Toast** – Notification toast with auto-dismiss