The UI library with consistent behavior and theming capabilities for React applications.
npm install @tekminewe/mint-uiThe UI library with consistent behavior and theming capabilities for React applications.
It has successfully powered the following websites:
- tekminewe.com
- onsentalent.com
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";
Mint UI includes a built-in theme system that supports both light and dark modes:
The ThemeProvider component automatically detects user system preferences and supports theme persistence:
`jsx
import { ThemeProvider } from "@tekminewe/mint-ui/theme";
function App() {
return (
);
}
`
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 (
Current theme: {theme}
$3
Mint UI provides a ready-to-use theme toggle component:
`jsx
import { ThemeToggle } from "@tekminewe/mint-ui/theme";function Navbar() {
return (
);
}
``