A simple UI library based on CSS Modules, featuring theming support
A boilerplate for a simple UI library featuring CSS Modules and theming support via either CSS Custom Properties or a JavaScript theme object.Installation
Install the package in your project directory with:
npm install @sashathor/css-modules-ui-lib-with-themingCreate React App Demo
A simple demo of the library in a Create React App project.
Getting Started
cd demos/cra
npm install
npm run startCustom Themes switching
// App.tsx
import React from "react";
import {
Button,
Chart,
ThemeProvider,
} from "@sashathor/css-modules-ui-lib-with-theming";
export const App = () => {
const [theme, setTheme] = React.useState(themes.light);
return (
<>
<ThemeProvider theme={theme}>
<div style={{ marginBottom: 20 }}>
<Button>Button</Button>
</div>
<Chart />
</ThemeProvider>
<button
style={{ marginTop: 20 }}
onClick={() =>
setTheme(theme === themes.light ? themes.dark : themes.light)
}
>
switch theme
</button>
</>
);
};
Default Theme outside of ThemeProvider
// App.tsx
import React from "react";
import { Button, Chart } from "@sashathor/css-modules-ui-lib-with-theming";
export const App = () => (
<>
<Button>Button</Button>
<br />
<br />
<Chart />
</>
);
Style override via className prop
// theme.module.css
.customChart {
background-color: red;
}// App.tsx
import React from "react";
import themeStyles from "./theme.module.css";
import { Chart } from "@sashathor/css-modules-ui-lib-with-theming";
export const App = () => (
<>
<Chart className={themes.customChart} />
</>
);
Style override via style prop
// App.tsx
import React from "react";
import { Chart } from "@sashathor/css-modules-ui-lib-with-theming";
export const App = () => (
<>
<Chart style={{ backgroundColor: "#00ff00" }} />
</>
);
Style override via Emotion's css method
// App.tsx
import React from "react";
import { css } from "@emotion/css";
import { Chart } from "@sashathor/css-modules-ui-lib-with-theming";
export const App = () => (
<>
<Chart
className={css`
background-color: orange;
`}
/>
</>
);
Next.js Demo
A simple demo of the library in a Next.js project. Note: The library is compatible with Next.js Server Components out of the box.
Getting Started
cd demos/nextjs
npm install
npm run devCustom Theme
Default Theme
