Theming
Easily customise the look and feel of Rewind-UI components
Rewind-UI theming system is built on top of Class Variance Authority library. Please make sure you are familiar with the CVA library before proceeding.
Customization
The default theme can be easily customized by passing the new theme object to the ThemeProvider
component.
To store your custom styles it is suggested to create a theme
directory into your project containing a styles
subdirectory.
public
src
theme
├── styles
│ ├── Button.styles.ts
Then, you can copy all or some of the default styles from the @rewind-ui/core package and customize them as you wish. Finally you can import them into your App.tsx
file and pass them to the ThemeProvider
component.
Don't forget to adjust your tailwind.config.js file to include the new theme/styles files!
import {
Button,
ThemeContextType,
useTheme,
ThemeProvider,
} from '@rewind-ui/core';
import './App.css'
import { buttonStyles } from './theme/styles/Button.styles';
function App() {
const defaultTheme = useTheme();
const themeContext: ThemeContextType = {
theme: {
components: {
...defaultTheme.components,
Button: buttonStyles,
}
},
};
return (
<div className="App">
<ThemeProvider value={themeContext}>
<Button color="blue">Blue</Button>
</ThemeProvider>
</div>
);
}
export default App;