flowmind-ui
v0.0.4
Published
A modern, customizable React component library with Tailwind CSS support and dynamic theming.
Readme
FlowMind UI
A modern, customizable React component library with Tailwind CSS support and dynamic theming.
Installation
npm install flowmind-uiSetup
1. Import the CSS theme
Add the theme CSS to your main CSS file or import it in your app:
/* In your main CSS file */
@import 'flowmind-ui/theme.css';Or import it in your React app:
import 'flowmind-ui/theme.css'2. Configure Tailwind CSS
You need to configure Tailwind CSS to recognize the custom theme classes. Add this to your tailwind.config.js:
import { flowmindTailwindConfig } from 'flowmind-ui/tailwind.theme.js'
export default {
content: [
'./src/**/*.{js,ts,jsx,tsx}',
'./node_modules/flowmind-ui/**/*.{js,ts,jsx,tsx}', // Important: Include this
],
theme: {
extend: {
...flowmindTailwindConfig.theme.extend,
},
},
plugins: [],
}3. Use the components
import { Button } from 'flowmind-ui'
function App() {
return (
<div>
<Button>Click me!</Button>
</div>
)
}Theming
The theme uses CSS custom properties that you can override:
:root {
--color-primary: #4f46e5;
--color-bg: #ffffff;
--color-text: #111827;
--radius: 0.5rem;
--font-sans: 'Inter', sans-serif;
}
/* Dark theme */
[data-theme='dark'] {
--color-primary: #6366f1;
--color-bg: #0f172a;
--color-text: #f1f5f9;
}To enable dark theme, add the data-theme="dark" attribute to your root element:
<html data-theme="dark">
{/* Your app */}
</html>Available Components
Button
A customizable button component that uses the theme variables.
<Button>Default Button</Button>
<Button className="bg-red-500">Custom Button</Button>Development
npm install
npm run devBuilding
npm run build