UI Components

A collection of reusable React UI components built with Tailwind CSS and Framer Motion. Features a modern, minimalist design language with decorative corner accents, uppercase typography, and smooth animations.

Features

• Modern design with decorative corner bracket accents
• Geist font with uppercase labels and buttons
• Smooth Framer Motion animations (sliding hovers, spring transitions)
• Custom color palette (pumpkin orange primary, warm neutrals)
• Tree-shakeable exports
• TypeScript support

Installation

npm install @campnetwork/ui-kit

Usage

Import the components and styles:

import { Button } from "@campnetwork/ui-kit/button";
import "@campnetwork/ui-kit/styles.css";

function App() {
  return <Button>Click me</Button>;
}

Available Components

Core

• Button - Animated button with sliding hover effect, corner accents, variants (default, inverted, action, outline, ghost, link)
• Input - Text input with border styling and orange focus ring
• Label - Uppercase label with Geist font
• Form - Form wrapper with validation support (FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage)

Layout

• Card - Card container with corner accents (Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, InfoCard, ItemCard, FeatureCard)
• Box - Generic container with corner accents
• Divider - Dashed divider line

Overlays

• Dialog - Modal dialog with Framer Motion animations, backdrop blur, corner accents
• Alert Dialog - Confirmation dialog with same styling
• Drawer - Slide-out drawer from bottom
• Dropdown - Animated dropdown menu
• Tooltip - Dark tooltip with animations

Feedback

• Toast - Notification toasts via Sonner
• Loader - BarLoader and SpinLoader components

Data Entry

• Switch - Toggle switch with spring animation and corner accents
• Slider - Range slider with orange fill, custom thumb, corner accents
• PriceInput - Number input with asset selector dropdown
• PriceDisplay - Formatted price display with icon

Other

• Scroll Area - Custom scrollable area
• Responsive Dialog - Dialog that adapts to screen size
• Code - Code display component

Utilities

• cn - Utility for merging class names (clsx + tailwind-merge)
• theme - Resolved Tailwind theme with typed colors
• hooks - Custom React hooks (useIsMobile, useKeyboardShortcut, useResizeObserver, useScrollPosition)
• corner - CornerSVG and CornerAccents decorative components

Design Tokens

The component library uses these custom Tailwind colors:

• pumpkin-* - Primary orange palette (50-950), main accent is pumpkin-600 (#FF6D01)
• border - Border color (#D7D5D3)
• surface - Background surfaces (white, alt: #E6E2DF, muted: #f9f7f4)
• text - Text colors (primary: #1A1A1A, secondary: #8c8c8c)

Font: Geist (Google Fonts) for a clean, modern look.

Development

npm install      # Install dependencies
npm run build    # Build CSS
npm run dev      # Watch mode
npm run lint     # Run ESLint

Peer Dependencies

{
  "react": ">=18.0.0",
  "react-dom": ">=18.0.0"
}

License

MIT