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

``bash
$ pnpm add @tekminewe/mint-ui
`

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

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

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

`js
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.

`jsx
"use client";

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

function App() {
return (



);
}
`

5. Import the components you need

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

Theme System

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

$3

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

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

function App() {
return (



);
}
`

$3

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

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

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

return (



);
}
`

$3

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

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

function Navbar() {
return (



);
}
``