@catti/ui
v0.1.0
Published
Neomorphism style react component library with a multi-theme system (Dawn, Dusk, Void) and reusable UI primitives
Maintainers
boycececilReadme
@catti/ui
Glass morphism React component library with three built-in themes and a fully token-based CSS system.
Install
npm install @catti/uiRequires React 18+.
Quick Start
import { ThemeProvider, Button, Card, CardIcon } from '@catti/ui';
import '@catti/ui/tokens.css';
import '@catti/ui/theme.css';
import '@catti/ui/styles.css';
export default function App() {
return (
<ThemeProvider>
<Card>
<CardIcon icon="smart_toy" color="primary" />
<h3>Hello CATTI</h3>
</Card>
<Button variant="primary-lg" icon="rocket_launch">
Launch
</Button>
</ThemeProvider>
);
}Themes
ThemeProvider manages three themes that switch via CSS class on <html>:
| Theme | Class on <html> | Description |
|-------|-------------------|-------------|
| Dawn | theme-dawn | Light glass morphism |
| Dusk | theme-dusk + dark | Dark glass morphism |
| Void | theme-void + neumorphic | Soft neumorphic |
const { theme, setTheme } = useTheme();
setTheme('dusk');Widgets
Buttons
<Button variant="toolbar" icon="settings">Settings</Button>
<Button variant="icon-circle" icon="add" />
<Button variant="chip-active">Active</Button>20 variants: icon, icon-primary, icon-circle, icon-menu, toolbar, toolbar-primary, action, chip, chip-active, card, card-primary, store-card, pull, pull-cancel, pull-cancel-plain, master, clinic, primary-lg, ghost, pagination, model-delete
Cards
<Card variant="store">
<CardIcon icon="bolt" color="secondary" />
</Card>6 variants: model, store, master, health, memory, library
Charts
<GaugeChart value={75} size={160} color="var(--primary)">
<span style={{ fontSize: 28, fontWeight: 900 }}>75%</span>
</GaugeChart>
<ProgressBar value={42} color="var(--primary)" />
<BarChart heights={[60, 45, 80, 95]} />Status
<StatusBadge status="running" />
<StatusPanel status="running" label="Server Running" detail="localhost:11434" badge={4} />Data
<Pagination currentPage={2} totalPages={5} onPrev={...} onNext={...} />
<PullProgress
modelName="llama3.2"
progress={0.65}
status="Downloading..."
downloaded={3_200_000_000}
total={5_000_000_000}
speed="12.4 MB/s"
onCancel={handleCancel}
/>
<FilterChips filters={['All', 'Productivity', 'Creative']} activeFilter="Productivity" onChange={...} />Navigation
<TabGroup
tabs={[{ id: 'tab1', label: 'Installed', icon: 'download_done', badge: 4 }]}
activeTab={activeTab}
onChange={setActiveTab}
variant="tabs"
/>
<SearchInput value={q} onChange={setQ} placeholder="Search models..." />CSS Architecture
The library ships three CSS files that should be imported in order:
@catti/ui/tokens.css— Design tokens (CSS custom properties)@catti/ui/theme.css— Theme-specific overrides (dark, neumorphic)@catti/ui/styles.css— Base styles, components, layout
Key tokens
:root {
--primary: #005bc2;
--secondary: #842cd3;
--glass-blur: 40px;
--glass-bg: rgba(255, 255, 255, 0.16);
--glass-border: rgba(255, 255, 255, 0.62);
--font-family: 'Inter', sans-serif;
}Peer Dependencies
{
"peerDependencies": {
"react": ">=18.0.0",
"react-dom": ">=18.0.0"
}
}Build
npm run build # TypeScript → dist/ + CSS extraction