Skip to content

README.md

Latest commit

 

History

History
244 lines (178 loc) · 5.33 KB

README.md

File metadata and controls

244 lines (178 loc) · 5.33 KB

Preline React

React component library for Preline UI - Easy integration of Preline UI components in React applications.

View Storybook Documentation / View Demo Site

Features

  • Easy integration of Preline UI in React
  • Full TypeScript support
  • Tailwind CSS based
  • Responsive design support
  • Accessibility support
  • Customizable

Installation

# npm
npm install preline-react preline

# yarn
yarn add preline-react preline

# pnpm
pnpm add preline-react preline

Setup

1. Tailwind CSS Configuration

Make sure Tailwind CSS is installed:

npm install -D tailwindcss @tailwindcss/forms

2. CSS File Configuration

Add the following to your CSS file (e.g., globals.css):

@import "tailwindcss";
@plugin "@tailwindcss/forms";

/* Preline UI */
@import "preline/variants.css";
@source "../node_modules/preline/dist/*.js";

/* Preline React */
@source "../node_modules/preline-react/dist/*.js";

/* Optional Preline UI styles */
@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

3. Provider Setup

Use PrelineProvider at the root of your application:

import { PrelineProvider } from "preline-react";

function App() {
  return (
    <PrelineProvider>
      <div className="App">{/* Your application */}</div>
    </PrelineProvider>
  );
}

Usage

import { useState } from "react";
import { Button } from "preline-react";

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="p-6 text-center">
      <h1 className="mb-4 text-2xl font-bold">Count: {count}</h1>

      <Button variant="solid" color="blue" onClick={() => setCount(count + 1)}>
        Click
      </Button>
    </div>
  );
}

Available Components

Layout Components

  • Container - Container
  • Columns - Multi-column layout wrapper
  • Grid - Grid
  • LayoutSplitter - Layout Splitter component
  • Typography - Text styling component
  • Link - Hyperlink component
  • Divider - Horizontal or vertical line separator
  • KBD - Keyboard input element

Basic Components

  • Alert - Alert messages
  • Avatar - User avatar
  • AvatarGroup - Group of avatars
  • Badge - Status badge
  • Blockquote - Quote block
  • Button - Button
  • ButtonGroup - Group of buttons
  • Card - Card container
  • ChatBubble - Chat message bubble
  • Collapse - Collapsible content
  • Device - Device mockup
  • LegendIndicator - Legend indicator
  • List - List component
  • Progress - Progress bar
  • Ratings - Star ratings
  • Skeleton - Loading placeholder
  • Spinner - Loading spinner
  • StyledIcon - Styled icon
  • Toast - Toast notification
  • Timeline - Timeline component
  • TreeView - Tree View component

Form Components

  • Input - Text input
  • InputGroup - Input with addons
  • InputNumber - Number input
  • Textarea - Text area
  • Select - Select dropdown
  • Checkbox - Checkbox
  • Radio - Radio button
  • Switch - Toggle switch
  • FileInput - File upload input
  • RangeSlider - Range slider
  • ColorPicker - Color picker
  • TimePicker - Time picker
  • StrongPassword - Password strength validation input
  • TogglePassword - Password visibility toggle input

Overlay Components

  • Modal - Modal dialog
  • Tooltip - Tooltip
  • Popover - Popover

Navigation Components

  • Accordion - Accordion/collapsible sections
  • Pagination - Pagination controls

Customization

All components accept the className property, making it easy to apply custom styles:

<Button className="custom-button-style">Custom Button</Button>

Storybook

This project uses Storybook for component development and documentation.

Starting Storybook

# Start the development server
pnpm run storybook

Open http://localhost:6006 in your browser to view Storybook.

Building Storybook

# Build static Storybook site
pnpm run storybook:build

Built files will be output to the storybook-static directory.

Development & Release

Development

# Clone the repository
git clone https://github.com/minagishl/preline-react.git
cd preline-react

# Install dependencies
pnpm install

# Start Storybook
pnpm run storybook

Release

This package uses automated releases through GitHub Actions. To release a new version:

  1. Create a new GitHub release:

    • Go to the Releases page in the repository
    • Click "Create a new release"
    • Create a new tag with the format v*.*.* (e.g., v1.2.3)
    • Add a release title and description
    • Click "Publish release"

  2. GitHub Actions will automatically:

    • Run tests and linting
    • Automatically update and push package.json version
    • Build the package
    • Publish to npm with public access
    • Upload the package asset to the GitHub release

Prerequisites for automated publishing:

  • Set up NPM_TOKEN in GitHub repository secrets
  • Ensure the npm package name is available or you have publishing rights

License

MIT License - See LICENSE file for details.

Contributing

Contributions are welcome! Please send Issues or Pull Requests for details.

Support

If you encounter any issues, please report them at GitHub Issues.