@pageblock/utils NPM

PageBlock Utils

A modern utility library for PageBlock and Webflow, providing reusable components and utilities for web applications and Webflow sites.

Features

🚀 Modern JavaScript (ES6+)
📦 Tree-shakeable exports
🎨 SCSS styling with modern features
🔧 Built with Vite for optimal performance
📱 Responsive and accessible components
🌐 Cross-browser compatibility
⚡ Webflow-ready components

View Demo | Report Bug | Request Feature

Installation

NPM Installation (Recommended)

npm install @pageblock/utils

Import Individual Components

// Import specific components
import { Countdown } from '@pageblock/utils/countdown';
import '@pageblock/utils/style.css';

// Initialize components
const countdown = new Countdown();

Import Complete Package

// Import all components
import PageBlockUtils from '@pageblock/utils';
import '@pageblock/utils/style.css';

// Initialize components
const modal = new PageBlockUtils.Modal();
const countdown = new PageBlockUtils.Countdown();

CDN Usage (For Webflow)

<!-- Add to Head -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@pageblock/utils@latest/dist/pageblock-utils.css">

<!-- Add before </body> -->
<script type="module">
  import { Countdown } from 'https://cdn.jsdelivr.net/npm/@pageblock/utils@latest/dist/countdown.js';
  const countdown = new Countdown();
</script>

Components

Countdown Component

View Countdown Documentation

Modal Component

The modal component provides an accessible, customizable modal dialog system that can be used in various contexts:

As an ES module in modern JavaScript applications
As a direct script include for Webflow or other no-code platforms
As part of the PageBlock Utils package

Features

Accessibility: Full keyboard navigation, focus trapping, and proper ARIA attributes
Multiple animations: Fade, zoom, slide-up, slide-down
Layout variants: Standard modal, bottom sheet, side panels, full-screen mobile
Z-index management: Automatically handles stacking of multiple modals
Event callbacks: Hooks for open and close events
No dependencies: Pure JavaScript with no external libraries required

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.