A modern, accessible component library built with Next.js 15, TypeScript, Tailwind CSS, and Geist Font. Ready-to-use components for React applications.
npm install @your-org/default-components
# or
yarn add @your-org/default-componentsimport { Header, Hero, FeatureCard } from '@your-org/default-components';
import '@your-org/default-components/dist/styles.css';
export default function MyPage() {
return (
<div>
<Header logoText="My App" />
<Hero
title="Welcome to Our Platform"
subtitle="Build amazing web experiences"
/>
<FeatureCard
icon={Zap}
title="Fast Performance"
description="Optimized components for lightning-fast loading times."
/>
</div>
);
}- Header - Responsive navigation with mobile menu
- Hero - Landing section with call-to-action buttons
- Footer - Site footer with links and information
- FeatureCard - Highlight product benefits with icons
- TestimonialCard - Customer feedback and reviews
- PricingCard - Subscription plans and pricing
- TeamMemberCard - Team member profiles
- BlogPostCard - Article previews and excerpts
- ImageGallery - Photo showcase with lightbox
- Stats - Display metrics and key numbers
- ProgressBar - Skills and progress indicators
- Timeline - Project milestones and phases
- FAQSection - Frequently asked questions
- SearchBar - Interactive search functionality
- ContactForm - Contact form with validation
- NewsletterSignup - Email subscription form
- CallToAction - Conversion-focused sections
- SocialMediaLinks - Social platform connections
- Button - Various button styles and variants
- Card - Content containers with header, content, footer
- Badge - Status indicators and labels
- Input - Form input fields
- Select - Dropdown selection components
- Checkbox - Checkbox inputs
- RadioGroup - Radio button groups
- Switch - Toggle switches
- Slider - Range sliders
- Progress - Progress indicators
- Avatar - User profile images
- Alert - Notification messages
- Dialog - Modal dialogs
- DropdownMenu - Context menus
- Popover - Floating content
- Tooltip - Hover information
- Accordion - Collapsible content
- Tabs - Tabbed interfaces
- Calendar - Date picker
- Carousel - Image/content carousels
- Table - Data tables
- Separator - Visual dividers
- Skeleton - Loading placeholders
/* In your global CSS file */
@import '@your-org/default-components/dist/styles.css';// tailwind.config.js
module.exports = {
content: [
'./src/**/*.{js,ts,jsx,tsx,mdx}',
'./node_modules/@your-org/default-components/dist/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {
// Your custom theme extensions
},
},
plugins: [
require('tailwindcss-animate'),
],
}Components automatically support dark mode when you add the dark class to your HTML element:
// In your layout or root component
export default function RootLayout({ children }) {
return (
<html lang="en" className="dark">
<body>{children}</body>
</html>
);
}import { Header } from '@your-org/default-components';
<Header
logoText="My App"
navigation={[
{ label: 'Home', href: '/' },
{ label: 'About', href: '/about' },
{ label: 'Contact', href: '/contact' }
]}
showAuthButtons={true}
/>import { FeatureCard } from '@your-org/default-components';
import { Zap, Shield, Smartphone } from 'lucide-react';
const features = [
{
icon: Zap,
title: "Fast Performance",
description: "Optimized components for lightning-fast loading times."
},
{
icon: Shield,
title: "Secure by Default",
description: "Built with security best practices and regular assessments."
},
{
icon: Smartphone,
title: "Mobile First",
description: "Responsive design that works perfectly on all devices."
}
];
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{features.map((feature, index) => (
<FeatureCard key={index} {...feature} />
))}
</div>import {
Button,
Card,
CardContent,
CardHeader,
CardTitle,
Badge,
Input,
Label
} from '@your-org/default-components';
<div className="space-y-6">
{/* Buttons */}
<div className="flex gap-4">
<Button variant="default">Default</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="destructive">Destructive</Button>
</div>
{/* Cards */}
<Card className="w-96">
<CardHeader>
<CardTitle>Example Card</CardTitle>
</CardHeader>
<CardContent>
<p>This is a sample card with some content.</p>
</CardContent>
</Card>
{/* Badges */}
<div className="flex gap-2">
<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="destructive">Destructive</Badge>
</div>
{/* Form Elements */}
<div className="space-y-2">
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" placeholder="Enter your email" />
</div>
</div>You can customize components using Tailwind CSS classes:
import { Button } from '@your-org/default-components';
<Button
className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white font-bold py-3 px-6 rounded-lg shadow-lg transform hover:scale-105 transition-all duration-200"
>
Custom Styled Button
</Button>All components come with full TypeScript support:
import { FeatureCardProps } from '@your-org/default-components';
import { Zap } from 'lucide-react';
const feature: FeatureCardProps = {
icon: Zap,
title: "Fast Performance",
description: "Optimized for speed and efficiency",
className: "custom-class"
};
export default function TypedComponent() {
return <FeatureCard {...feature} />;
}default-components/
├── dist/ # Built library files
│ ├── components/ # Component files
│ ├── types/ # TypeScript definitions
│ ├── index.js # CommonJS entry point
│ ├── index.esm.js # ES Module entry point
│ ├── index.d.ts # TypeScript declarations
│ ├── styles.css # Component styles
│ └── package.json # Library package.json
├── src/ # Source files
│ ├── components/ # Main components
│ ├── types/ # Type definitions
│ └── index.ts # Main export file
├── build-lib.js # Build script
├── package.json # Development package.json
└── README.md # This file
npm run build:lib# Update version in package.json
npm version patch
# Publish
npm publish- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- shadcn/ui for the amazing component library
- Radix UI for accessible primitives
- Tailwind CSS for utility-first styling
- Lucide React for beautiful icons
- Geist Font for modern typography
Built with ❤️ using Next.js 15