A customizable UI library starter for React and Next Applications. This is a beta version. This project is currently in development.
Visit https://pier-ui-docs.vercel.app/ to view the full documentation.
Inside your React project directory, run the following:
yarn add pier-ui
Or with npm:
npm install pier-ui --save
// 1. import `Pier UI` component
import { PierUIProvider } from "pier-ui";
function App() {
// 2. Wrap Pier UI Provider at the root of your app
return (
<PierUIProvider>
<> </>
</PierUIProvider>
);
}
If you want to use pier-ui as a starter UI and build your own components, use the untranspiled source files ( pier-ui/lib ) or simple copy the untranspiled source files in your project and configure styled-jsx:
yarn add pier-ui styled-jsx classnames prop-types
Or with npm:
npm install pier-ui styled-jsx classnames prop-types --save
// 1. import `Pier UI` component
import { PierUIProvider } from "pier-ui/lib";
function App() {
// 2. Wrap Pier UI Provider at the root of your app
return (
<PierUIProvider>
<> </>
</PierUIProvider>
);
}
To use pier-ui with styled-jsx, you have to add styled-jsx/babel to plugins in your babel configuration:
{
"plugins": ["styled-jsx/babel"]
}
See the styled-jsx Docs here: styled-jsx docs
Next.js automatically configures styled-jsx with babel, you don't have to configure it manually. In your Next.js , run the following:
npm install pier-ui next-transpile-modules --save
Change the next.config.js file:
const withTM = require("next-transpile-modules")(["pier-ui"]);
module.exports = withTM({});
Usage:
import { PierUIProvider } from "pier-ui/lib";
function MyApp({ Component, pageProps }) {
return (
<PierUIProvider>
<Component {...pageProps} />
</PierUIProvider>
);
}
export default MyApp;
If you use pier-ui as a node module in your Next.js project, you have to install next-transpile-modules to use pier-ui/lib. Or copy the untranspiled source files to your project for example ./components/lib/ and import:
import { PierUIProvider } from "./components/lib";
Create React App comes with babel-plugin-macros already installed, so the only thing that needs to be done is to install styled-jsx.
Coming Soon.