https://github.com/techysphinx/glintkit-ui
GlintKit UI is a modern, accessible, and developer-first React UI library built with Radix UI, Tailwind CSS, and Framer Motion — designed for speed, flexibility, and beautiful MDX. Ideal for building scalable design systems, dashboards, and web apps with ease.
https://github.com/techysphinx/glintkit-ui
eslint framer-motion fumadocs fumadocs-mdx nextjs react-hooks recharts resend-email shadcn-ui-starter sonner tailwindcss zod-validation
Last synced: 3 months ago
JSON representation
GlintKit UI is a modern, accessible, and developer-first React UI library built with Radix UI, Tailwind CSS, and Framer Motion — designed for speed, flexibility, and beautiful MDX. Ideal for building scalable design systems, dashboards, and web apps with ease.
- Host: GitHub
- URL: https://github.com/techysphinx/glintkit-ui
- Owner: techySPHINX
- License: other
- Created: 2025-05-07T08:12:36.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-08-02T22:04:31.000Z (11 months ago)
- Last Synced: 2025-08-03T00:08:08.204Z (11 months ago)
- Topics: eslint, framer-motion, fumadocs, fumadocs-mdx, nextjs, react-hooks, recharts, resend-email, shadcn-ui-starter, sonner, tailwindcss, zod-validation
- Language: TypeScript
- Homepage: https://glintkit-ui.vercel.app/
- Size: 2.83 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
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:
```bash
# 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:
```bash
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**
```tsx
import { Button } from "@/components/ui/button";
function MyComponent() {
return (
Get Started
);
}
```
*(**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](https://react.dev/) & [Next.js 15](https://nextjs.org/)
- **Styling**: [Tailwind CSS 4](https://tailwindcss.com/)
- **UI Primitives**: [Radix UI](https://www.radix-ui.com/)
- **Animations**: [Framer Motion](https://www.framer.com/motion/)
- **Form Management**: [React Hook Form](https://react-hook-form.com/) with [Zod](https://zod.dev/) for validation
- **Documentation**: [Fumadocs](https://fumadocs.com/)
- **Icons**: [Lucide Icons](https://lucide.dev/)
- **Notifications**: [Sonner](https://sonner.emilkowalski.com/)
- **Command Palette**: [CMDK](https://cmdk.paco.me/)
- **Carousel**: [Embla Carousel](https://www.embla-carousel.com/)
- **Theming**: [next-themes](https://github.com/pacocoursey/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](CODE_OF_CONDUCT.md) before contributing.
### How to Contribute
1. **Fork the Repository**: Start by forking the `glintkit-ui` repository to your GitHub account.
2. **Clone Your Fork**:
```bash
git clone https://github.com/YOUR_USERNAME/glintkit-ui.git
cd glintkit-ui
```
3. **Create a New Branch**:
```bash
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**:
```bash
git add .
git commit -m "feat: Add new amazing component" # Use conventional commits
```
6. **Push to Your Fork**:
```bash
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:
```bash
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](JAGAN_LICENSE.md)**. 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](https://github.com/techySPHINX/glintkit-ui/issues).
- **Discussions**: Engage with other developers and ask questions on [GitHub Discussions](https://github.com/techySPHINX/glintkit-ui/discussions).
- **Connect**: Follow the creator on [LinkedIn](https://www.linkedin.com/in/jagan-kumar-hotta-502a76270/).
---
Built with ❤️ by Jagan Kumar Hotta