Reference Components
Ready-to-style functional components for React applications and custom component libraries.
- style however you want
- optimized for low bundle size
- solid base for creating your own component library
- React 17+
- Heavily tested
Components
Styling
- with SCSS/LESS or other preprocessors
.icon-class {
padding: 4px;
}
<Button classNames={{
icon: 'icon-class'
}}>
Hello
</Button>
Each component has its own list of classNames.
- with Tailwind
<Button classNames={{
icon: 'bg-blue p-4'
}}>
Hello
</Button>
- with classic CSS classes
.ref-button {
color: red;
}
<Button>Hello</Button>
Each component has its own classes prefixed with ref-
.
Themes
Use ThemeProvider
to leverage dynamic theming.
import { ThemeProvider, ITheme } from 'reference-components'
const theme: ITheme = {
Button: {
borderRadius: '3px'
}
}
root.render(
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
)
Development
Start local development server with Ladle
npm start
Project under active development, new components and features are being added. Contributions are always welcome.
License
MIT License. See LICENSE file for more details.