React component library for Preline UI - Easy integration of Preline UI components in React applications.
View Storybook Documentation / View Demo Site
- Easy integration of Preline UI in React
- Full TypeScript support
- Tailwind CSS based
- Responsive design support
- Accessibility support
- Customizable
# npm
npm install preline-react preline
# yarn
yarn add preline-react preline
# pnpm
pnpm add preline-react prelineMake sure Tailwind CSS is installed:
npm install -D tailwindcss @tailwindcss/formsAdd 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;
}
}Use PrelineProvider at the root of your application:
import { PrelineProvider } from "preline-react";
function App() {
return (
<PrelineProvider>
<div className="App">{/* Your application */}</div>
</PrelineProvider>
);
}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>
);
}Container- ContainerGrid- Grid
Typography- Text styling componentLink- Hyperlink componentDivider- Horizontal or vertical line separatorKBD- Keyboard input element
Alert- Alert messagesAvatar- User avatarAvatarGroup- Group of avatarsBadge- Status badgeBlockquote- Quote blockButton- ButtonButtonGroup- Group of buttonsCard- Card containerChatBubble- Chat message bubbleCollapse- Collapsible contentDevice- Device mockupLegendIndicator- Legend indicatorList- List componentProgress- Progress barRatings- Star ratingsSpinner- Loading spinnerStyledIcon- Styled iconTimeline- Timeline componentToast- Toast notification
Input- Text inputInputGroup- Input with addonsInputNumber- Number inputTextarea- Text areaSelect- Select dropdownCheckbox- CheckboxRadio- Radio buttonSwitch- Toggle switchFileInput- File upload inputRangeSlider- Range sliderColorPicker- Color pickerTimePicker- Time pickerStrongPassword- Password strength validation inputTogglePassword- Password visibility toggle input
Modal- Modal dialogTooltip- TooltipPopover- Popover
Accordion- Accordion/collapsible sectionsPagination- Pagination controls
All components accept the className property, making it easy to apply custom styles:
<Button className="custom-button-style">Custom Button</Button>This project uses Storybook for component development and documentation.
# Start the development server
pnpm run storybookOpen http://localhost:6006 in your browser to view Storybook.
# Build static Storybook site
pnpm run storybook:buildBuilt files will be output to the storybook-static directory.
# Clone the repository
git clone https://github.com/minagishl/preline-react.git
cd preline-react
# Install dependencies
pnpm install
# Start Storybook
pnpm run storybookThis package uses automated releases through GitHub Actions. To release a new version:
-
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"
-
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_TOKENin GitHub repository secrets - Ensure the npm package name is available or you have publishing rights
MIT License - See LICENSE file for details.
Contributions are welcome! Please send Issues or Pull Requests for details.
If you encounter any issues, please report them at GitHub Issues.