npm package: @rayvelez/skeu-ui
Description: Skeuomorphic UI components for React with Tailwind CSS
Latest version: 1.0.0

# Skeu UI

A beautiful skeuomorphic UI component library for React with Tailwind CSS.

## Installation

```bash
npm install skeu-ui
```

## Setup

### 1. Import the CSS theme

Add to your main CSS file (e.g., `index.css` or `globals.css`):

```css
@import "skeu-ui/styles";
```

### 2. Extend your Tailwind config

Update your `tailwind.config.js`:

```js
const skeuPreset = require("skeu-ui/tailwind-preset");

module.exports = {
  presets: [skeuPreset],
  content: [
    // ... your paths
    "./node_modules/skeu-ui/**/*.{js,ts,jsx,tsx}",
  ],
  // ... rest of your config
};
```

## Usage

```tsx
import {
  SkeuButton,
  SkeuCard,
  SkeuCardHeader,
  SkeuCardTitle,
  SkeuCardContent,
  MetricCard,
  ActivityFeed,
  DashboardHeader,
  RevenueChart,
} from "skeu-ui";
import { Users } from "lucide-react";

function App() {
  return (
    <div className="min-h-screen bg-background p-8">
      <DashboardHeader
        title="My Dashboard"
        subtitle="Overview"
        onExport={() => console.log("Export clicked")}
      />

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-8">
        <MetricCard
          title="Total Users"
          value="12,345"
          change="+12.5%"
          changeType="positive"
          icon={Users}
          iconColor="text-primary"
        />
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-8">
        <RevenueChart />
        <ActivityFeed />
      </div>
    </div>
  );
}
```

## Components

### SkeuButton

```tsx
<SkeuButton variant="primary" size="md">
  Click me
</SkeuButton>
```

**Props:**
- `variant`: `"primary"` | `"secondary"` | `"ghost"` (default: `"primary"`)
- `size`: `"sm"` | `"md"` | `"lg"` (default: `"md"`)

### SkeuCard

```tsx
<SkeuCard variant="raised">
  <SkeuCardHeader>
    <SkeuCardTitle>Card Title</SkeuCardTitle>
  </SkeuCardHeader>
  <SkeuCardContent>
    Card content goes here
  </SkeuCardContent>
</SkeuCard>
```

**Props:**
- `variant`: `"raised"` | `"inset"` (default: `"raised"`)

### MetricCard

```tsx
<MetricCard
  title="Revenue"
  value="$50,000"
  change="+15%"
  changeType="positive"
  icon={DollarSign}
  iconColor="text-chart-4"
/>
```

### ActivityFeed

```tsx
<ActivityFeed
  title="Recent Activity"
  subtitle="Latest updates"
  activities={[
    {
      id: 1,
      icon: User,
      iconBg: "bg-primary/20",
      iconColor: "text-primary",
      title: "New user",
      description: "John signed up",
      time: "2 min ago",
    },
  ]}
/>
```

### DashboardHeader

```tsx
<DashboardHeader
  title="Dashboard"
  subtitle="Overview"
  logoText="SK"
  onExport={() => {}}
  onSettings={() => {}}
  onNotifications={() => {}}
  onSearch={(query) => {}}
/>
```

### RevenueChart

```tsx
<RevenueChart
  title="Revenue"
  subtitle="Monthly overview"
  data={[
    { name: "Jan", revenue: 4000, users: 240 },
    { name: "Feb", revenue: 5000, users: 300 },
  ]}
/>
```

## Utility Classes

The theme includes these utility classes:

- `.skeu-shadow-raised` - Raised shadow effect
- `.skeu-shadow-pressed` - Pressed/inset shadow effect
- `.skeu-gradient-surface` - Subtle gradient background
- `.skeu-text-emboss` - Embossed text effect

## Dark Mode

The theme automatically supports dark mode. Just add the `dark` class to your `<html>` element.

## License

MIT