DEV Community

Cover image for Introducing react-creme, a new light weight UI component library for React
Prabhu Murthy
Prabhu Murthy

Posted on • Updated on

Introducing react-creme, a new light weight UI component library for React

✨ What is react-creme

react-creme is a brand new UI toolkit (aka component library) for React.

With 40+ High quality UI components, react-creme comes with an exhaustive list of ready to use performant UI Elements for building apps of any shape and size.

Weighing just ~43kb (minzipped size), react-creme is light and we intend to keep it that way. The library has a very minimal dependency at the moment and the plan is to whittle down on external dependencies and make the lib completely independent in the future.

❓Why

The goal was to build a lighter UI component library but at the same time provide a toolkit that is powerful, easy to setup and configure.

The library exposes an intuitive API that is easier to understand and consistent across the components.

💪 Typescript

The library has been written completely in typescript and the components have been strongly typed in a manner that is consistent with the standards.

♿ Accessibility

react-creme takes accessibility seriously. All of the UI elements are accessibility complaint and the keyboard based navigation has been implemented to work seamlessly across all browsers.

🎨 Themes

react-creme comes with an inbuilt ThemeProvider that makes the whole themefication process easy and hassle free.

The colors, font sizes, icon sizes can be customized quickly with ease.

⚡Performance

Components are light, robust and elements like List comes with the virtualization feature out of the box. Virtualization is currently supported on elements such as List and Dropdown, but this will be soon introduced to components that deal with larger datasets.

Installation

react-creme is available for use from npm and you can install it via npm or yarn

yarn add react-creme
Enter fullscreen mode Exit fullscreen mode

or

npm install react-creme
Enter fullscreen mode Exit fullscreen mode

Getting started

import { Button } from 'react-creme';
import 'react-creme/dist/react-creme.css';

const App = () => {
  return <Button label="Save" onClick={()=>alert("Saved")} />
};

export default App
Enter fullscreen mode Exit fullscreen mode

If all goes well you should have the button rendered and on clicking should alert you with the "Saved" message.

button

How about a slider component ?

import { Slider} from 'react-creme';
import 'react-creme/dist/react-creme.css';

const App = () => {
  return <Slider end={13} knobShape="square" knobSize={15} position="top" start={4} />
};

export default App
Enter fullscreen mode Exit fullscreen mode

slider

You can checkout all the cool stuff you can have on a slider here

Explore All the Components

⚡What's coming next

🌒 - Support for Dark mode has been under the works and will be released as part of the beta release.

🌈 - More components

🛣️ Roadmap

react-creme has been under development for the past few months and its currently in alpha stage. I expect the lib to move into beta stage in the coming weeks.

Please feel free to add your comments / feedback. What you like, what you didn't like, what can be improved.

If you liked this post, you might also like some of the other stuff i built on Github

Follow me on Twitter

Star this project on Github

📃react-creme doc site

Top comments (2)

Collapse
 
vital_tech_results profile image
Devadi Dev

Congratulations on the successful launch!

Collapse
 
prabhuignoto profile image
Prabhu Murthy

Thank you ☺️