zwheui
v1.0.7-4.2.0
Published
A showcase of a modern, reusable, and aesthetically pleasing React component library built with TypeScript and Tailwind CSS.
Downloads
546
Maintainers
Readme
ZwheUI Component Library
A showcase of a modern, reusable, and aesthetically pleasing React component library built with TypeScript. This project demonstrates a complete design system with a focus on dark-mode aesthetics, smooth animations, and a highly composable architecture.
✨ Features
- Comprehensive Component Set: Over 80+ components, ranging from basic form elements to a complex, interactive node editor and data visualization charts.
- Built with React & TypeScript: Type-safe and modern component architecture.
- Zero-Dependency Styling: A custom CSS-in-JS solution (
useStyleshook) provides scoped styles without external libraries. - Dynamic Theming: Easily switch between dark, light, and a fully customizable theme in real-time.
- Responsive & Accessible: Components are designed to be responsive and include ARIA attributes for accessibility.
- Composable by Design: Complex components like
Audio,Video, andChartsare built from smaller, reusable parts. - Animation Hooks: Custom hooks for creating fluid animations and transitions (
useFade,useSlide,useCurveAnimation).
🚀 Live Showcase
This application itself serves as a live interactive showcase. You can see all the components in action, test their functionality, and switch themes to see how they adapt.
📚 Library Documentation
For guides on how to use the library, please see the documentation files:
Core Concepts
- Installation
- Getting Started
- Design Principles
- Styling System
- Theming
- Layout Primitives
- Polymorphic Components (
asprop) - Composable Components
- Animation Hooks
- Utility Hooks
- Icons Guide
Component Guides
- Forms & Inputs
- Data Display
- Navigation Patterns
- Feedback & Overlays
- Notification Systems (Toast & Snackbar)
Advanced Topics
- Accessibility (A11Y)
- Performance Optimization
- Customization
- Server-Side Rendering (SSR)
- Testing
- Advanced Charts
- Graphics Node Editor
- Advanced Node Editor
- Authentication
Recipes & Guides
Project
📦 Component Documentation
- Accordion
- Alert
- AnimatedBlock
- AspectRatio
- Audio
- Avatar
- Backdrop
- Badge
- Blockquote
- Box
- Breadcrumbs
- Button
- ButtonGroup
- Calendar
- Card
- Carousel
- Center
- Charts
- Checkbox
- Code
- CodeEditor
- CodePreview
- Collapse
- ColorPicker
- Combobox
- Command
- Container
- ContextMenu
- DataTable
- DatePicker
- Dialog
- Divider
- Drawer
- Dropdown
- Editable
- EmptyState
- Error
- FileUpload
- Flex
- FloatingActionButton
- Footer
- FormControl
- GraphicsNodeEditor
- Grid
- Header
- HoverCard
- Icon
- IconButton
- Image
- Input
- Kbd
- Layer
- Layout
- Link
- List
- Markdown
- Menu
- Message
- Modal
- Nav
- NumberInput
- PageHeader
- Pagination
- PinInput
- Popover
- Popper
- Progress
- RadioGroup
- Rating
- Search
- SegmentedControl
- Select
- Sidebar
- SignInPage
- Skeleton
- Slider
- Snackbar
- Sofa
- SpeedDial
- Spinner
- Stat
- Stepper
- Switch
- Table
- Tabs
- Tag
- Text
- Textarea
- TextInput
- ThemeSwitcher
- Timeline
- Toast
- ToggleButton
- Tooltip
- TransferList
- TreeView
- Video
- XNodeTree
- XmlRenderer
