Getting Started with Pillar UI

Welcome to Pillar UI! This powerful library offers a wide range of reusable UI components, React hooks, icons, and tools to streamline your web development process. Pillar UI focuses on accessibility, scalability, and best practices, helping you build robust and high-quality web applications with ease.

Quick Start Guide

1. 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

2. Adding Styles

Import the Pillar UI CSS file in your main app file:

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

3. Customizing Your Theme

In Pillar, we offer a comprehensive color palette consisting of 7 default colors, each with 12 variants and support for light and dark modes:

  • Primary (pri)
  • Secondary (sec)
  • Danger (dan)
  • Warning (war)
  • Info (inf)
  • Background (bg)

This robust system allows for extensive customization via a theme.css file, where you can not only modify these colors but also adjust other design elements such as spacing, shadows,font-size, radius.

we strongly advise prioritizing color adjustments for the primary and secondary colors. The remaining colors are often intrinsically linked to specific states or meanings within the system, and altering them could inadvertently impact user comprehension and overall experience.

By adhering to this guideline, you can ensure a cohesive and intuitive user interface while still enjoying the flexibility to express your brand identity through thoughtful color choices.

:root {
  --pri-l-1: hsl(225deg 60% 99.4%);
  --pri-l-2: hsl(223deg 100% 98.6%);
  /* ... */
  --pri-l-11: hsl(226deg 55% 45%);
  --pri-l-12: hsl(226dg 62% 17%);

  /* dark colors */
  --pri-d-1: hsl(229deg 24% 10%);
  --pri-d-2: hsl(230deg 36.4% 12.9%);
  /* ... */
  --pri-d-11: hsl(228deg 100% 75.9%);
  --pri-d-12: hsl(226deg 8% 96.3%);
} /* Add dark mode custom properties here */

Import your theme file after the main Pillar UI CSS:

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

4. 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 enhances your development experience (DX) with simple workflows for component implementation and customization. It eliminates repetitive styling code and offers customization options to fit your project requirements.

  • Responsive Variables: Control component appearance easily with responsive variables.
  • Preventing Repetition: Avoid repetitive styling by using predefined styles and variables.
  • Customization and Extensibility: Customize Pillar UI to match your project's design language and branding.
/*
//////////////////////////////////////////////////////////////////////////////////////////////////
  Theme Section
//////////////////////////////////////////////////////////////////////////////////////////////////
*/

/*  Define custom theme styles here  */

/*
//////////////////////////////////////////////////////////////////////////////////////////////////
  Default Properties Section
//////////////////////////////////////////////////////////////////////////////////////////////////
*/

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

Set --button-corner, --avatar-corner, and --badge-corner to 0 for sharp corners on buttons, avatars, and badges.

Key Features

  • Responsive Design: Easily create adaptive layouts with Pillar UI's responsive components.
  • Customizable Themes: Tailor the look and feel of your app with simple CSS variables.
  • Accessibility: Built-in accessibility features ensure your app is usable by everyone.
  • Developer-Friendly: Intuitive APIs and comprehensive documentation speed up development.

Explore More

Community and Support

We value your feedback! Help us improve Pillar UI by sharing your experience and suggestions.

Troubleshooting

If you encounter any issues while integrating Pillar UI, refer to the Troubleshooting section for solutions to common problems.

Further Assistance

If you're still facing issues after trying the solutions above, consider the following options:

FAQ: Check the Frequently Asked Questions section on our website for answers to common queries.

Community Discord: Join our community Discord server to seek help from other users and our development team. You can find the invite link on our website.

GitHub Issues: Visit our GitHub Issues page to report problems or find solutions to known issues.

Remember, troubleshooting can vary depending on individual projects and setups. These are general guidelines, so adapt them to fit your users' needs and your UI library's peculiarities.