palma-ui

Component library built in React and using Material UI components.

This library offers new components not present in Material like RichTextEditor, SearchBar, ButtonGroup, PhoneInput. It also redefines some of the default styles (if used with provided theme) to offer a more modern and minimal design (e.g. less/simpler shadows, smoother transitions and less color changes in interactions).

Palma UI needs to be used in addition to Material UI in your project as it's not meant to replace it, just compliment it with new components and different styles.

Inspiration for this library came from Semantic UI, Ant, Atlassian and others.

Why use this library

If your project is using Material UI and you need other components not provided by material or would like better looking selects, dropdowns, toggles and appbar

Why based on Material UI?

Material UI is one of the the most mature, popular, extensive, polished, accessible, and documented UI libraries out there. It also allows you to pull only components that you are using, read more about it here, which helps keep the size of this library small.

Bundle Size and Tree shaking

This library allows for tree shaking so that only the components you use end up in your bundle, read more here

You can see the size of any of the individual components in this library here

Live storybook

View a live version of the storybook here

Installation

npm install palma-ui

yarn add palma-ui

Usage

Add your own material theme

This library can be themed using material ui themes. You will at least want to add the primary and secondary colors of your application (see a good starting theme here).

To add a theme at the root component of your application do:

import React from "react";

import {
  createMuiTheme,
  ThemeProvider
} from "@material-ui/core/styles";
import { Button } from "palma-ui";


const theme = createMuiTheme({
 themeName: "Light Theme",
 palette: {
   primary: {
     main: "#0847a5"
   },
   secondary: {
     main: "#424242"
   }
 }
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button>Some label</Button>
    </ThemeProvider>
  );
}

export default App;

More information on Material UI themes and how to define them here.

Styling components

Components can be styled just like in material-ui (using JSS, CSS or your preferred styled-components library). Read more about here

Developing

Available Scripts

npm test

Runs tests

npm test:watch

Launches the test runner in the interactive watch mode.

npm run storybook

Runs storybook on http://localhost:9009

npm run build-storybook

Builds a static page for storybook with index in storybook-static/index.html

License

Palma UI is MIT licensed.