@developerchetram/shape-ui

A modern, beautiful React component library built with Tailwind CSS.

Installation

Install the package via npm:

npm install @developerchetram/shape-ui

Setup & Configuration

[!IMPORTANT] Tailwind CSS Setup is Essential This library relies on Tailwind CSS. You must have Tailwind CSS installed and configured in your project for the components to render correctly.

1. Configure Tailwind CSS

Ensure your project has Tailwind CSS installed (v3.0+ recommended). If you are setting up a new project, follow the official Tailwind CSS installation guide.

2. Import Library Styles

Import the library's CSS file in your application's entry point (e.g., main.jsx, App.jsx, or index.js). This file contains necessary theme variables and component styles.

// main.jsx or App.jsx
import '@developerchetram/shape-ui/style.css';

Usage

You can import components directly from the package and use them in your React application.

Example: Using Buttons

import React from 'react';
import { SplashButton, HelloButton } from '@developerchetram/shape-ui';

function App() {
  return (
    <div className="min-h-screen bg-zinc-950 flex flex-col items-center justify-center gap-8 p-10">
      
      {/* Splash Button with different statuses */}
      <div className="flex gap-4">
        <SplashButton status="success" onClick={() => alert('Success!')}>
          Confirm
        </SplashButton>
        
        <SplashButton status="error" onClick={() => alert('Error!')}>
          Delete
        </SplashButton>
      </div>

      {/* Hello Button Example */}
      <div className="w-full max-w-md h-64 relative border border-zinc-800 rounded-xl overflow-hidden">
         <HelloButton />
      </div>

    </div>
  );
}

export default App;

Available Components

• SplashButton: A specialized button with a splash effect and status indicators.
• HelloButton: A demonstration component with interaction.
• Chip: Status chips/badges.
• TechButton: Tech stack style buttons.

Requirements

• React: >= 18
• Tailwind CSS: >= 3.0