Peer Check UI

A React component library built with Tailwind CSS, supporting complex values like p-3.5 and custom shadows.

Installation

npm install peer-check-ui

Requirements

This library requires Tailwind CSS to be installed and configured in your project.

1. Install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2. Configure Tailwind CSS (CRITICAL SETUP)

Import the setup CSS file in your main CSS file:

/* In your main CSS file (e.g., globals.css) */
@import "peer-check-ui/consumer-setup.css";

That's it! The @source directive in the setup file tells Tailwind to scan your library's components for classes.

3. That's it!

The @import "peer-check-ui/consumer-setup.css" above handles everything - no additional setup needed!

What This Library Provides

✅ Standard Tailwind classes: p-3, rounded-full, bg-white, etc.
✅ Complex shadows: Custom multi-layer shadows via inline styles
✅ Gradient backgrounds: bg-gradient-to-b with custom colors
✅ Arbitrary value support: from-[rgba(...)], to-[rgba(...)] patterns

Usage

CircularIconWrapper

A wrapper component that creates a circular container with gradient background and custom shadow effects.

import { CircularIconWrapper } from 'peer-check-ui';

// Basic usage - uses p-3.5 and custom shadow
<CircularIconWrapper>
  <YourIcon />
</CircularIconWrapper>

// With custom styling (className overrides defaults)
<CircularIconWrapper className="p-2 bg-blue-500">
  <YourIcon />
</CircularIconWrapper>

// Override specific properties
<CircularIconWrapper className="shadow-lg bg-red-100">
  <YourIcon />
</CircularIconWrapper>

Props

| Prop | Type | Default | Description | | ----------- | ----------------- | ------- | ------------------------------------------- | | children | React.ReactNode | - | The content to wrap | | className | string | - | Additional CSS classes (overrides defaults) |

Default Styling

The component applies these Tailwind classes:

• Outer container: p-3 rounded-full bg-gradient-to-b from-[rgba(204,252,84,0.10)] to-[rgba(204,252,84,0.00)]
• Inner container: p-3 rounded-full bg-white with custom shadow via inline styles

How It Works

This library uses standard Tailwind classes that work out of the box with Tailwind v4. The @source directive in consumer-setup.css tells Tailwind to scan your library's components for classes, ensuring they're included in the final CSS build.

Troubleshooting

❌ Classes not appearing at all?

Problem: Missing setup CSS import.

Solution: Make sure you've imported the setup CSS file:

/* In your main CSS file */
@import "peer-check-ui/consumer-setup.css";

❌ Version mismatch issues?

Problem: Your consuming app might be using Tailwind v3.

Solution: Upgrade to Tailwind v4:

npm install -D tailwindcss@^4.0.0

Advanced Usage

Custom Overrides

The library uses tailwind-merge to intelligently handle class conflicts:

// p-2 overrides the default p-3
<CircularIconWrapper className="p-2">
  <Icon />
</CircularIconWrapper>

// Custom shadow overrides the default shadow
<CircularIconWrapper className="shadow-xl">
  <Icon />
</CircularIconWrapper>

Using Arbitrary Values

You can use any Tailwind arbitrary values:

<CircularIconWrapper className="p-[14px] shadow-[0_0_20px_rgba(0,0,0,0.3)] bg-gradient-to-r from-[#ff0000] to-[#00ff00]">
  <Icon />
</CircularIconWrapper>

Development

This library is built with:

• React 19
• TypeScript
• Tailwind CSS v4
• tailwind-merge for intelligent class merging
• @source directive for automatic class detection

License

MIT