Rapidly build beautiful interfaces without ever leaving your React.
A comprehensive component library packed with components like <Button>, <Card>, <DataTable> and <Form> that can be composed to build any design, directly in your TSX.
Component Preview
Everything You Need To Build Modern UIs
Heco UI provides all the building blocks you need to create beautiful, accessible, and performant user interfaces.
Lightning Fast
Optimized for performance with tree-shaking and minimal bundle size.
Composable
Built with compound patterns for maximum flexibility and reusability.
Developer First
TypeScript-first with excellent IntelliSense and type safety.
Powerful UI Building Blocks
Explore our most advanced and versatile components that will elevate your user interfaces
Tag Input
Interactive tag input with autocomplete, drag-and-drop reordering, and validation
Flexible Container
Versatile container that can switch between normal and full-screen modes
Click the expand button to view in fullscreen
Link Hover Card
Elegant preview cards that appear when hovering over links
Number Field
Specialized input field for numeric values with rich formatting and controls
Notification Badge
Versatile notification indicator with various styles and animations
Popover Dialog
Progressive disclosure component combining popovers with dialogs
Timeline
Display chronological events with customizable layouts, styles and markers
Stepper
Guide through multi-step processes with interactive step indicators
Data Grid
Advanced data table with sorting, filtering, pagination, and selection
| ID | Name | Status |
|---|---|---|
| 001 | Product A | Active |
| 002 | Product B | Pending |
Verify Code
OTP verification with auto-focus and paste support
Gradient Text
Beautiful text gradients with customizable colors and directions
Sign Drawer
Capture signatures with a smooth drawing experience
Gallery
Beautiful image galleries with lightbox and zoom functionality
Image Generate
Generate and download images from DOM elements in various formats
Time Picker
Intuitive time selection with 12/24 hour format support
Color Picker
Advanced color selection with HEX, RGB, and HSL support
QR Code Generate
Generate customizable QR codes for links, text, and contact information
Form
Comprehensive form components with validation and accessibility
Dialog
Modal dialogs for focused user interactions and confirmations
Confirm Action
Are you sure you want to delete this item? This action cannot be undone.
Drawer
Side panels that slide in from the edge of the screen
Navigation
Sidebar
Responsive navigation sidebar with collapsible sections
Rich Text Editor
Powerful WYSIWYG editor with formatting tools and customizable features
This is a rich text editor with formatting options.
Star Rating
Interactive star rating component with customizable appearance and half-star support
File Upload
Drag and drop file upload with preview, progress, and validation support for multiple files
Component Categories
Explore our complete collection of UI components organized by functionality
Layout & Structure
Components that help organize and structure your content
Form & Input
Components for collecting user input and form handling
Data Display
Components for displaying data in various formats
Navigation & Progress
Components for navigating through content and showing progress
Overlay & Modals
Components that overlay the UI for focused interactions
Media & Display
Components for displaying images, videos, and other media
Feedback & Status
Components for providing feedback to users
Utility & Special
Specialized components and utilities
Ready to Build Beautiful UIs?
Start using Heco UI today and create stunning, accessible, and responsive user interfaces with ease.