npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

quick-ui-groq-cli

v1.0.3

Published

Instantly scaffold React + Tailwind CSS components via natural language using Groq AI.

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Maintainers

kaviyakathirvelukaviyakathirvelu

Keywords

clireacttailwindgroqai-generatorcomponent-scaffoldingtypescript

Readme

quick-ui-groq-cli 🚀

Instantly generate production-ready React + Tailwind CSS components using natural language directly from your terminal, powered by Groq AI.

npm version License: MIT

What is quick-ui?

quick-ui-groq-cli is a developer tool that turns plain text prompts into clean, fully-styled React components. It automatically detects your project setup (TypeScript, Next.js, Vite, Tailwind CSS) and generates production-ready code directly into your workspace.

How Users Get Started

Step 1: Get a Free Groq API Key

To use AI generation, you need a free API key:

  1. Go to console.groq.com.
  2. Sign in and create a new API key.

Step 2: Save Your API Key Locally

Run this command once in your terminal to save your key securely on your machine:

npx quick-ui-groq-cli config

Step 3: Generate UI Components Run the CLI from any React project folder with a description of the UI you want:

npx quick-ui-groq-cli "responsive pricing card with dark mode toggle"

The CLI will inspect your project, generate the code using Groq AI, format it with Prettier, and save the new component file directly in your project!

Examples & Commands

  1. Basic Generation
npx quick-ui-groq-cli "modern hero section with call to action buttons"
  1. Custom Component Name Specify exact file names using the --name flag:
npx quick-ui-groq-cli "login card with email and password" --name LoginForm
  1. Custom Output Folder Save components into a specific directory using the --output flag:
npx quick-ui-groq-cli "navigation bar" --output src/components/ui
  1. Overwrite Existing Files Use the --force flag to overwrite an existing component file without being prompted:
npx quick-ui-groq-cli "simple button" --name Button --force

Command Options

Key Features

🧠 Auto-Stack Detection: Automatically detects .tsx vs .jsx, Next.js (App or Pages Router), Vite, and Tailwind CSS (v3 vs v4). ⚡ Lightning Fast: Generates components in sub-seconds using Groq's LLaMA 3.3 infrastructure. 🎨 Clean & Accessible: Generates self-contained components with dark mode support, WCAG AA color contrast, and inline SVGs. 🧹 Prettier Formatted: Automatically formats generated files before writing them to your disk.

License MIT

#readme #npm #typescript #reactjs #groqai #cli #buildinpublic #hashtags #comment for more

npx quick-ui-groq-cli config