A warm, cozy UI library. Like a fireplace in code form. 🔥
Dark-first design system with CSS components and React wrappers.
| Package | Description |
|---|---|
@rosewood-ui/css |
Pure CSS component library |
@rosewood-ui/react |
React + TypeScript components |
rosewood-ui |
PySide6/Qt components |
<link rel="stylesheet" href="https://unpkg.com/@rosewood-ui/css/dist/rosewood.min.css">
<button class="rw-btn rw-btn--primary">Click me</button>npm install @rosewood-ui/react @rosewood-ui/cssimport '@rosewood-ui/css/dist/rosewood.css'
import { Button, Card, useTheme, ToastProvider } from '@rosewood-ui/react'
function App() {
const { theme, toggle } = useTheme()
return (
<ToastProvider>
<Card variant="elevated">
<h2>Hello Rosewood 🌹</h2>
<Button onClick={toggle}>
Switch to {theme === 'dark' ? 'light' : 'dark'} mode
</Button>
</Card>
</ToastProvider>
)
}pip install rosewood-ui[pyside]from PySide6.QtWidgets import QApplication
from rosewood import apply_theme, RwButton, RwCard
app = QApplication([])
apply_theme(app) # Dark theme by default
btn = RwButton("Hello", variant="primary")
card = RwCard(variant="elevated")# Install dependencies
npm install
# Build everything
npm run build
# Run demo app
npm run dev:demoDark mode is default. Add data-theme="light" to <html> for light mode, or use the useTheme() hook in React.
Override CSS custom properties (all prefixed --rw-) to customize colors, spacing, and typography.
Open the HTML files in examples/ to see CSS-only usage:
components.html— All componentsforms.html— Form layoutsdashboard.html— Dashboard layoutlanding.html— Landing page
MIT — Fork it, customize it, make it yours.