A modern React UI component library built with TypeScript and SCSS Modules
npm install riverwood-uiA modern React UI component library built with TypeScript and SCSS Modules.
``bash`
npm install riverwood-ui
Riverwood UI requires React 18+ or React 19+:
`bash`
npm install react react-dom
`tsx
import { Button } from 'riverwood-ui';
import 'riverwood-ui/styles';
function App() {
return (
);
}
`
`tsx`
import {
Button,
Tooltip,
// ... other components
} from 'riverwood-ui';
You can import the global styles:
`tsx`
import 'riverwood-ui/styles';
Or import specific style utilities:
`tsx`
import { colorVariants } from 'riverwood-ui/styles';
- Button component with variants and sizes
- ButtonGroup - Group of buttons
- Tooltip - Tooltip component
- Avatar - Avatar component
- Hr - Horizontal rule component$3
- AppBar - Application bar
- NavBar - Navigation bar
- Content - Content container
- Footer - Footer component
- LeftSidebar - Left sidebar
- RightSidebar - Right sidebar$3
- ChinaHeatMap - China heat map visualization
- KpiRingChart - KPI ring chart
- PieChart - Pie chart component
- ProgressBar - Progress bar component
- TrendChart - Trend chart component
- WidgetFrame - Widget frame container$3
- BentoGrid - Bento grid layout
- DocSection - Documentation section$3
- Responsive - Responsive wrapper component
- useResponsive - Responsive hook
- useDisableBodyScroll - Hook to disable body scrollFeatures
- 🎨 SCSS Modules - Scoped styling with CSS Modules
- 📦 TypeScript - Full TypeScript support
- 🎯 CVA Integration - Type-safe variant management with class-variance-authority
- 🔧 Polymorphic Components - Flexible component composition with
asChild pattern
- 📱 Responsive - Built-in responsive utilities
- ♿ Accessible - Built with accessibility in mindArchitecture
Riverwood UI follows a Core Component Pattern:
- Base Components (
_Base*.tsx`) - Core implementation with shared logicMIT