No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

🎉 Welcome to Priyang React Component Library

A robust, accessible, and customizable component library built with SCSS, focused on design consistency and developer ergonomics.

🚀 Getting Started

📦 Installation

npm install @priyang/react-component-lib

Can be import from Global.

import { Button } from '@priyang/react-component-lib';
import '@priyang/index.css'; //  import in app.tsx or index.tsx

<Button>Click Me</Button>;

or individual Component

import { Button } from '@priyang/react-component-lib/lib/Components/Button';
import '@priyang/react-component-lib/lib/Components/index.css';

<Button>Click Me</Button>;

📚 What's Inside

Fully accessible components, tested with keyboard, screen readers, and WCAG standards.

Built using SCSS with utility-first mindset.

Modular and tree-shakable design.

Ready-to-use hooks in src/Hooks:

useToggle, useCounter, useRipple, useThrottle, etc.

🧩 Components Overview

Explore our comprehensive set of UI components:

Forms: Input, Select, RadioInput, Switch, Slider

Layout: Spacer, Divider, DescriptionContainer

Interactions: PopOver, Loader, Calendar, DragNDrop

Visuals: TextEffect, TextLanding, StatusDot, ProgressBar

Utility: FormControl, VercelButton, YTCard

Check the Components section to browse them all.

📄 Contributing & Docs

Visit todo.md and note.md for dev plans and notes.

See CHANGELOG.md for version history.

Full component code in src/lib/Components/

Hooks library in src/Hooks/

Styling.

Our component library uses a set of CSS custom properties to ensure consistent theming, spacing, and typography.

:root {
   --text-primary: #333333;
   --text-secondary: #666666;
   --text-inverse: #ffffff;
   --color-primary: #3b82f6;
   --color-secondary: #e9cda9;
   --radius-md: 4px;
   --font-size-md: 1rem;
   --gap-md: 1rem;
   // ...and more

   @media (prefers-color-scheme: dark) {
      :root {
         --text-primary: #f9fafb;
         --bg-default: #111827;
         // ...etc
      }
   }
}

🎨 Core Tokens

| Token Name | Default Value | Description | | --------------------- | ------------- | ------------------------ | | --color-primary | #3b82f6 | Primary brand color | | --text-primary | #333333 | Primary text color | | --radius-md | 4px | Medium border radius | | --font-size-md | 1rem | Base font size | | --gap-md | 1rem | Medium spacing gap | | --bg-default (dark) | #111827 | Background for dark mode |

These can be used directly in your own CSS/SCSS like:

.my-class {
   background-color: var(--color-primary);
   font-size: var(--font-size-md);
}