Mint UI (Under development)

The UI library with consistent behavior and theming capabilities for React applications.

It has successfully powered the following websites:

• tekminewe.com
• onsentalent.com

Usage

1. Install the package

$ pnpm add @tekminewe/mint-ui

2. Import the CSS styles at the root of your application

import "@tekminewe/mint-ui/styles.css";

3. Update your tailwind.config.ts to include the plugin and path:

import type { Config } from "tailwindcss";
import mintPlugin from "@tekminewe/mint-ui/tailwind-plugin";

const config: Config = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/@tekminewe/mint-ui/**/*.js", // Add this line
  ],
  theme: {
    extend: {},
  },
  plugins: [mintPlugin()], // Include the plugin
};
export default config;

4. Wrap your root Client component with the ThemeProvider component.

"use client";

import { ThemeProvider } from "@tekminewe/mint-ui/theme";

function App() {
  return (
    <ThemeProvider>
      <YourRootComponent />
    </ThemeProvider>
  );
}

5. Import the components you need

import { Button } from "@tekminewe/mint-ui/button";

Theme System

Mint UI includes a built-in theme system that supports both light and dark modes:

Using the Theme Provider

The ThemeProvider component automatically detects user system preferences and supports theme persistence:

import { ThemeProvider } from "@tekminewe/mint-ui/theme";

function App() {
  return (
    <ThemeProvider defaultTheme="light">
      <YourRootComponent />
    </ThemeProvider>
  );
}

Accessing and Changing Themes

Use the useTheme hook to access the current theme and change it:

import { useTheme } from "@tekminewe/mint-ui/theme";

function MyComponent() {
  const { theme, setTheme } = useTheme();

  return (
    <div>
      <p>Current theme: {theme}</p>
      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
        Toggle theme
      </button>
    </div>
  );
}

Theme Toggle Component

Mint UI provides a ready-to-use theme toggle component:

import { ThemeToggle } from "@tekminewe/mint-ui/theme";

function Navbar() {
  return (
    <nav>
      <div className="flex items-center gap-2">
        <ThemeToggle aria-label="Toggle theme" />
        <UserProfile />
      </div>
    </nav>
  );
}