Getting Started with Pillar UI

Installation

Install Pillar UI in your project:

npm install @pillar-ui/core

For additional features, install these packages:

npm install @pillar-ui/hooks @pillar-ui/utils @pillar-ui/icons

Adding Styles

Import the Pillar UI CSS file in your main app file

import '@pillar-ui/core/main.css'

Customizing Your Theme

pillar ui add theming by default with css variables if you want to customize something in your theme follow this instructions

1. Create a new file in your project called theme.css and add the following code:

2. Add only the variables that you want to change to match you theme for more information take a closer look to the theme section if you are in the phone please try to open the sidebar and go to the them section

   Copy

   :root {
     --Pl-1: hsl(225deg 60% 99.4%);
     --Pl-2: hsl(223deg 100% 98.6%);
     /* ... */
     --Pl-11: hsl(226deg 55% 45%);
     --Pl-12: hsl(226dg 62% 17%);
   
     /* dark colors */
     --Pd-1: hsl(229deg 24% 10%);
     --Pd-2: hsl(230deg 36.4% 12.9%);
     /* ... */
     --Pd-11: hsl(228deg 100% 75.9%);
     --Pd-12: hsl(226deg 8% 96.3%);
   }

3. Import your theme file after the main Pillar UI CSS:

   Copy

   import '@pillar-ui/core/main.css'
   import './theme.css'

Using Pillar UI Components

Now you're ready to use Pillar UI in your project:

import { Button, Paper, Input } from '@pillar-ui/core'
import { Envelope } from '@pillar-ui/icons'

function App() {
  return (
    <Paper>
      <Input placeholder="Enter email" suffix={<Envelope />} />
      <Button>Submit</Button>
    </Paper>
  )
}

Developer experience

Pillar UI is built with developer experience (DX) in mind. We make it easy to customize default styles—for example, if you prefer sharp buttons instead of rounded ones, you can change it with one line of code even across your entire project or just a sub-tree of components.

    :root {
      --button-rad: 0;
      --avatar-rad: 0;
      --badge-rad: 0;
    }