47 | {React.Children.map(children, (child, index) => {
48 | if (index === React.Children.count(children) - 1) return child;
49 | return (
50 | <>
51 | {child}
52 |
58 |
59 | );
60 | })}
61 |
62 | );
63 | }
64 |
65 | return (
66 |
73 | );
74 | }
--------------------------------------------------------------------------------
/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React from 'react';
4 | import { cn } from '@/lib/utils';
5 | import { useTheme } from '@/hooks/use-theme';
6 |
7 | interface TextareaProps extends React.TextareaHTMLAttributes
34 |
56 | {(error || helperText) && (
57 |
65 | );
66 | }
--------------------------------------------------------------------------------
/components/ui/breadcrumb.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React from 'react';
4 | import { ChevronRight } from 'lucide-react';
5 | import { cn } from '@/lib/utils';
6 | import { useTheme } from '@/hooks/use-theme';
7 |
8 | export interface BreadcrumbItem {
9 | label: string;
10 | href?: string;
11 | icon?: React.ReactNode;
12 | }
13 |
14 | interface BreadcrumbProps {
15 | items: BreadcrumbItem[];
16 | separator?: React.ReactNode;
17 | className?: string;
18 | }
19 |
20 | export function Breadcrumb({
21 | items,
22 | separator = 61 | {error || helperText} 62 |
63 | )} 64 |
76 | {Array.from({ length: lines }).map((_, i) => (
77 |
84 | );
85 | }
--------------------------------------------------------------------------------
/components/ui/grid.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React from 'react';
4 | import { useTheme } from '@/hooks/use-theme';
5 | import { cn } from '@/lib/utils';
6 |
7 | interface GridProps extends React.HTMLAttributes
74 | {children}
75 |
76 | );
77 | }
--------------------------------------------------------------------------------
/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React from 'react';
4 | import { motion, AnimatePresence } from 'framer-motion';
5 | import { Check } from 'lucide-react';
6 | import { cn } from '@/lib/utils';
7 | import { useTheme } from '@/hooks/use-theme';
8 |
9 | interface CheckboxProps {
10 | checked?: boolean;
11 | onChange?: (checked: boolean) => void;
12 | label?: string;
13 | disabled?: boolean;
14 | className?: string;
15 | }
16 |
17 | export function Checkbox({
18 | checked = false,
19 | onChange,
20 | label,
21 | disabled = false,
22 | className,
23 | }: CheckboxProps) {
24 | const { theme } = useTheme();
25 |
26 | return (
27 |
68 | );
69 | }
--------------------------------------------------------------------------------
/components/ui/radio.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React from 'react';
4 | import { motion } from 'framer-motion';
5 | import { cn } from '@/lib/utils';
6 | import { useTheme } from '@/hooks/use-theme';
7 |
8 | interface RadioProps {
9 | checked?: boolean;
10 | onChange?: (checked: boolean) => void;
11 | label?: string;
12 | disabled?: boolean;
13 | className?: string;
14 | value: string;
15 | name: string;
16 | }
17 |
18 | export function Radio({
19 | checked = false,
20 | onChange,
21 | label,
22 | disabled = false,
23 | className,
24 | value,
25 | name,
26 | }: RadioProps) {
27 | const { theme } = useTheme();
28 |
29 | return (
30 |
77 | );
78 | }
--------------------------------------------------------------------------------
/components/ui/spinner.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React from 'react';
4 | import { motion } from 'framer-motion';
5 | import { useTheme } from '@/hooks/use-theme';
6 | import { cn } from '@/lib/utils';
7 |
8 | export interface SpinnerProps extends React.HTMLAttributes
41 | {[1, 2, 3].map((i) => (
42 |
61 | );
62 | }
63 |
64 | return (
65 |
81 | {children}
82 |
83 |
68 | {childrenArray.map((child, index) => (
69 |
70 | {child}
71 | {dividers && index < childrenArray.length - 1 && (
72 |
82 | )}
83 |
84 | ))}
85 |
86 | );
87 | }
--------------------------------------------------------------------------------
/components/ui/divider.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React from 'react';
4 | import { useTheme } from '@/hooks/use-theme';
5 | import { cn } from '@/lib/utils';
6 |
7 | export interface DividerProps {
8 | orientation?: 'horizontal' | 'vertical';
9 | variant?: 'solid' | 'dashed' | 'dotted';
10 | size?: 'thin' | 'medium' | 'thick';
11 | label?: React.ReactNode;
12 | className?: string;
13 | }
14 |
15 | export function Divider({
16 | orientation = 'horizontal',
17 | variant = 'solid',
18 | size = 'medium',
19 | label,
20 | className
21 | }: DividerProps) {
22 | const { theme } = useTheme();
23 |
24 | const sizeStyles = {
25 | thin: '1px',
26 | medium: '2px',
27 | thick: '4px'
28 | };
29 |
30 | const baseStyles = {
31 | backgroundColor: theme.colors.border,
32 | borderStyle: variant,
33 | borderColor: theme.colors.border
34 | };
35 |
36 | if (orientation === 'vertical') {
37 | return (
38 |
50 | );
51 | }
52 |
53 | if (label) {
54 | return (
55 |
56 |
68 | {label}
69 |
81 |
82 | );
83 | }
84 |
85 | return (
86 |
98 | );
99 | }
--------------------------------------------------------------------------------
/components/ui/toast-provider.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React, { useState, useCallback, createContext, useContext } from 'react';
4 | import type { ToastProps } from '@/components/ui/toast';
5 | import { Toast } from '@/components/ui/toast';
6 | import { AnimatePresence, motion } from 'framer-motion';
7 |
8 | interface ToastContextType {
9 | toasts: ToastProps[];
10 | toast: (options: Omit
32 |
33 | {toasts.map((toast) => (
34 |
41 |
43 | ))}
44 |
45 |
46 |
66 | {children}
67 | {removable && (
68 |
86 | )}
87 |
88 | );
89 | }
90 |
91 | export { Badge, badgeVariants };
--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React from 'react';
4 | import { cn } from '@/lib/utils';
5 | import { useTheme } from '@/hooks/use-theme';
6 |
7 | interface InputProps extends React.InputHTMLAttributes
59 | {label && (
60 |
63 | )}
64 |
97 | );
98 | }
99 | );
--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React from 'react';
4 | import { cn } from '@/lib/utils';
5 | import { useTheme } from '@/hooks/use-theme';
6 |
7 | interface ButtonProps extends React.ButtonHTMLAttributes
65 | {leftIcon && (
66 |
90 | {helperText && (
91 |
67 | {leftIcon}
68 |
69 | )}
70 |
84 | {rightIcon && (
85 |
86 | {rightIcon}
87 |
88 | )}
89 | {helperText}
92 | )} 93 | {error && ( 94 |{error}
95 | )} 96 |
93 | {React.createElement(icons[type], {
94 | size: 20,
95 | color: getTypeColor(),
96 | })}
97 |
98 | )}
99 |
100 |
101 | {title && (
102 |
110 |
111 | {dismissible && (
112 |
118 | )}
119 | 103 | {title} 104 |
105 | )} 106 |
107 | {children}
108 |
109 |
43 | {items.map((stat, index) => (
44 |
47 | );
48 | }
49 |
50 | export function Stat({
51 | title,
52 | value,
53 | description,
54 | icon,
55 | trend,
56 | variant = 'default',
57 | size = 'md',
58 | className,
59 | }: StatProps) {
60 | const { theme } = useTheme();
61 |
62 | const variants = {
63 | default: 'bg-white/5 border border-white/10',
64 | gradient: 'bg-gradient-to-br from-primary/20 to-secondary/20 border border-white/10',
65 | outline: 'border border-white/20 bg-transparent',
66 | };
67 |
68 | const sizes = {
69 | sm: 'p-4',
70 | md: 'p-6',
71 | lg: 'p-8',
72 | };
73 |
74 | return (
75 |
87 | {icon && (
88 |
110 |
111 |
92 | {icon}
93 |
94 | )}
95 | {trend && (
96 |
100 | {trend.direction === 'up' ? '↑' : '↓'}
101 | {trend.value}%
102 | {trend.label && (
103 |
104 | {trend.label}
105 |
106 | )}
107 |
108 | )}
109 |
112 |
118 | {title}
113 |{value}
114 | {description && ( 115 |{description}
116 | )} 117 |
43 | 0 && 'ml-6'
48 | )}
49 | onClick={handleClick}
50 | whileTap={{ scale: 0.98 }}
51 | >
52 | {hasChildren && (
53 |
58 |
60 | )}
61 | {!hasChildren && }
62 |
67 |
68 |
69 | {isExpanded && children && (
70 |
76 | {children.map((child) => (
77 |
86 | )}
87 |
88 |
89 | );
90 | };
91 |
92 | export function Tree({ data, defaultExpanded = false, onNodeClick, className }: TreeProps) {
93 | return (
94 |
63 | {icon || (hasChildren ?
65 | {label}
66 |
95 | {data.map((node) => (
96 |
105 | );
106 | }
--------------------------------------------------------------------------------
/components/ui/form.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React from 'react';
4 | import { useTheme } from '@/hooks/use-theme';
5 | import { cn } from '@/lib/utils';
6 | import { motion, AnimatePresence } from 'framer-motion';
7 | import { AlertCircle, CheckCircle } from 'lucide-react';
8 |
9 | export interface FormProps extends React.FormHTMLAttributes
71 | {label && (
72 |
76 | )}
77 | {children}
78 |
79 | {error && (
80 |
85 | {error}
86 |
87 | )}
88 |
89 |
90 | );
91 | }
92 |
93 | export function FormMessage({ children, type = 'error', className }: FormMessageProps) {
94 | const { theme } = useTheme();
95 |
96 | return (
97 |
105 | {type === 'error' ? (
106 |
112 | );
113 | }
--------------------------------------------------------------------------------
/components/ui/progress.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React from 'react';
4 | import { motion } from 'framer-motion';
5 | import { useTheme } from '@/hooks/use-theme';
6 | import { cn } from '@/lib/utils';
7 |
8 | interface ProgressProps {
9 | value?: number;
10 | variant?: 'default' | 'gradient' | 'striped' | 'indeterminate';
11 | size?: 'sm' | 'md' | 'lg' | 'xl';
12 | color?: 'primary' | 'success' | 'warning' | 'error';
13 | gradientFrom?: string;
14 | gradientTo?: string;
15 | showValue?: boolean;
16 | animated?: boolean;
17 | className?: string;
18 | }
19 |
20 | export function Progress({
21 | value = 0,
22 | variant = 'default',
23 | size = 'md',
24 | color = 'primary',
25 | gradientFrom,
26 | gradientTo,
27 | showValue = false,
28 | animated = false,
29 | className,
30 | }: ProgressProps) {
31 | const { theme } = useTheme();
32 |
33 | const sizes = {
34 | sm: 'h-1',
35 | md: 'h-2',
36 | lg: 'h-3',
37 | xl: 'h-4',
38 | };
39 |
40 | const colors = {
41 | primary: theme.colors.primary,
42 | success: theme.colors.success,
43 | warning: theme.colors.warning,
44 | error: theme.colors.error,
45 | };
46 |
47 | const getBackgroundStyle = () => {
48 | if (variant === 'gradient') {
49 | return {
50 | background: `linear-gradient(to right, ${gradientFrom || theme.colors.primary}, ${gradientTo || theme.colors.secondary})`,
51 | };
52 | }
53 |
54 | if (variant === 'striped') {
55 | return {
56 | background: `linear-gradient(45deg,
57 | ${colors[color]}88 25%,
58 | ${colors[color]} 25%,
59 | ${colors[color]} 50%,
60 | ${colors[color]}88 50%,
61 | ${colors[color]}88 75%,
62 | ${colors[color]} 75%,
63 | ${colors[color]})`,
64 | backgroundSize: '1rem 1rem',
65 | };
66 | }
67 |
68 | return {
69 | backgroundColor: colors[color],
70 | };
71 | };
72 |
73 | return (
74 |
75 |
119 | );
120 | }
121 |
122 | export type { ProgressProps };
--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import Link from 'next/link';
4 | import { ChevronRight, Feather, Package, Palette, Sparkles, Zap, Github } from 'lucide-react';
5 | import { BackgroundPattern } from '@/components/background-pattern';
6 | import { FeatureCard } from '@/components/feature-card';
7 | import { CodeBlock } from '@/components/code-block';
8 | import { Button } from '@/components/ui/button';
9 |
10 | const features = [
11 | {
12 | icon:
82 | {variant === 'indeterminate' ? (
83 |
113 | {showValue && variant !== 'indeterminate' && (
114 |
115 | {value}%
116 |
117 | )}
118 |
53 |
93 |
54 |
80 |
81 |
55 |
60 | 57 | ParrotUI 58 |
59 |61 | A beautiful React component library built specifically for Next.js App Router, 62 | combining the best features of Mantine and shadcn/ui. 63 |
64 |
65 |
69 | Get Started
70 |
79 |
82 | {features.map((feature, i) => (
83 |
86 |
87 |
88 |
90 |
91 |
92 |
60 | {/* Overlay */}
61 |
85 | {/* Default Header */}
86 | {!header && title && (
87 |
111 |
112 | )}
113 |
88 |
98 | )}
99 |
100 | {/* Custom Header */}
101 | {header}
102 |
103 | {/* Content */}
104 | 89 | {title} 90 |
91 | 97 |
105 | {children}
106 |
107 |
108 | {/* Footer */}
109 | {footer}
110 |
57 | {steps.map((step, index) => {
58 | const isCompleted = currentStep > index + 1;
59 | const isCurrent = currentStep === index + 1;
60 | const isLast = index === steps.length - 1;
61 |
62 | return (
63 |
119 | );
120 | }
--------------------------------------------------------------------------------
/components/ui/timeline.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React from 'react';
4 | import { useTheme } from '@/hooks/use-theme';
5 | import { cn } from '@/lib/utils';
6 | import { Circle } from 'lucide-react';
7 |
8 | export interface TimelineItem {
9 | id: string;
10 | title: string;
11 | description?: string;
12 | date?: string;
13 | icon?: React.ReactNode;
14 | status?: 'complete' | 'current' | 'upcoming';
15 | }
16 |
17 | interface TimelineProps {
18 | items: TimelineItem[];
19 | orientation?: 'vertical' | 'horizontal';
20 | variant?: 'default' | 'alternate' | 'compact';
21 | showConnectors?: boolean;
22 | className?: string;
23 | }
24 |
25 | export function Timeline({
26 | items,
27 | orientation = 'vertical',
28 | variant = 'default',
29 | showConnectors = true,
30 | className,
31 | }: TimelineProps) {
32 | const { theme } = useTheme();
33 |
34 | const getStatusColor = (status?: TimelineItem['status']) => {
35 | switch (status) {
36 | case 'complete':
37 | return theme.colors.success;
38 | case 'current':
39 | return theme.colors.primary;
40 | case 'upcoming':
41 | return theme.colors.muted;
42 | default:
43 | return theme.colors.border;
44 | }
45 | };
46 |
47 | const timelineClasses = cn(
48 | 'relative',
49 | orientation === 'horizontal' ? 'flex' : 'flex flex-col',
50 | className
51 | );
52 |
53 | const itemClasses = cn(
54 | 'relative flex',
55 | orientation === 'horizontal' ? 'flex-col items-center px-4' : 'items-start',
56 | variant === 'compact' && 'gap-2',
57 | variant !== 'compact' && 'gap-4'
58 | );
59 |
60 | const renderConnector = (index: number) => {
61 | if (!showConnectors || index === items.length - 1) return null;
62 |
63 | return (
64 |
73 | );
74 | };
75 |
76 | return (
77 |
70 |
116 | );
117 | })}
118 |
71 |
84 | {isCompleted ? (
85 |
90 |
91 | {!isLast && (
92 |
99 | )}
100 |
101 |
102 |
108 |
115 | {step.title}
109 | {step.description && (
110 |
111 | {step.description}
112 |
113 | )}
114 |
78 | {items.map((item, index) => (
79 |
125 | );
126 | }
--------------------------------------------------------------------------------
/components/ui/list.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React from 'react';
4 | import { cn } from '@/lib/utils';
5 | import { motion } from 'framer-motion';
6 | import { useTheme } from '@/hooks/use-theme';
7 | import { Check, Circle, ChevronRight } from 'lucide-react';
8 |
9 | export interface ListProps extends React.HTMLAttributes
92 |
123 | ))}
124 |
93 |
101 |
102 |
97 | {item.icon ||
99 | {renderConnector(index)}
100 |
103 |
122 |
104 |
121 | 105 | {item.title} 106 |
107 | {item.date && ( 108 | 109 | {item.date} 110 | 111 | )} 112 | {item.description && ( 113 |117 | {item.description} 118 |
119 | )} 120 |
103 | {(icon ||
129 |
105 | {icon ||
107 | )}
108 |
109 | {title && (
110 |
120 | {dismissible && (
121 |
127 | )}
128 | 111 | {title} 112 |
113 | )} 114 | {description && ( 115 |116 | {description} 117 |
118 | )} 119 |
57 | !disabled && setIsOpen(!isOpen)}
60 | style={{
61 | borderColor: theme.colors.border,
62 | backgroundColor: `${theme.colors.background}40`,
63 | color: theme.colors.text,
64 | }}
65 | className={cn(
66 | "w-full flex items-center justify-between px-4 py-2 rounded-xl",
67 | "backdrop-blur-xl border",
68 | "text-sm focus:outline-none",
69 | "transition-all duration-200",
70 | disabled && "opacity-50 cursor-not-allowed",
71 | className
72 | )}
73 | >
74 |
75 | {selectedOption ? selectedOption.label : placeholder}
76 |
77 |
81 |
83 |
84 |
85 |
86 | {isOpen && (
87 |
98 |
122 | )}
123 |
124 |
125 | );
126 | }
--------------------------------------------------------------------------------
/components/ui/color-picker.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React, { useState, useRef, useEffect } from 'react';
4 | import { useTheme } from '@/hooks/use-theme';
5 | import { cn } from '@/lib/utils';
6 | import { motion, AnimatePresence } from 'framer-motion';
7 | import { Check, ChevronDown } from 'lucide-react';
8 |
9 | export interface ColorPickerProps {
10 | value?: string;
11 | onChange?: (color: string) => void;
12 | presetColors?: string[];
13 | disabled?: boolean;
14 | className?: string;
15 | showInput?: boolean;
16 | showPresets?: boolean;
17 | }
18 |
19 | export function ColorPicker({
20 | value = '#000000',
21 | onChange,
22 | presetColors = [
23 | '#FF6B6B', '#4ECDC4', '#45B7D1', '#A8E6CF', '#FF8E53',
24 | '#F472B6', '#8B5CF6', '#3B82F6', '#2DD4BF', '#F59E0B'
25 | ],
26 | disabled = false,
27 | className,
28 | showInput = true,
29 | showPresets = true,
30 | }: ColorPickerProps) {
31 | const { theme } = useTheme();
32 | const [isOpen, setIsOpen] = useState(false);
33 | const [inputValue, setInputValue] = useState(value);
34 | const containerRef = useRef
99 | {options.map((option) => (
100 | handleSelect(option)}
104 | style={{
105 | color: theme.colors.text,
106 | backgroundColor: selectedOption?.value === option.value ? `${theme.colors.primary}20` : 'transparent',
107 | }}
108 | className={cn(
109 | "w-full px-4 py-2 text-sm text-left",
110 | "transition-colors duration-150 flex items-center space-x-2"
111 | )}
112 | >
113 |
117 | {option.label}
118 |
119 | ))}
120 |
121 |
73 |
103 | {isOpen && (
104 |
111 | {showPresets && (
112 |
128 | )}
129 |
130 |
131 | );
132 | }
--------------------------------------------------------------------------------
/app/components/checkbox/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React, { useState } from 'react';
4 | import { motion } from 'framer-motion';
5 | import { Checkbox } from '@/components/ui/checkbox';
6 | import { CodeBlock } from '@/components/code-block';
7 |
8 | const installCode = `npm install @parrot-ui/react`;
9 |
10 | const usageCode = `import { Checkbox } from '@parrot-ui/react';
11 |
12 | function App() {
13 | const [checked, setChecked] = useState(false);
14 |
15 | return (
16 | !disabled && setIsOpen(!isOpen)}
79 | style={{ borderColor: isOpen ? theme.colors.primary : undefined }}
80 | >
81 |
85 | {showInput && (
86 | e.stopPropagation()}
92 | />
93 | )}
94 |
101 |
102 |
113 | {presetColors.map((color) => (
114 |
124 | ))}
125 |
126 | )}
127 |
31 |
36 |
45 |
48 |
49 | {/* Usage */}
50 |
51 |
54 |
55 | {/* Examples */}
56 |
57 |
96 |
97 | {/* Props */}
98 |
99 |
139 |
140 |
141 | );
142 | }
--------------------------------------------------------------------------------
/app/manifest/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React from 'react';
4 | import { motion } from 'framer-motion';
5 | import { CodeBlock } from '@/components/code-block';
6 | import { Bot, Users, Sparkles, Github } from 'lucide-react';
7 |
8 | const installCode = `npm install @parrot-ui/react`;
9 |
10 | export default function ManifestPage() {
11 | return (
12 | 37 | Checkbox 38 |
39 |40 | A customizable checkbox component with smooth animations. 41 |
42 | 43 | {/* Installation */} 44 |Installation
46 |Usage
52 |Examples
58 | 59 | {/* Basic */} 60 |
61 |
70 |
71 | {/* Checked by default */}
72 | Basic Checkbox
62 |
63 |
69 |
73 |
82 |
83 | {/* Disabled */}
84 | Checked by Default
74 |
75 |
81 |
85 |
95 | Disabled State
86 |
87 |
94 | Props
100 |
101 |
102 |
103 |
137 |
138 | | Prop | 105 |Type | 106 |Default | 107 |Description | 108 |
|---|---|---|---|
| checked | 113 |boolean | 114 |false | 115 |Whether the checkbox is checked | 116 |
| onChange | 119 |(checked: boolean) ={'>'} void | 120 |undefined | 121 |Called when the checkbox state changes | 122 |
| label | 125 |string | 126 |undefined | 127 |Label text for the checkbox | 128 |
| disabled | 131 |boolean | 132 |false | 133 |Whether the checkbox is disabled | 134 |
13 |
18 |
30 |
48 |
49 | {/* Key Features */}
50 |
51 |
73 |
74 | {/* Installation */}
75 |
76 |
82 |
83 | {/* Design Decisions */}
84 |
85 |
103 |
104 | {/* Future Plans */}
105 |
106 |
118 |
119 | {/* AI and Contributions */}
120 |
121 |
122 |
123 | );
124 | }
--------------------------------------------------------------------------------
/app/components/button/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React from 'react';
4 | import { motion } from 'framer-motion';
5 | import { ArrowRight, Heart, Mail, Plus } from 'lucide-react';
6 | import { Button } from '@/components/ui/button';
7 | import { CodeBlock } from '@/components/code-block';
8 |
9 | const variants = ['primary', 'secondary', 'outline', 'ghost', 'link', 'gradient'] as const;
10 | const sizes = ['sm', 'md', 'lg', 'xl'] as const;
11 |
12 | const installCode = `npm install @parrot-ui/react`;
13 |
14 | const usageCode = `import { Button } from '@parrot-ui/react';
15 |
16 | function App() {
17 | return (
18 | 19 | ParrotUI Manifest 20 |
21 |22 | Our vision for a modern React component library that combines the best of Mantine and shadcn/ui. 23 |
24 | 25 | 26 | 27 | {/* Rest of the manifest content remains the same */} 28 | {/* Core Principles */} 29 |Core Principles
31 |
32 |
47 | -
33 |
- 34 | Next.js First: Built specifically for Next.js App Router, ensuring optimal performance and seamless integration. 35 | 36 |
- 37 | Best of Both Worlds: Combines Mantine's powerful features and flexibility with shadcn/ui's simplicity and copy-paste approach. 38 | 39 |
- 40 | Modern DX: TypeScript-first development with excellent autocompletion and type safety. 41 | 42 |
- 43 | Flexible Theming: CSS variables-based theme system that's powerful yet easy to customize. 44 | 45 |
Key Features
52 |
53 |
72 |
54 |
62 | Mantine-Inspired Features
55 |-
56 |
- • Powerful theme system with CSS variables 57 |
- • Rich set of hooks for common use cases 58 |
- • Flexible component APIs 59 |
- • Built-in dark mode support 60 |
63 |
71 | shadcn/ui-Inspired Features
64 |-
65 |
- • Copy-paste component approach 66 |
- • Tailwind CSS integration 67 |
- • Beautifully designed components 68 |
- • Full source code access 69 |
Installation
77 |79 | ParrotUI is designed to work exclusively with Next.js App Router projects, ensuring optimal performance and integration. 80 |
81 |Design Decisions
86 |
87 |
102 | -
88 |
- 89 | Next.js Exclusivity: By focusing solely on Next.js App Router, we can provide better optimizations and integrations. 90 | 91 |
- 92 | CSS Variables: Using CSS variables for theming provides better performance and easier customization than CSS-in-JS. 93 | 94 |
- 95 | Tailwind Integration: Leveraging Tailwind CSS for utility classes while maintaining component-specific styles. 96 | 97 |
- 98 | Framer Motion: Using Framer Motion for smooth, performant animations that enhance user experience. 99 | 100 |
Future Plans
107 |
108 |
117 | -
109 |
- Expanding component library with more advanced components 110 |
- Adding more hooks for common use cases 111 |
- Improving documentation and examples 112 |
- Building a community around ParrotUI 113 |
- Creating templates and starter kits 114 |
- Fostering AI and human collaboration in open source 115 |
19 | {/* Basic usage */}
20 |
21 |
22 | {/* With variants */}
23 |
24 |
25 |
26 |
27 | {/* With sizes */}
28 |
29 |
30 |
31 | {/* With icons */}
32 | }>Send Email
33 | }>Next
34 |
35 | {/* States */}
36 |
37 |
38 |
39 | );
40 | }`;
41 |
42 | export default function ButtonDocs() {
43 | return (
44 |
45 |
50 |
59 |
62 |
63 | {/* Usage */}
64 |
65 |
68 |
69 | {/* Basic Example */}
70 |
71 |
78 |
79 | {/* Variants */}
80 |
81 |
90 |
91 | {/* Props Table */}
92 |
93 |
133 |
134 |
135 | );
136 | }
--------------------------------------------------------------------------------
/app/components/select/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React, { useState } from 'react';
4 | import { motion } from 'framer-motion';
5 | import { Select } from '@/components/ui/select';
6 | import { CodeBlock } from '@/components/code-block';
7 |
8 | const installCode = `npm install @parrot-ui/react`;
9 |
10 | const usageCode = `import { Select } from '@parrot-ui/react';
11 |
12 | function App() {
13 | const options = [
14 | { value: 'react', label: 'React' },
15 | { value: 'vue', label: 'Vue' },
16 | { value: 'svelte', label: 'Svelte' },
17 | ];
18 |
19 | const [value, setValue] = useState('');
20 |
21 | return (
22 |
28 | );
29 | }`;
30 |
31 | export default function SelectPage() {
32 | const [value, setValue] = useState('');
33 | const [multiValue, setMultiValue] = useState('');
34 |
35 | const options = [
36 | { value: 'react', label: 'React' },
37 | { value: 'vue', label: 'Vue' },
38 | { value: 'svelte', label: 'Svelte' },
39 | { value: 'angular', label: 'Angular' },
40 | { value: 'nextjs', label: 'Next.js' },
41 | ];
42 |
43 | return (
44 | 51 | Button 52 |
53 |54 | A versatile button component with multiple variants, sizes, and states. 55 |
56 | 57 | {/* Installation */} 58 |Installation
60 |Usage
66 |Basic Usage
72 |
73 |
74 | }>With Icon
75 |
76 |
77 | Variants
82 |
83 | {variants.map((variant) => (
84 |
87 | ))}
88 |
89 | Props
94 |
95 |
96 |
97 |
131 |
132 | | Prop | 99 |Type | 100 |Default | 101 |Description | 102 |
|---|---|---|---|
| variant | 107 |primary | secondary | outline | ghost | link | gradient | 108 |primary | 109 |The visual style of the button | 110 |
| size | 113 |sm | md | lg | xl | icon | 114 |md | 115 |The size of the button | 116 |
| leftIcon | 119 |ReactNode | 120 |undefined | 121 |Icon to show before the button text | 122 |
| rightIcon | 125 |ReactNode | 126 |undefined | 127 |Icon to show after the button text | 128 |
45 |
50 |
59 |
62 |
63 | {/* Usage */}
64 |
65 |
68 |
69 | {/* Examples */}
70 |
71 |
100 |
101 | {/* Props */}
102 |
103 |
149 |
150 |
151 | );
152 | }
--------------------------------------------------------------------------------
/app/components/theme/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React from 'react';
4 | import { motion } from 'framer-motion';
5 | import { useTheme } from '@/hooks/use-theme';
6 | import { Button } from '@/components/ui/button';
7 | import { Input } from '@/components/ui/input';
8 | import { Palette, Type, Maximize, Grid } from 'lucide-react';
9 | import { CodeBlock } from '@/components/code-block';
10 |
11 | const exampleCode = `// 1. Import the ThemeProvider
12 | import { ThemeProvider } from '@parrot-ui/react';
13 |
14 | // 2. Create your custom theme
15 | const myTheme = {
16 | colors: {
17 | primary: '#FF6B6B',
18 | secondary: '#4ECDC4',
19 | // ... other colors
20 | },
21 | gradients: {
22 | primary: 'from-[#FF6B6B] to-[#FF8E53]',
23 | // ... other gradients
24 | },
25 | borderRadius: '0.5rem',
26 | fontFamily: 'Inter, sans-serif'
27 | };
28 |
29 | // 3. Wrap your app with ThemeProvider
30 | function App() {
31 | return (
32 | 51 | Select 52 |
53 |54 | A customizable select component with search and keyboard navigation. 55 |
56 | 57 | {/* Installation */} 58 |Installation
60 |Usage
66 |Examples
72 | 73 | {/* Basic */} 74 |
75 |
85 |
86 | {/* Disabled */}
87 | Basic Select
76 |
77 |
83 |
84 |
88 |
99 | Disabled State
89 |
90 |
97 |
98 | Props
104 |
105 |
106 |
107 |
147 |
148 | | Prop | 109 |Type | 110 |Default | 111 |Description | 112 |
|---|---|---|---|
| options | 117 |SelectOption[] | 118 |required | 119 |Array of options to display | 120 |
| value | 123 |string | 124 |undefined | 125 |Currently selected value | 126 |
| onChange | 129 |(value: string) ={'>'} void | 130 |undefined | 131 |Called when selection changes | 132 |
| placeholder | 135 |string | 136 |"Select option" | 137 |Placeholder text | 138 |
| disabled | 141 |boolean | 142 |false | 143 |Whether the select is disabled | 144 |
43 |
48 |
78 |
81 |
82 | {/* Live Theme Preview */}
83 |
84 |
105 |
106 | {/* Theme Structure */}
107 |
108 |
143 |
144 |
145 | );
146 | }
--------------------------------------------------------------------------------
/app/components/switch/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React, { useState } from 'react';
4 | import { motion } from 'framer-motion';
5 | import { Switch } from '@/components/ui/switch';
6 | import { CodeBlock } from '@/components/code-block';
7 |
8 | const installCode = `npm install @parrot-ui/react`;
9 |
10 | const usageCode = `import { Switch } from '@parrot-ui/react';
11 |
12 | function App() {
13 | const [enabled, setEnabled] = useState(false);
14 |
15 | return (
16 | 49 | Theme System 50 |
51 |52 | A comprehensive guide to ParrotUI's theming system and customization options. 53 |
54 | 55 | {/* Quick Links */} 56 |
57 | {[
58 | { icon:
75 |
76 | {/* Theme Configuration Example */}
77 | Theme Configuration
79 |Live Theme Preview
85 |
86 |
104 |
87 |
95 |
96 | Button Variants
88 |
89 |
90 |
91 |
92 |
93 |
94 |
97 |
103 | Input Fields
98 |
99 |
100 |
101 |
102 | Theme Structure
109 |
110 |
111 |
112 |
141 |
142 | | Property | 114 |Type | 115 |Description | 116 |
|---|---|---|
| colors | 121 |ThemeColors | 122 |Color palette configuration | 123 |
| typography | 126 |ThemeTypography | 127 |Typography settings | 128 |
| spacing | 131 |ThemeSpacing | 132 |Spacing scale configuration | 133 |
| breakpoints | 136 |ThemeBreakpoints | 137 |Responsive breakpoints | 138 |
31 |
36 |
45 |
48 |
49 | {/* Usage */}
50 |
51 |
54 |
55 | {/* Examples */}
56 |
57 |
101 |
102 | {/* Props */}
103 |
104 |
150 |
151 |
152 | );
153 | }
--------------------------------------------------------------------------------
/components/ui/calendar.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React, { useState } from 'react';
4 | import { motion, AnimatePresence } from 'framer-motion';
5 | import { useTheme } from '@/hooks/use-theme';
6 | import { cn } from '@/lib/utils';
7 | import { ChevronLeft, ChevronRight } from 'lucide-react';
8 |
9 | export interface CalendarProps {
10 | value?: Date;
11 | onChange?: (date: Date) => void;
12 | minDate?: Date;
13 | maxDate?: Date;
14 | disabled?: boolean;
15 | className?: string;
16 | variant?: 'default' | 'outline' | 'ghost';
17 | size?: 'sm' | 'md' | 'lg';
18 | }
19 |
20 | export function Calendar({
21 | value,
22 | onChange,
23 | minDate,
24 | maxDate,
25 | disabled = false,
26 | className,
27 | variant = 'default',
28 | size = 'md',
29 | }: CalendarProps) {
30 | const { theme } = useTheme();
31 | const [currentDate, setCurrentDate] = useState(value || new Date());
32 | const [viewDate, setViewDate] = useState(value || new Date());
33 |
34 | const daysInMonth = new Date(
35 | viewDate.getFullYear(),
36 | viewDate.getMonth() + 1,
37 | 0
38 | ).getDate();
39 |
40 | const firstDayOfMonth = new Date(
41 | viewDate.getFullYear(),
42 | viewDate.getMonth(),
43 | 1
44 | ).getDay();
45 |
46 | const monthNames = [
47 | 'January', 'February', 'March', 'April', 'May', 'June',
48 | 'July', 'August', 'September', 'October', 'November', 'December'
49 | ];
50 |
51 | const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
52 |
53 | const handleDateClick = (day: number) => {
54 | if (disabled) return;
55 |
56 | const newDate = new Date(viewDate.getFullYear(), viewDate.getMonth(), day);
57 |
58 | if (minDate && newDate < minDate) return;
59 | if (maxDate && newDate > maxDate) return;
60 |
61 | setCurrentDate(newDate);
62 | onChange?.(newDate);
63 | };
64 |
65 | const handlePrevMonth = () => {
66 | setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() - 1));
67 | };
68 |
69 | const handleNextMonth = () => {
70 | setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() + 1));
71 | };
72 |
73 | const isCurrentDate = (day: number) => {
74 | return (
75 | currentDate.getDate() === day &&
76 | currentDate.getMonth() === viewDate.getMonth() &&
77 | currentDate.getFullYear() === viewDate.getFullYear()
78 | );
79 | };
80 |
81 | const isToday = (day: number) => {
82 | const today = new Date();
83 | return (
84 | today.getDate() === day &&
85 | today.getMonth() === viewDate.getMonth() &&
86 | today.getFullYear() === viewDate.getFullYear()
87 | );
88 | };
89 |
90 | const isDisabled = (day: number) => {
91 | if (disabled) return true;
92 |
93 | const date = new Date(viewDate.getFullYear(), viewDate.getMonth(), day);
94 | if (minDate && date < minDate) return true;
95 | if (maxDate && date > maxDate) return true;
96 |
97 | return false;
98 | };
99 |
100 | const sizeClasses = {
101 | sm: 'text-sm',
102 | md: 'text-base',
103 | lg: 'text-lg',
104 | };
105 |
106 | const variantClasses = {
107 | default: 'bg-white/5 border border-white/10',
108 | outline: 'border border-white/20 bg-transparent',
109 | ghost: 'bg-transparent',
110 | };
111 |
112 | return (
113 | 37 | Switch 38 |
39 |40 | A beautiful switch component with smooth animations and multiple sizes. 41 |
42 | 43 | {/* Installation */} 44 |Installation
46 |Usage
52 |Examples
58 | 59 | {/* Sizes */} 60 |
61 |
83 |
84 | {/* Disabled */}
85 | Sizes
62 |
63 |
82 |
86 |
100 | Disabled State
87 |
88 |
99 | Props
105 |
106 |
107 |
108 |
148 |
149 | | Prop | 110 |Type | 111 |Default | 112 |Description | 113 |
|---|---|---|---|
| checked | 118 |boolean | 119 |false | 120 |Whether the switch is checked | 121 |
| onChange | 124 |(checked: boolean) ={'>'} void | 125 |undefined | 126 |Called when the switch state changes | 127 |
| label | 130 |string | 131 |undefined | 132 |Label text for the switch | 133 |
| size | 136 |sm | md | lg | 137 |md | 138 |Size of the switch | 139 |
| disabled | 142 |boolean | 143 |false | 144 |Whether the switch is disabled | 145 |
121 | {/* Header */}
122 |
190 | );
191 | }
--------------------------------------------------------------------------------
/components/sidebar.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React, { useState } from 'react';
4 | import Link from 'next/link';
5 | import { motion, AnimatePresence } from 'framer-motion';
6 | import { ChevronDown, Feather, Layers, Layout, Navigation2, Database, MessageSquare, FileText, Settings } from 'lucide-react';
7 |
8 | const componentGroups = {
9 | 'Core': ['Button', 'Input', 'Select', 'Checkbox', 'Radio', 'Switch', 'Toggle', 'Textarea', 'Badge'],
10 | 'Layout': ['Container', 'Grid', 'Stack', 'Divider', 'Space', 'AspectRatio'],
11 | 'Navigation': ['Menu', 'Tabs', 'Breadcrumb', 'Pagination', 'Stepper'],
12 | 'Data': ['Table', 'List', 'Tree', 'Timeline', 'Calendar', 'Stats'],
13 | 'Feedback': ['Alert', 'Toast', 'Progress', 'Spinner', 'Skeleton', 'Modal'],
14 | 'Forms': ['Form', 'DatePicker', 'TimePicker', 'Upload', 'ColorPicker'],
15 | 'Customization': ['Theme', 'Colors']
16 | };
17 |
18 | const groupIcons = {
19 | 'Core': Layers,
20 | 'Layout': Layout,
21 | 'Navigation': Navigation2,
22 | 'Data': Database,
23 | 'Feedback': MessageSquare,
24 | 'Forms': FileText,
25 | 'Customization': Settings
26 | };
27 |
28 | const groupGradients = {
29 | 'Core': 'from-[#FF6B6B] to-[#FF8E53]',
30 | 'Layout': 'from-[#4ECDC4] to-[#45B7D1]',
31 | 'Navigation': 'from-[#A8E6CF] to-[#3EECAC]',
32 | 'Data': 'from-[#3B82F6] to-[#2DD4BF]',
33 | 'Feedback': 'from-[#F472B6] to-[#EC4899]',
34 | 'Forms': 'from-[#8B5CF6] to-[#6366F1]',
35 | 'Customization': 'from-[#F59E0B] to-[#EF4444]'
36 | };
37 |
38 | export function Sidebar() {
39 | const [activeGroup, setActiveGroup] = useState
123 |
130 |
141 |
142 | {/* Days of Week */}
143 | 131 | {monthNames[viewDate.getMonth()]} {viewDate.getFullYear()} 132 |
133 | 140 |
144 | {dayNames.map((day) => (
145 |
153 |
154 | {/* Calendar Grid */}
155 |
149 | {day}
150 |
151 | ))}
152 |
156 | {Array.from({ length: firstDayOfMonth }).map((_, index) => (
157 |
158 | ))}
159 | {Array.from({ length: daysInMonth }).map((_, index) => {
160 | const day = index + 1;
161 | const isSelected = isCurrentDate(day);
162 | const isTodayDate = isToday(day);
163 | const isDisabledDate = isDisabled(day);
164 |
165 | return (
166 | handleDateClick(day)}
171 | disabled={isDisabledDate}
172 | className={cn(
173 | 'aspect-square rounded-full flex items-center justify-center relative',
174 | isSelected && 'bg-primary text-white',
175 | !isSelected && isTodayDate && 'border-2 border-primary',
176 | !isSelected && !isTodayDate && 'hover:bg-white/10',
177 | isDisabledDate && 'opacity-50 cursor-not-allowed'
178 | )}
179 | style={{
180 | backgroundColor: isSelected ? theme.colors.primary : undefined,
181 | borderColor: isTodayDate ? theme.colors.primary : undefined,
182 | }}
183 | >
184 | {day}
185 |
186 | );
187 | })}
188 |
189 |
49 | {/* Logo Section */}
50 |
132 |
51 |
52 |
57 |
59 |
67 |
68 | {/* Navigation */}
69 |
131 |
60 |
61 | ParrotUI
62 |
63 | Component Library
64 |
65 |
66 |
83 | handleFiles(e.target.files)}
89 | className="hidden"
90 | disabled={disabled}
91 | />
92 |
93 | {/* Drop Zone */}
94 |
130 | {files.length > 0 && (
131 |
137 | {files.map((file, index) => (
138 |
172 | )}
173 |
174 |
175 | );
176 | }
--------------------------------------------------------------------------------
/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React, { useState, useEffect } from 'react';
4 | import { motion, AnimatePresence } from 'framer-motion';
5 | import { cn } from '@/lib/utils';
6 | import { useTheme } from '@/hooks/use-theme';
7 |
8 | interface TabsProps {
9 | defaultValue?: string;
10 | value?: string;
11 | onValueChange?: (value: string) => void;
12 | variant?: 'default' | 'pills' | 'underline' | 'gradient';
13 | size?: 'sm' | 'md' | 'lg';
14 | orientation?: 'horizontal' | 'vertical';
15 | children: React.ReactNode;
16 | className?: string;
17 | }
18 |
19 | interface TabListProps {
20 | children: React.ReactNode;
21 | className?: string;
22 | }
23 |
24 | interface TabTriggerProps {
25 | value: string;
26 | disabled?: boolean;
27 | icon?: React.ReactNode;
28 | children: React.ReactNode;
29 | className?: string;
30 | }
31 |
32 | interface TabContentProps {
33 | value: string;
34 | children: React.ReactNode;
35 | className?: string;
36 | }
37 |
38 | const TabsContext = React.createContext<{
39 | selectedTab: string;
40 | setSelectedTab: (value: string) => void;
41 | variant: TabsProps['variant'];
42 | size: TabsProps['size'];
43 | orientation: TabsProps['orientation'];
44 | } | null>(null);
45 |
46 | export function Tabs({
47 | defaultValue,
48 | value,
49 | onValueChange,
50 | variant = 'default',
51 | size = 'md',
52 | orientation = 'horizontal',
53 | children,
54 | className,
55 | }: TabsProps) {
56 | const [selectedTab, setSelectedTab] = useState(value || defaultValue || '');
57 | const { theme } = useTheme();
58 |
59 | useEffect(() => {
60 | if (value !== undefined) {
61 | setSelectedTab(value);
62 | }
63 | }, [value]);
64 |
65 | const handleTabChange = (newValue: string) => {
66 | if (!value) {
67 | setSelectedTab(newValue);
68 | }
69 | onValueChange?.(newValue);
70 | };
71 |
72 | return (
73 | { e.preventDefault(); setDragActive(true); }}
96 | onDragLeave={() => setDragActive(false)}
97 | onDrop={handleDrop}
98 | onClick={() => !disabled && inputRef.current?.click()}
99 | className={cn(
100 | 'cursor-pointer transition-all duration-200 border-2 border-dashed rounded-lg',
101 | dragActive ? 'border-primary bg-primary/5' : 'border-border hover:border-primary/50',
102 | disabled && 'opacity-50 cursor-not-allowed',
103 | variant === 'compact' ? 'p-4' : 'p-8',
104 | 'flex flex-col items-center justify-center gap-2'
105 | )}
106 | style={{ borderColor: dragActive ? theme.colors.primary : undefined }}
107 | >
108 |
127 |
128 | {/* File Previews */}
129 | 118 | Drop files here or click to upload 119 |
120 |121 | {accept ? `Accepts: ${accept}` : 'All file types supported'} 122 | {maxSize && ` • Max size: ${maxSize / 1000000}MB`} 123 |
124 | 125 | )} 126 |
142 | {preview && previews[index] ? (
143 | 
148 | ) : (
149 |
170 | ))}
171 |
150 | {file.type.startsWith('image/') ? (
151 |
156 | )}
157 |
158 |
163 |
169 | {file.name}
159 |160 | {(file.size / 1000).toFixed(1)}KB 161 |
162 |
94 | {children}
95 |
96 |
117 | {children}
118 |
119 | );
120 | }
121 |
122 | export function TabTrigger({
123 | value,
124 | disabled,
125 | icon,
126 | children,
127 | className,
128 | }: TabTriggerProps) {
129 | const context = React.useContext(TabsContext);
130 | if (!context) throw new Error('TabTrigger must be used within Tabs');
131 |
132 | const { selectedTab, setSelectedTab, variant, size, orientation } = context;
133 | const isSelected = selectedTab === value;
134 |
135 | const sizeClasses = {
136 | sm: 'px-3 py-1.5 text-sm',
137 | md: 'px-4 py-2',
138 | lg: 'px-6 py-3 text-lg',
139 | };
140 |
141 | const variants = {
142 | default: cn(
143 | 'relative transition-colors hover:text-primary',
144 | isSelected ? 'text-primary' : 'text-muted'
145 | ),
146 | pills: cn(
147 | 'relative transition-all rounded-md',
148 | isSelected ? 'bg-primary text-white shadow-lg' : 'hover:bg-white/10'
149 | ),
150 | underline: cn(
151 | 'relative transition-colors',
152 | isSelected && 'after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-primary',
153 | isSelected ? 'text-primary' : 'text-muted hover:text-primary'
154 | ),
155 | gradient: cn(
156 | 'relative transition-all bg-clip-text',
157 | isSelected
158 | ? 'text-transparent bg-gradient-to-r from-primary to-secondary font-semibold'
159 | : 'hover:text-primary'
160 | ),
161 | };
162 |
163 | return (
164 |
182 | );
183 | }
184 |
185 | export function TabContent({
186 | value,
187 | children,
188 | className,
189 | }: TabContentProps) {
190 | const context = React.useContext(TabsContext);
191 | if (!context) throw new Error('TabContent must be used within Tabs');
192 |
193 | const { selectedTab } = context;
194 | const isSelected = selectedTab === value;
195 |
196 | return (
197 |
93 |
94 |
98 |
181 |
182 | );
183 | }
--------------------------------------------------------------------------------
/app/components/input/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React from 'react';
4 | import { motion } from 'framer-motion';
5 | import { Search, Mail, Lock, User } from 'lucide-react';
6 | import { Input } from '@/components/ui/input';
7 | import { CodeBlock } from '@/components/code-block';
8 |
9 | const installCode = `npm install @parrot-ui/react`;
10 |
11 | const usageCode = `import { Input } from '@parrot-ui/react';
12 |
13 | function App() {
14 | return (
15 | |
101 | |
107 | )}
108 | {columns.map((column) => (
109 | column.sortable && handleSort(column.key)}
117 | >
118 |
119 | {column.header}
120 | {column.sortable && (
121 |
141 |
122 |
139 | )}
140 | |
142 | ))}
143 |
|---|---|
|
160 | |
166 | )}
167 | {columns.map((column) => (
168 | 172 | {column.render 173 | ? column.render((row as any)[column.key], row) 174 | : (row as any)[column.key]} 175 | | 176 | ))} 177 |
16 | {/* Basic usage */}
17 |
18 |
19 | {/* With variants */}
20 |
21 |
22 |
23 |
24 | {/* With sizes */}
25 |
26 |
27 |
28 | {/* With icons */}
29 | } placeholder="With left icon" />
30 | } placeholder="With right icon" />
31 |
32 | {/* With states */}
33 |
34 |
35 |
36 |
37 | );
38 | }`;
39 |
40 | export default function InputPage() {
41 | return (
42 |
43 |
48 |
57 |
60 |
61 | {/* Usage */}
62 |
63 |
66 |
67 | {/* Basic Example */}
68 |
69 |
76 |
77 | {/* Variants */}
78 |
79 |
87 |
88 | {/* States */}
89 |
90 |
98 |
99 | {/* Props Table */}
100 |
101 |
141 |
142 |
143 | );
144 | }
--------------------------------------------------------------------------------
/app/components/radio/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React, { useState } from 'react';
4 | import { motion } from 'framer-motion';
5 | import { RadioGroup } from '@/components/ui/radio-group';
6 | import { CodeBlock } from '@/components/code-block';
7 |
8 | const installCode = `npm install @parrot-ui/react`;
9 |
10 | const usageCode = `import { RadioGroup } from '@parrot-ui/react';
11 |
12 | function App() {
13 | const [value, setValue] = useState('apple');
14 |
15 | const options = [
16 | { label: 'Apple', value: 'apple' },
17 | { label: 'Banana', value: 'banana' },
18 | { label: 'Orange', value: 'orange' },
19 | ];
20 |
21 | return (
22 | 49 | Input 50 |
51 |52 | A versatile input component with multiple variants, sizes, and states. 53 |
54 | 55 | {/* Installation */} 56 |Installation
58 |Usage
64 |Basic Usage
70 |
71 |
72 | } placeholder="With icon" />
73 | } placeholder="Password" />
74 |
75 | Variants
80 |
81 |
82 |
83 |
84 |
85 |
86 | States
91 |
92 |
93 |
94 |
95 |
96 |
97 | Props
102 |
103 |
104 |
105 |
139 |
140 | | Prop | 107 |Type | 108 |Default | 109 |Description | 110 |
|---|---|---|---|
| variant | 115 |default | filled | outline | ghost | 116 |default | 117 |The visual style of the input | 118 |
| size | 121 |sm | md | lg | 122 |md | 123 |The size of the input | 124 |
| leftIcon | 127 |ReactNode | 128 |undefined | 129 |Icon to show on the left | 130 |
| rightIcon | 133 |ReactNode | 134 |undefined | 135 |Icon to show on the right | 136 |
54 |
59 |
68 |
71 |
72 | {/* Usage */}
73 |
74 |
77 |
78 | {/* Examples */}
79 |
80 |
117 |
118 | {/* Props */}
119 |
120 |
166 |
167 |
168 | );
169 | }
--------------------------------------------------------------------------------
/app/components/toggle/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React, { useState } from 'react';
4 | import { motion } from 'framer-motion';
5 | import { Toggle } from '@/components/ui/toggle';
6 | import { CodeBlock } from '@/components/code-block';
7 | import { Bell, BellOff, Bold, Italic, Underline } from 'lucide-react';
8 |
9 | const installCode = `npm install @parrot-ui/react`;
10 |
11 | const usageCode = `import { Toggle } from '@parrot-ui/react';
12 | import { Bell } from 'lucide-react';
13 |
14 | function App() {
15 | const [pressed, setPressed] = useState(false);
16 |
17 | return (
18 | 60 | Radio 61 |
62 |63 | A customizable radio group component with multiple orientations. 64 |
65 | 66 | {/* Installation */} 67 |Installation
69 |Usage
75 |Examples
81 | 82 | {/* Vertical */} 83 |
84 |
93 |
94 | {/* Horizontal */}
95 | Vertical Layout
85 |
96 |
105 |
106 | {/* Disabled */}
107 | Horizontal Layout
97 |
108 |
116 | Disabled Options
109 |Props
121 |
122 |
123 |
124 |
164 |
165 | | Prop | 126 |Type | 127 |Default | 128 |Description | 129 |
|---|---|---|---|
| options | 134 |RadioOption[] | 135 |required | 136 |Array of radio options | 137 |
| value | 140 |string | 141 |undefined | 142 |Currently selected value | 143 |
| onChange | 146 |(value: string) ={'>'} void | 147 |undefined | 148 |Called when selection changes | 149 |
| name | 152 |string | 153 |required | 154 |Name attribute for the radio group | 155 |
| orientation | 158 |horizontal | vertical | 159 |vertical | 160 |Layout orientation of the radio group | 161 |
35 |
40 |
49 |
52 |
53 | {/* Usage */}
54 |
55 |
58 |
59 | {/* Examples */}
60 |
61 |
114 |
115 | {/* Props */}
116 |
117 |
163 |
164 |
165 | );
166 | }
--------------------------------------------------------------------------------
/components/ui/date-picker.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React, { useState } from 'react';
4 | import { useTheme } from '@/hooks/use-theme';
5 | import { cn } from '@/lib/utils';
6 | import { Calendar, ChevronLeft, ChevronRight } from 'lucide-react';
7 | import { motion, AnimatePresence } from 'framer-motion';
8 |
9 | export interface DatePickerProps {
10 | value?: Date;
11 | onChange?: (date: Date) => void;
12 | minDate?: Date;
13 | maxDate?: Date;
14 | disabled?: boolean;
15 | placeholder?: string;
16 | format?: string;
17 | className?: string;
18 | }
19 |
20 | export function DatePicker({
21 | value,
22 | onChange,
23 | minDate,
24 | maxDate,
25 | disabled = false,
26 | placeholder = 'Select date',
27 | format = 'MM/dd/yyyy',
28 | className,
29 | }: DatePickerProps) {
30 | const { theme } = useTheme();
31 | const [isOpen, setIsOpen] = useState(false);
32 | const [currentMonth, setCurrentMonth] = useState(value || new Date());
33 |
34 | const daysInMonth = new Date(
35 | currentMonth.getFullYear(),
36 | currentMonth.getMonth() + 1,
37 | 0
38 | ).getDate();
39 |
40 | const firstDayOfMonth = new Date(
41 | currentMonth.getFullYear(),
42 | currentMonth.getMonth(),
43 | 1
44 | ).getDay();
45 |
46 | const formatDate = (date: Date) => {
47 | const month = (date.getMonth() + 1).toString().padStart(2, '0');
48 | const day = date.getDate().toString().padStart(2, '0');
49 | const year = date.getFullYear();
50 | return `${month}/${day}/${year}`;
51 | };
52 |
53 | const handleDateSelect = (day: number) => {
54 | const selectedDate = new Date(
55 | currentMonth.getFullYear(),
56 | currentMonth.getMonth(),
57 | day
58 | );
59 | onChange?.(selectedDate);
60 | setIsOpen(false);
61 | };
62 |
63 | const nextMonth = () => {
64 | setCurrentMonth(new Date(currentMonth.setMonth(currentMonth.getMonth() + 1)));
65 | };
66 |
67 | const prevMonth = () => {
68 | setCurrentMonth(new Date(currentMonth.setMonth(currentMonth.getMonth() - 1)));
69 | };
70 |
71 | const isDateDisabled = (date: Date) => {
72 | if (minDate && date < minDate) return true;
73 | if (maxDate && date > maxDate) return true;
74 | return false;
75 | };
76 |
77 | const monthNames = [
78 | 'January', 'February', 'March', 'April', 'May', 'June',
79 | 'July', 'August', 'September', 'October', 'November', 'December'
80 | ];
81 |
82 | const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
83 |
84 | return (
85 | 41 | Toggle 42 |
43 |44 | A two-state button that can be either on or off. 45 |
46 | 47 | {/* Installation */} 48 |Installation
50 |Usage
56 |Examples
62 | 63 | {/* Basic */} 64 |
65 |
76 |
77 | {/* Text and Icon */}
78 | Basic Toggle
66 |
67 |
72 | {pressed1 ?
74 |
75 |
79 |
91 |
92 |
93 | {/* Disabled */}
94 | With Text and Icon
80 |
81 |
86 |
89 |
90 |
95 |
113 | Disabled State
96 |
97 |
102 | Disabled
103 |
104 |
109 | Disabled Pressed
110 |
111 |
112 | Props
118 |
119 |
120 |
121 |
161 |
162 | | Prop | 123 |Type | 124 |Default | 125 |Description | 126 |
|---|---|---|---|
| pressed | 131 |boolean | 132 |false | 133 |The controlled pressed state of the toggle | 134 |
| onPressedChange | 137 |(pressed: boolean) ={'>'} void | 138 |undefined | 139 |Event handler called when the pressed state changes | 140 |
| disabled | 143 |boolean | 144 |false | 145 |Whether the toggle is disabled | 146 |
| size | 149 |sm | md | lg | 150 |md | 151 |The size of the toggle | 152 |
| children | 155 |ReactNode | 156 |undefined | 157 |The content to display inside the toggle | 158 |
86 |
111 | {isOpen && (
112 |
122 | {/* Header */}
123 |
190 | )}
191 |
192 |
193 | );
194 | }
--------------------------------------------------------------------------------
/app/components/colorpicker/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React, { useState } from 'react';
4 | import { motion } from 'framer-motion';
5 | import { ColorPicker } from '@/components/ui/color-picker';
6 | import { CodeBlock } from '@/components/code-block';
7 |
8 | const installCode = `npm install @parrot-ui/react`;
9 |
10 | const usageCode = `import { ColorPicker } from '@parrot-ui/react';
11 |
12 | function App() {
13 | const [color, setColor] = useState('#FF6B6B');
14 |
15 | return (
16 | !disabled && setIsOpen(!isOpen)}
97 | >
98 |
109 |
110 |
124 |
130 |
131 | {monthNames[currentMonth.getMonth()]} {currentMonth.getFullYear()}
132 |
133 |
139 |
140 |
141 | {/* Week days */}
142 |
143 | {weekDays.map((day) => (
144 |
153 |
154 | {/* Calendar grid */}
155 |
149 | {day}
150 |
151 | ))}
152 |
156 | {Array.from({ length: firstDayOfMonth }).map((_, index) => (
157 |
158 | ))}
159 | {Array.from({ length: daysInMonth }).map((_, index) => {
160 | const day = index + 1;
161 | const date = new Date(
162 | currentMonth.getFullYear(),
163 | currentMonth.getMonth(),
164 | day
165 | );
166 | const isSelected = value && value.getTime() === date.getTime();
167 | const isDisabled = isDateDisabled(date);
168 |
169 | return (
170 |
186 | );
187 | })}
188 |
189 |
51 |
56 |
65 |
68 |
69 | {/* Usage */}
70 |
71 |
74 |
75 | {/* Examples */}
76 |
77 |
118 |
119 | {/* Props */}
120 |
121 |
173 |
174 |
175 | );
176 | }
--------------------------------------------------------------------------------
/app/components/datepicker/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React, { useState } from 'react';
4 | import { motion } from 'framer-motion';
5 | import { DatePicker } from '@/components/ui/date-picker';
6 | import { CodeBlock } from '@/components/code-block';
7 |
8 | const installCode = `npm install @parrot-ui/react`;
9 |
10 | const usageCode = `import { DatePicker } from '@parrot-ui/react';
11 |
12 | function App() {
13 | const [date, setDate] = useState57 | ColorPicker 58 |
59 |60 | A customizable color picker component with preset colors and hex input. 61 |
62 | 63 | {/* Installation */} 64 |Installation
66 |Usage
72 |Examples
78 | 79 | {/* Basic */} 80 |
81 |
87 |
88 | {/* Custom Presets */}
89 | Basic ColorPicker
82 |
90 |
98 |
99 | {/* Without Input */}
100 | Custom Presets
91 |
101 |
108 |
109 | {/* Disabled */}
110 | Without Input
102 |
111 |
117 | Disabled State
112 |Props
122 |
123 |
124 |
125 |
171 |
172 | | Prop | 127 |Type | 128 |Default | 129 |Description | 130 |
|---|---|---|---|
| value | 135 |string | 136 |#000000 | 137 |Selected color in hex format | 138 |
| onChange | 141 |(color: string) ={'>'} void | 142 |undefined | 143 |Called when color changes | 144 |
| presetColors | 147 |string[] | 148 |[...] | 149 |Array of preset colors | 150 |
| disabled | 153 |boolean | 154 |false | 155 |Whether the color picker is disabled | 156 |
| showInput | 159 |boolean | 160 |true | 161 |Show hex input field | 162 |
| showPresets | 165 |boolean | 166 |true | 167 |Show preset color buttons | 168 |
39 |
44 |
53 |
56 |
57 | {/* Usage */}
58 |
59 |
62 |
63 | {/* Examples */}
64 |
65 |
107 |
108 | {/* Props */}
109 |
110 |
168 |
169 |
170 | );
171 | }
--------------------------------------------------------------------------------
45 | DatePicker 46 |
47 |48 | A customizable date picker component with calendar dropdown. 49 |
50 | 51 | {/* Installation */} 52 |Installation
54 |Usage
60 |Examples
66 | 67 | {/* Basic */} 68 |
69 |
78 |
79 | {/* With Range */}
80 | Basic DatePicker
70 |
71 |
77 |
81 |
93 |
94 | {/* Disabled */}
95 | With Date Range
82 |
84 |
92 |
96 |
106 | Disabled State
97 |
98 |
105 | Props
111 |
112 |
113 |
114 |
166 |
167 | | Prop | 116 |Type | 117 |Default | 118 |Description | 119 |
|---|---|---|---|
| value | 124 |Date | 125 |undefined | 126 |Selected date | 127 |
| onChange | 130 |(date: Date) ={'>'} void | 131 |undefined | 132 |Called when date changes | 133 |
| minDate | 136 |Date | 137 |undefined | 138 |Minimum selectable date | 139 |
| maxDate | 142 |Date | 143 |undefined | 144 |Maximum selectable date | 145 |
| disabled | 148 |boolean | 149 |false | 150 |Whether the date picker is disabled | 151 |
| placeholder | 154 |string | 155 |"Select date" | 156 |Placeholder text | 157 |
| format | 160 |string | 161 |"MM/dd/yyyy" | 162 |Date format string | 163 |