palma-ui v3.0.2
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.
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago