Visit effective-ui to get started with effective-ui.
NPM Package : https://www.npmjs.com/package/@shivangi_2408/effective-ui
Visit https://effective-ui.vercel.app/ to view the storybook for all components.
# Using npm
npm install @shivangi_2408/effective-ui
# Using yarn
yarn add @shivangi_2408/effective-ui
# Using pnpm
pnpm add @shivangi_2408/effective-uiimport { Button } from '@shivangi_2408/effective-ui';
function App() {
return (
<Button variant="primary" onClick={() => console.log('Hello!')} size ="sm">
Click me
</Button>
);
}In your main or root file (e.g., main.tsx or index.tsx), wrap your application with the ThemeProvider to enable theming across your project.
....
import { ThemeProvider } from '@shivangi_2408/effective-ui';
....
<>
<ThemeProvider>
...
<App />
...
</ThemeProvider>
</>
);[Note: ] You can also provide your own Theme Context API for light and dark mode. But remember to set class attribute in html tag. And update globalcss to use same variable but with different colors for both light and dark mode.
:root {
--background-color : white;
}
html[class="dark"] {
--background-color : black;
}type Theme = "light" | "dark";
...
const [theme, setTheme] = useState<Theme>("dark");
...
document.documentElement.setAttribute("class", theme);Include the theme CSS file provided by the library in your main global css file. Use the CSS @layer feature to ensure proper layering and avoid style conflicts.
If applied correctly this will show up in the html tag in the browser windows based ont he browser preference theme.
@import url("@shivangi_2408/effective-ui/dist/esm/styles.css") layer(effective-ui);
....
:root {
--font-family: "Poppins", sans-serif;
--text:#000000;
--text-inside: #fff;
--text-grey:#5c5c5c;
--selected:var(--text);
--background-grey:#d1d1d1f5;
--background: 0 0% 100%;
--empty:var(--text);
--empty-hover:var(--text);
....@import url("@shivangi_2408/effective-ui/dist/esm/styles.css") layer(effective-ui);
....
:root {
...
--effectiveui-primary: <value>;
--effectiveui-secondary: <value>;
...
....# Install dependencies
npm install
# Start development server
npm run dev
# Build the library
npm run build
# Run tests
npm test
# Run Storybook
npm run storybookWe welcome contributions! Please see our Contributing Guide for details.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
We're excited to see the community adopt effective-ui, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!