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

@winniekagendo/ui-lib

v1.0.2

Published

A reusable React UI component library built with TypeScript and Tailwind CSS.

Vulnerabilities

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

Links

Maintainers

winniekagendowinniekagendo

Keywords

Readme

ComponentIQ (AI-assisted design system demo)

ComponentIQ is a review-first internal tool / future SaaS simulation built on this Next.js design system. It demonstrates how a frontend platform team would combine mentor-grade guidance, token and component whitelists, governance, and safe AI usage (prompts on the server, Zod-validated JSON, draft-only code).

Product goal (MVP)

  • Help engineers choose the right component before inventing new UI.
  • Surface design token expectations and accessibility / state gaps early.
  • Route duplication into governance (compose → variant → pattern → proposal → local).
  • Keep API keys off the client and treat model output as untrusted until humans review.

Architecture (high level)

  • UI: Next.js App Router screens under src/app and feature modules under src/features/*.
  • Design system data: src/design-system/data (components, tokens, patterns, rules) — used in prompts and product UI.
  • AI: Prompts in src/ai/prompts, Zod schemas in src/ai/schemas, shared server helpers in src/ai/server.ts, deterministic mock fallbacks in src/ai/mock-service.ts.
  • API routes: src/app/api/ai/{recommend,audit,governance}/route.ts — JSON in/out, no secrets exposed to the browser.

Configure an LLM (optional)

Set OPENAI_API_KEY or LLM_API_KEY. Optional: LLM_BASE_URL (defaults to OpenAI-compatible https://api.openai.com/v1) and LLM_MODEL (defaults to gpt-4o-mini). If keys are missing or the response fails validation, the app uses structured mocks so demos stay reliable.

What is mocked vs real

  • Real: Routes, forms, navigation, component catalog, Zod validation, server-side fetch to the configured chat-completions API when keys work.
  • Mocked / fallback: Session-only storage for saved recommendations; dashboard “metrics” and activity; audit/governance/recommendation mock payloads whenever the API is absent or returns invalid JSON.

Scripts

Use npm run dev for the app and npm run storybook for the underlying component library stories.

componentIq Component Library

A modern, accessible React component library built with Next.js, TypeScript, and Tailwind CSS.

Features

  • 🎨 Modern Design System - Consistent, beautiful components
  • ♿ Accessibility First - WCAG compliant components
  • 📱 Responsive - Mobile-first design approach
  • 🧪 Tested - Comprehensive test coverage with Vitest
  • 📖 Documented - Full Storybook documentation
  • 🚀 TypeScript - Full type safety and IntelliSense
  • 🎯 Conventional Commits - Standardized commit messages

Getting Started

Prerequisites

  • Node.js (v18 or higher)
  • npm or yarn

Installation

# Clone the repository
git clone https://github.com/your-username/leja-component-library.git
cd leja-component-library

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:3000 with your browser to see the result.

Storybook

View and interact with components in Storybook:

npm run storybook

Open http://localhost:6006 to explore the component library.

Available Scripts

  • npm run dev - Start development server
  • npm run build - Build for production
  • npm run storybook - Start Storybook
  • npm run test - Run tests
  • npm run lint - Run ESLint
  • npm run type-check - Run TypeScript type checking

Documentation

Development

This project uses:

  • Next.js - React framework
  • TypeScript - Type safety
  • Tailwind CSS - Styling
  • Storybook - Component documentation
  • Vitest - Testing framework
  • ESLint - Code linting
  • Conventional Commits - Standardized commit messages

Contributing

We welcome contributions! Please read our Contributing Guide for details on our code of conduct and the process for submitting pull requests.

Commit Guidelines

We follow the Conventional Commits specification. See our detailed guide in docs/CONVENTIONAL_COMMITS.md.

Quick reference:

feat: add new component
fix: resolve bug
docs: update documentation
style: format code

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support