A modern, open-source UI component library built with React, Next.js, Tailwind CSS, and Radix UI.
Designed for developers who value accessibility, customizability, and performance.

---

✨ Features & Highlights

GlintKit UI is crafted to provide a seamless development experience with a focus on modern web standards and best practices.

• ⚛️ Built with React 19 & Next.js 15: Leveraging the latest features for optimal performance and developer experience.
• 🎨 Utility-First Styling with Tailwind CSS v4: Rapidly build custom designs with a highly efficient and flexible CSS framework.
• 🧩 Accessible Components with Radix UI: Headless components ensure maximum flexibility while adhering to WAI-ARIA guidelines.
• 🌀 Smooth Animations with Framer Motion: Bring your UIs to life with powerful and declarative animation capabilities.
• 💡 Headless, Composable, and Customizable: Design system that adapts to your needs, not the other way around.
• 📚 MDX-Powered Documentation with Fumadocs: Comprehensive and interactive documentation for easy component exploration.
• 🌗 Dark Mode Support: Seamlessly switch between light and dark themes with next-themes.
• ✨ Optimized & Tree-Shakable: Only bundle what you use, ensuring minimal footprint and faster load times.
• 🚀 Modern Tooling: Built with TypeScript, ESLint, Prettier, and more for a robust development workflow.

---

🚀 Getting Started

Follow these steps to get GlintKit UI up and running in your project.

Prerequisites

Ensure you have Node.js (v18 or higher) and npm/yarn/pnpm installed.

Installation

Clone the repository and install dependencies:

# Clone the repository
git clone https://github.com/techySphinx/glintkit-ui.git
cd glintkit-ui

# Install dependencies using your preferred package manager
npm install
# or
yarn install
# or
pnpm install

Development Usage

To start the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open your browser and navigate to http://localhost:3000 to see the documentation and component examples.

Integration into Your Project (Coming Soon!)

Detailed instructions on how to integrate GlintKit UI components into your existing React/Next.js projects will be provided once the library is published to NPM.

---

🖼️ Component Showcase

Explore some of the beautifully crafted components available in GlintKit UI.

(Note: This section will be updated with live demos, screenshots, or GIFs of key components. For now, please refer to the components/glintkitui directory for available components.)

Example: Button Component

import { Button } from "@/components/ui/button";

function MyComponent() {
  return (
    <Button variant="primary" size="lg">
      Get Started
    </Button>
  );
}

(Placeholder for Image/GIF: Imagine a sleek button animation here!)

---

🛠️ Tech Stack

GlintKit UI is built upon a robust and modern technology stack:

• Frontend Framework: React 19 & Next.js 15
• Styling: Tailwind CSS 4
• UI Primitives: Radix UI
• Animations: Framer Motion
• Form Management: React Hook Form with Zod for validation
• Documentation: Fumadocs
• Icons: Lucide Icons
• Notifications: Sonner
• Command Palette: CMDK
• Carousel: Embla Carousel
• Theming: next-themes
• Utilities: clsx, tailwind-merge, class-variance-authority

---

🤝 Contributing to GlintKit UI

We welcome and encourage contributions from the community! Whether it's a bug fix, a new feature, or an improvement to the documentation, your help is invaluable.

Please read our Code of Conduct before contributing.

How to Contribute

1. Fork the Repository: Start by forking the glintkit-ui repository to your GitHub account.
2. Clone Your Fork:

   git clone https://github.com/YOUR_USERNAME/glintkit-ui.git
   cd glintkit-ui

3. Create a New Branch:

   git checkout -b feat/your-feature-name # For new features
   # or
   git checkout -b fix/bug-description # For bug fixes

4. Make Your Changes:
   • Add or update components within the components/ directory.
   • Ensure your code adheres to existing conventions and style.
   • Add relevant documentation, stories, or tests if applicable.
5. Commit Your Changes:

   git add .
   git commit -m "feat: Add new amazing component" # Use conventional commits

6. Push to Your Fork:

   git push origin feat/your-feature-name

7. Open a Pull Request: Navigate to the original glintkit-ui repository on GitHub and open a new Pull Request from your forked branch. Please fill out the PR template thoroughly.

Linting & Formatting

Before submitting a pull request, ensure your code is properly linted and formatted:

npm run lint

---

🗺️ Roadmap & Future Plans

We have exciting plans for GlintKit UI! Here's a glimpse of what's coming:

• Storybook Integration: Enhance component development and testing with Storybook.
• CI/CD Pipeline: Implement automated testing and deployment workflows.
• NPM Publication: Publish GlintKit UI to NPM for easy integration into any project.
• Accessibility Auditing: Continuous improvement of accessibility standards.
• Expand Component Library: Introduce a wider range of versatile UI components.
• Documentation Enhancements: Improve examples, guides, and API references.
• Performance Optimizations: Further enhance loading times and responsiveness.
• Security Auditing: Regular security checks and best practices implementation.
• More Integrations: Explore compatibility with other popular frameworks and tools.
• Component Registries: Potentially integrate with component registries for broader discoverability.

---

📝 License

This project is licensed under the JAGAN_LICENSE. See the JAGAN_LICENSE.md file for full details.

---

🌍 Community & Support

Join our growing community and get support:

• Issues: Report bugs or suggest features on our GitHub Issues page.
• Discussions: Engage with other developers and ask questions on GitHub Discussions.
• Connect: Follow the creator on LinkedIn.

---

Built with ❤️ by Jagan Kumar Hotta