DOCSEARCHbyAlgolia
Submit Docs

Pillar UI Documentation

website·Indexed 31 days ago

https://www.pillar-ui.com

A React UI library featuring a comprehensive set of components, utility-first CSS classes for spacing, sizing, positioning, and typography, and a collection of custom hooks such as useLocalStorage, useDarkMode, and useIntersectionObserver. Includes utility modules for string, number, and date manipulation, as well as support for responsive breakpoints and color themes.

Tokens
46.2K
Snippets
334
Records
378
Agent score
49%

What's inside Pillar UI

  1. Use the Link component for navigation

    The Link component is used to enhance navigation within React applications, allowing users to be guided to different sections of a website or external resources.
    import { Link } from '@pillar-ui/core'

const MyComponent = () => {
  return <Link>Click Me</Link>
}

  2. Use the Radio component for single-option selection

    The Radio component is a standard radio input used to select a single option from a list. It supports custom children (such as text, layouts, or links) and various visual configurations.
    import { Radio } from '@pillar-ui/core'

<Radio>Option 1</Radio>

  3. Use the Kbd component to display keyboard shortcuts

    The Kbd component provides visual cues for keyboard input, allowing developers to display keyboard shortcuts and commands in a clear, intuitive format within a React application.
    import { Kbd } from '@pillar-ui/core';

const Example = () => <Kbd title="Esc" />;

  4. Render code snippets with the Code component

    The Code component is used to render code snippets to the screen. It is imported from the @pillar-ui/core package.
    import { Code } from '@pillar-ui/core'

const Example = () => {
  return <Code>{`console.log('Hello world')`}</Code>
}

  5. Use the Paper container component

    The Paper component is a versatile container used to display content. It supports a wide range of styling props including background colors, corner rounding, padding, margins, flow spacing, and shadows.
    import { Paper } from '@pillar-ui/core'

const Example = () => {
  return (
    <Paper>
      Content goes here
    </Paper>
  );
};

  6. Use the ProgressCircle component

    The ProgressCircle component visually represents the completion percentage of a task or operation. It can be imported from @pillar-ui/core and supports customization of size, color, and value ranges.
    import { ProgressCircle } from '@pillar-ui/core';

const Example = () => {
  return <ProgressCircle value={50} label="Loading..." />;
};

  7. Install Pillar UI

    Install the core Pillar UI package to get started. Optional packages for hooks, utilities, and icons are available for additional functionality.
    # Install core library
npm install @pillar-ui/core

# Install optional feature packages
npm install @pillar-ui/hooks @pillar-ui/utils @pillar-ui/icons

  8. Implement a search input with InputSearch

    The InputSearch component provides a text input field with an integrated search icon for user queries. It is imported from the @pillar-ui/core package.
    import { InputSearch } from '@pillar-ui/core'

export const SearchExample = () => {
  return <InputSearch placeholder="Search..." />
}

  9. Use the InputNumber component

    The InputNumber component allows users to input numerical values with support for range control, increments, and validation. It is imported from the @pillar-ui/core package.
    import { InputNumber } from '@pillar-ui/core';

const App = () => <InputNumber />;

  10. Manage checkbox group state with useCheckboxGroup

    The useCheckboxGroup hook simplifies managing a collection of checkboxes in React. It tracks which items are checked and provides helper functions to toggle individual items or the entire group. It is a client-side hook and should not be used for server-side rendering.
    import { useCheckboxGroup } from '@pillar-ui/hooks'

const { 
  checkedItems, 
  setCheckedItems, 
  isIndeterminate, 
  isAllChecked, 
  handleToggleAll, 
  handleToggleItem 
} = useCheckboxGroup({ initialCheckedState: [] })

  11. Install and import usePersistentCallback

    Import the usePersistentCallback hook from the @pillar-ui/hooks package to use it in your React components.
    # Install the hooks package (assuming npm)
npm install @pillar-ui/hooks
    import { usePersistentCallback } from '@pillar-ui/hooks'