Styled Components Showcase

📦 Installation Guide

Install Package

Terminal

npm install styled-thiff styled-components

Install icon library (pilih salah satu atau keduanya):

Terminal

# Option 1: Lucide React (Recommended)
npm install lucide-react

# Option 2: React Icons
npm install react-icons

# Option 3: Both
npm install lucide-react react-icons

Configure Next.js

Tambahkan konfigurasi styled-components dan transpilePackages di next.config.js:

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  compiler: {
    styledComponents: true
  },
  transpilePackages: ['styled-thiff']
}

export default nextConfig

Setup Dark Mode (Optional)

Wrap aplikasi Anda dengan ThemeProvider di app/layout.js:

app/layout.js

import { ThemeProvider } from "styled-thiff/components/ThemeProvider";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <ThemeProvider>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

Start Using Components

app/page.js

"use client";

import {
  HeaderVariant,
  CardVariant,
  ButtonVariant,
} from "styled-thiff";

export default function Page() {
  return (
    <div>
      <HeaderVariant
        variant="flat"
        logo="My App"
        menuItems={[
          { label: "Home", href: "/" },
          { label: "About", href: "/about" },
        ]}
        buttonText="Sign Up"
      />

      <CardVariant
        variant="glass"
        title="Welcome"
        content="Get started with styled-thiff"
        badge="NEW"
      />

      <ButtonVariant variant="primary">
        Get Started
      </ButtonVariant>
    </div>
  );
}

💡 Tips

Gunakan "use client" di top file untuk client components
Dark mode otomatis tersimpan di localStorage
Semua komponen sudah responsive by default
Bisa pakai lucide-react atau react-icons untuk icons