skeu-ui

v1.0.0

Published

a month ago

Skeuomorphic UI components for React with Tailwind CSS

0High
0Medium
0Low

rayvelez

react ui components skeuomorphic tailwindcss dashboard

Skeu UI

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

Installation

npm install skeu-ui

Setup

1. Import the CSS theme

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

@import "skeu-ui/styles";

2. Extend your Tailwind config

Update your tailwind.config.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

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

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

Props:

variant: "primary" | "secondary" | "ghost" (default: "primary")
size: "sm" | "md" | "lg" (default: "md")

SkeuCard

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

Props:

variant: "raised" | "inset" (default: "raised")

MetricCard

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

ActivityFeed

<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

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

RevenueChart

<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