@frontend-components-lib/ui

A collection of accessible, unstyled-ready React components built with Radix UI and Tailwind CSS.

Installation

npm install @frontend-components-lib/ui
# or
yarn add @frontend-components-lib/ui
# or
bun add @frontend-components-lib/ui

Peer Dependencies

Make sure your project has the following packages installed:

| Package | Version | | ------------- | ------- | | react | >=18 | | react-dom | >=18 | | tailwindcss | >=3.4 |

Tailwind CSS Setup

This library ships pre-built class names inside its dist folder. For Tailwind to include those classes in your production bundle, you must add the library's output path to the content array in your tailwind.config.js:

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@frontend-components-lib/ui/dist/**/*.js', // Add this
  ],
  // ...
};

Without this step, component styles will be purged and your UI will appear unstyled.

Usage

Button

The Button component supports five visual variants (primary, secondary, ghost, accent, danger) and three sizes (sm, md, lg). It also accepts a loading prop that renders a spinner and disables interaction, and an asChild prop to delegate rendering to a child element via Radix Slot.

import { Button } from '@frontend-components-lib/ui';

// Default primary button
<Button onClick={() => console.log('clicked')}>Save changes</Button>

// Secondary button in small size
<Button variant="secondary" size="sm">Cancel</Button>

// Danger button with loading state
<Button variant="danger" loading>Deleting...</Button>

// Render as a link using asChild
<Button asChild variant="ghost">
  <a href="/dashboard">Go to dashboard</a>
</Button>

Input

The Input component wraps a native <input> and adds support for prefix and suffix slots (icons, symbols, etc.), an error visual state, and optional input mask formatting. Available masks: numeric, currency, phone, cpf, cnpj. When a mask is active, the raw (digits-only) value is exposed via event.currentTarget.dataset.raw.

import { Input } from '@frontend-components-lib/ui';

// Basic text input
<Input placeholder="Enter your name" />

// Input with a currency prefix
<Input prefix="$" placeholder="0.00" />

// Input with an error state
<Input error placeholder="Invalid value" />

// Input with a phone mask
<Input
  mask="phone"
  placeholder="(00) 00000-0000"
  onChange={(e) => {
    console.log('formatted:', e.target.value);
    console.log('raw digits:', e.currentTarget.dataset.raw);
  }}
/>

Modal

The Modal component is a compound built on top of Radix UI Dialog. It exports the following pieces: Modal, ModalTrigger, ModalContent, ModalHeader, ModalFooter, ModalTitle, ModalDescription, ModalClose, ModalOverlay, and ModalPortal. ModalContent accepts a size prop (sm, md, lg), a showCloseButton prop (defaults to true), and an overlay prop (defaults to true).

import {
  Modal,
  ModalTrigger,
  ModalContent,
  ModalHeader,
  ModalTitle,
  ModalDescription,
  ModalFooter,
  ModalClose,
  Button,
} from '@frontend-components-lib/ui';

function DeleteConfirmModal() {
  return (
    <Modal>
      <ModalTrigger asChild>
        <Button variant="secondary">Open modal</Button>
      </ModalTrigger>

      <ModalContent size="md">
        <ModalHeader>
          <ModalTitle>Confirm action</ModalTitle>
        </ModalHeader>

        <ModalDescription>
          Are you sure you want to proceed? This action cannot be undone.
        </ModalDescription>

        <ModalFooter>
          <ModalClose asChild>
            <Button variant="secondary">Cancel</Button>
          </ModalClose>
          <Button variant="danger">Delete</Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
}

Components

| Component | Description | | ------------ | ---------------------------------------------------------------------------------------------- | | Button | Accessible button with multiple variants, sizes, loading state, and Radix Slot support. | | Checkbox | Accessible checkbox built on Radix UI Checkbox with consistent styling. | | Input | Text input with prefix/suffix slots, error state, and built-in input masks. | | Modal | Compound modal dialog built on Radix UI Dialog with overlay, header, footer, and close button. | | RadioGroup | Accessible radio group built on Radix UI RadioGroup for single-option selection. | | Select | Compound select/dropdown built on Radix UI Select with trigger, content, and item primitives. | | Tooltip | Accessible tooltip built on Radix UI Tooltip with configurable content and arrow. |

License

MIT