pm/ui is a beautifully themed component library that can be directly copied and pasted into any project manually or via npm. Each component includes detailed documentation, and premade themes like Dracula, Catppuccin, Nord, etc. are available. These themes can be easily copied from the website for a effortless theming.
Why pm/ui?
We all know that shadcn/ui can be easily customized with your own colors and themes but when we're creating a project, changing style for every component can be a tedious task. pm/ui reduced the CSS variables required to customize any component from 20 to just 5 variables. This makes it easier for developers to customize their components and reduces the chances of errors. pm/ui ships components with opiniated styles but also allows developers to customize them with their own styles.
Understanding the specs
Every component is either rounded-2xl(1rem) or rounded-full depending on the size. Components like Button, Input, Badge, etc. are rounded-full by default and components like Card, ContextMenu, etc. are rounded-2xl by default.
Every component has a border-2 by default and a border-primary color by default. Every component has a bg-popover for background color which is basically the primary color of the component with 10% opacity. Body has a bg-background color and text-primary color.
These specs can vary depending on the component variant. For example, Button has a variant of Filled. In this case, the background color of the button is bg-primary and the text color is text-background.
How to use pm/ui?
pm/ui is available on npm and can be easily installed with npm or pnpm. To install pm/ui, run the following command:
pnpm @pujan-modha/pm-ui initNote: It does not get installed as a dependency. It helps you configure your project with the required files and dependencies. You can also manually setup the required files by following this guide.
pm/ui is currently available for React ecosystem. We officially support Next.js, React, Remix, Astro and Gatsby. Laravel is also supported but is not actively monitored for issues.
Applying themes
pm/ui ships with a default theme called poimandres. poimandres is originally a Visual Studio Code theme but has been ported to pm/ui. To apply other themes, you can copy paste CSS variables from the pm/ui website. For example let's apply the Dracula Purple theme:
Just copy these variables and replace them in your Global CSS file.
:root {
--primary: 265 89% 78%;
--popover: 246 17% 25%;
--background: 231 15% 18%;
--foreground: 60 30% 96%;
--destructive: 0 100% 67%;
}Credits
pm/ui is a fork of shadcn/ui, uses tailwindcss for styling, is built with next.js and currently hosted on vercel. pm/ui is also available on npm. pm/ui is currently maintained by Pujan Modha and is licensed under the MIT License.