Cron Builder UI

A beautiful, customizable cron expression builder component for React applications. Built with TypeScript, Tailwind CSS, and Radix UI primitives.

Screenshots

$3

Clean, modern interface with intuitive schedule type selection:

!Light Mode

$3

Full dark mode support with excellent contrast and readability:

!Dark Mode

Features

- 🎨 Beautiful UI - Clean, modern interface with light/dark mode support
- ⚡ TypeScript Support - Fully typed for better developer experience
- 🎯 Easy Integration - Simple API with minimal dependencies
- 🔧 Customizable - Tailwind CSS classes for easy styling
- 📱 Responsive - Works great on desktop and mobile devices
- 🎪 Multiple Formats - Support for hourly, daily, weekly, monthly, yearly, and custom expressions
- 🎭 Visual Feedback - Real-time preview of cron expressions in human-readable format
- ♿ Accessible - Built with Radix UI primitives for excellent accessibility

Installation

``bash
npm install @vpfaiz/cron-builder-ui
`

$3

Make sure you have these peer dependencies installed:

`bash
npm install @radix-ui/react-toggle-group react react-dom
`

Quick Start

`tsx
import React, { useState } from 'react';
import { CronBuilder } from '@vpfaiz/cron-builder-ui';
import '@vpfaiz/cron-builder-ui/styles/globals.css';

function App() {
const [cronExpression, setCronExpression] = useState('0 0 0');

return (



);
}
`

API Reference

$3

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| onChange | (expression: string) => void | ✅ | Callback function called when the cron expression changes |
| defaultValue | string | ❌ | Initial cron expression (defaults to '0 0 0') |
| className | string | ❌ | Additional CSS classes to apply to the component |

$3

#### getCronText(cronExpression: string)

Converts a cron expression to human-readable text.

`tsx
import { getCronText } from '@vpfaiz/cron-builder-ui';

const result = getCronText('0 9 1-5');
// result = { status: true, value: "At 09:00 AM, Monday through Friday" }
`

Styling

The component uses Tailwind CSS and CSS custom properties for theming. You can customize the appearance by:

$3

`tsx



`

$3

`css
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--selected: 222.2 47.4% 11.2%;
--selected-foreground: 210 40% 98%;
/ ... other variables /
}
`

$3

`tsx
className="my-custom-cron-builder"
onChange={setCronExpression}
/>
`

Examples

$3


`tsx

`

$3

`tsx
defaultValue="0 9 1-5"
onChange={setCronExpression}
/>
`

$3

`tsx
className="border rounded-lg p-4"
onChange={setCronExpression}
/>
`

Supported Cron Patterns

The component supports standard 5-field cron expressions:

| Field | Values | Special Characters |
|-------|--------|--------------------|
| Minute | 0-59 | , - * |
| Hour | 0-23 | , - * |
| Day of Month | 1-31 | , - * ? |
| Month | 1-12 | , - * |
| Day of Week | 0-6 (Sun-Sat) | , - * ? |

$3

- 0 0 0 - Every Sunday at midnight
- 0 9 ? - Every day at 9 AM
- 0 /2 * ? - Every 2 hours
- 15,45 * ? - Every hour at 15 and 45 minutes
- 0 9 1 * ? - First day of every month at 9 AM
- 0 9 1-5 - Weekdays at 9 AM

Development

$3

`bash
git clone https://github.com/vpfaiz/cron-builder-ui.git
cd cron-builder-ui
npm install
npm run dev
`

$3

`bash
npm run build # Build the demo app
npm run build:lib # Build the library for distribution
`

$3

`bash
npm run lint # Check for linting errors
npm run lint:fix # Fix linting errors automatically
`

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)
5. Open a Pull Request

License

MIT License - see the LICENSE file for details.

Acknowledgments

- Built with Radix UI for accessible primitives
- Styled with Tailwind CSS
- Component architecture and styling patterns inspired by shadcn/ui
- Cron parsing powered by cronstrue
- Toggle group component adapted from shadcn/ui components

---

Made with ❤️ for the React community