A production-ready, headless React component library offering maximum styling flexibility with robust TypeScript support and comprehensive accessibility features.
Pulse UI is designed for modern React applications that demand flexibility, accessibility, and performance. Built with a headless-first approach, it separates logic from presentation, giving you complete control over styling while maintaining robust functionality.
- 🧠 Headless Architecture - Logic separated from presentation for ultimate styling freedom
- 🎨 Framework Agnostic - Works with any styling solution (Tailwind, styled-components, CSS modules, emotion)
- ♿ Accessibility First - WCAG 2.1 AA compliant with comprehensive ARIA support
- 📘 TypeScript Native - Built with TypeScript for exceptional developer experience
- ⚡ Performance Optimized - Tree-shakeable, lightweight, and optimized for production
- 🌙 Dark Mode Ready - Advanced theming system with built-in dark mode support
- 📱 Mobile First - Touch-friendly, responsive components that work everywhere
- 🔧 Developer Friendly - Comprehensive documentation, examples, and tooling
Pulse UI implements three powerful component patterns for maximum flexibility:
Pure logic and behavior without styling constraints
import { useButton } from '@pulseui/core';
function CustomButton(props) {
const { buttonProps } = useButton(props);
return <button {...buttonProps} className="my-custom-styles" />;
}Flexible composition with context-based state sharing
<Modal>
<Modal.Trigger>Open Modal</Modal.Trigger>
<Modal.Content>
<Modal.Header>Title</Modal.Header>
<Modal.Body>Content</Modal.Body>
<Modal.Footer>Actions</Modal.Footer>
</Modal.Content>
</Modal>Render as any HTML element while maintaining functionality
<Button as="a" href="/link">Link Button</Button>
<Button as={Link} to="/route">Router Link</Button># npm
npm install @pulseui/core
# yarn
yarn add @pulseui/core
# pnpm
pnpm add @pulseui/coreimport { Button, Modal, ThemeProvider } from '@pulseui/core';
import '@pulseui/core/style.css';
function App() {
return (
<ThemeProvider>
<Button variant="primary" size="lg">
Get Started with Pulse UI
</Button>
<Modal>
<Modal.Trigger>Open Modal</Modal.Trigger>
<Modal.Content>
<Modal.Header>Welcome to Pulse UI</Modal.Header>
<Modal.Body>
Build beautiful, accessible interfaces with ease.
</Modal.Body>
</Modal.Content>
</Modal>
</ThemeProvider>
);
}Next.js
// pages/_app.js
import { ThemeProvider } from '@pulseui/core';
import '@pulseui/core/style.css';
export default function App({ Component, pageProps }) {
return (
<ThemeProvider>
<Component {...pageProps} />
</ThemeProvider>
);
}Vite
// main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { ThemeProvider } from '@pulseui/core';
import '@pulseui/core/style.css';
import App from './App';
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<ThemeProvider>
<App />
</ThemeProvider>
</React.StrictMode>
);Create React App
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { ThemeProvider } from '@pulseui/core';
import '@pulseui/core/style.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<ThemeProvider>
<App />
</ThemeProvider>
</React.StrictMode>
);Remix
// app/root.tsx
import { ThemeProvider } from '@pulseui/core';
import '@pulseui/core/style.css';
export default function App() {
return (
<html>
<head>
<Meta />
<Links />
</head>
<body>
<ThemeProvider>
<Outlet />
</ThemeProvider>
<Scripts />
</body>
</html>
);
}Gatsby
// gatsby-browser.js
import { ThemeProvider } from '@pulseui/core';
import '@pulseui/core/style.css';
export const wrapRootElement = ({ element }) => (
<ThemeProvider>{element}</ThemeProvider>
);| Section | Description |
|---|---|
| 🚀 Getting Started | Installation, setup, and first steps |
| 🎨 Theming Guide | Customization and theme creation |
| 📖 Component API | Complete component reference |
| ♿ Accessibility | WCAG compliance and best practices |
| 🏗️ Architecture | Design patterns and principles |
| 🤝 Contributing | Development workflow and guidelines |
- Container - Responsive layout container
- Grid - Flexible grid system
- Stack - Vertical and horizontal stacking
- Sidebar - Collapsible navigation sidebar
- Navbar - Application navigation bar
- Breadcrumbs - Hierarchical navigation
- Pagination - Data pagination controls
- Tabs - Tabbed interface component
- Button - Interactive button component
- Input - Text input with validation
- Select - Dropdown selection
- Checkbox - Boolean input control
- Radio - Single selection input
- Switch - Toggle switch control
- Slider - Range input control
- Modal - Dialog and modal windows
- Toast - Notification messages
- Tooltip - Contextual information
- Popover - Rich contextual overlays
- Alert - Status and alert messages
- Table - Data table with sorting/filtering
- Card - Content container
- Avatar - User profile images
- Badge - Status indicators
- Progress - Progress indicators
- Accordion - Collapsible content sections
- Carousel - Image and content carousel
- DatePicker - Date selection interface
- FileUpload - File upload with drag & drop
- DataGrid - Advanced data table
| Browser | Version |
|---|---|
| Chrome | ≥ 91 |
| Firefox | ≥ 90 |
| Safari | ≥ 14 |
| Edge | ≥ 91 |
| Format | Size (gzipped) |
|---|---|
| ESM | ~45KB |
| CJS | ~48KB |
| UMD | ~52KB |
We welcome contributions! Please see our Contributing Guide for details.
MIT © Venkatarama T S K
Built with ❤️ for the React community