@marcoorta.dev/react-theme
v1.4.0
Published
React 19 + Tailwind CSS v4 component library for data-dense dashboards and admin UI.
Maintainers
getlucodeReadme
@marcoorta.dev/react-theme
A React 19 + TypeScript component/theme package for data-dense, task-focused UI — dashboards, admin panels, ops tools. Cool neutral canvas, one committed coral-vermillion accent, tinted status, soft-shadow elevation. Full light and dark support.
Usage and props for every component are in
docs/components. Release history is in
CHANGELOG.md.
Installation
Published as @marcoorta.dev/react-theme.
npm install @marcoorta.dev/react-themeimport { Button } from '@marcoorta.dev/react-theme';
import { DataTable } from '@marcoorta.dev/react-theme/tables';
import { DateSelect } from '@marcoorta.dev/react-theme/date';
import '@marcoorta.dev/react-theme/style.css';react and react-dom (^19) are peer dependencies — install them in the
consuming app. The stylesheet import is required once, anywhere in your
app's entry point.
Stack
React 19, TypeScript, Tailwind CSS v4.
Components
All exported from src/index.ts.
- Button — primary / secondary / outline / ghost, sizes, loading, icon slot
- Input — label, hint, error, icon slot, pill variant
- Card —
Card,CardHeader,CardTitle,CardDescription,CardContent,CardFooter - Badge — neutral / success / warning / danger / accent / outline tones
- NavItem / NavGroup — sidebar navigation, nested tree, active/chip states
- SidebarMenu — collapsible app-shell sidebar with header / content / footer zones
- Tabs —
Tabs,TabsList,TabsTrigger,TabsContent - ThemeToggle — light/dark switch (pairs with the
useThemehook) - Avatar / AvatarGroup — initials fallback, overlapping stack with overflow
- ProgressBar / SegmentedProgressBar — single-value and multi-segment progress
- SegmentedControl — bordered pill button group (e.g. time-range pickers)
- BarChart — minimal bar chart with a highlightable bar
- EmojiRating — single-select emoji scale
Theming
Light/dark is driven by a data-theme="light" | "dark" attribute on
<html>, set by the useTheme() hook (persists to localStorage, respects
prefers-color-scheme on first load). All component color comes from CSS
custom properties in src/theme/tokens.css, mapped into Tailwind's
@theme block — components never hardcode a hex value.
import { useTheme, ThemeToggle } from './lib/theme';
function App() {
const { theme, toggleTheme } = useTheme();
return <ThemeToggle theme={theme} onChange={toggleTheme} />;
}