@limpioluxsa/ui
v3.5.0
Published
Limpiolux shared UI component library — design system, styles, and React components
Maintainers
limpioluxsaReadme
@limpioluxsa/ui
Design system de Limpiolux — componentes React (shadcn + radix + cva) con estética
liquid glass como look por defecto. Light-first, system-first, brand #0a66ad.
🤖 Para agentes de código (Claude)
Empezá por llms.txt — es el índice de todos los componentes con sus
reglas de uso. Para el detalle de un componente (props, ejemplos, anti-patrones), leé su
metadata en src/components/ui/{Nombre}.meta.json (viajan dentro del paquete, en
node_modules/@limpioluxsa/ui/).
Reglas críticas: importar siempre desde @limpioluxsa/ui; nunca crear estilos Tailwind
ad-hoc si existe un componente; usar DatePicker (nunca <input type="date">),
DataTable para datos dinámicos, StatCard para KPIs. El chrome (Card, Dialog, Sheet,
Popover, DropdownMenu, AlertDialog, Tabs) es glass por defecto; variant="solid" es
el escape hatch. Envolvé las pantallas en AppShell para el fondo ambiental.
Instalación
npm install @limpioluxsa/ui
npm install react react-dom lucide-react tailwindcss # peers requeridas
npm install framer-motion # OPCIONAL (slider de SoftTabBar)Paquete público en npm — no requiere auth ni .npmrc para instalar.
Setup de Tailwind
tailwind.config:
import lxPreset from '@limpioluxsa/ui/tailwind/preset'
export default {
presets: [lxPreset],
content: [
'./src/**/*.{ts,tsx}',
'./node_modules/@limpioluxsa/ui/dist/**/*.{js,cjs}', // ← imprescindible: si falta, los componentes salen sin estilo
],
}Entry CSS:
@import '@limpioluxsa/ui/styles/base.css';
@tailwind base;
@tailwind components;
@tailwind utilities;Uso
import { AppShell, Card, CardContent, Button } from '@limpioluxsa/ui'
export default function App() {
return (
<AppShell> {/* fondo ambiental: el glass necesita esto para "leerse" */}
<Card> {/* glass por defecto */}
<CardContent>
<Button>Acción</Button>
</CardContent>
</Card>
</AppShell>
)
}Light-first por defecto. Para dark, poné .dark en el <html> (o usá el componente ThemeToggle).
Enganche para desarrollo asistido (CLAUDE.md de tu app)
Para que Claude use bien la lib desde el primer momento, pegá esto en el CLAUDE.md de la
app cliente (los agentes leen el CLAUDE.md del proyecto, no el de node_modules):
## UI: @limpioluxsa/ui
Esta app usa el design system @limpioluxsa/ui (liquid glass por defecto).
Antes de crear UI, leé `node_modules/@limpioluxsa/ui/llms.txt` (índice de componentes)
y la `*.meta.json` del componente que vayas a usar.
Reglas: importar desde '@limpioluxsa/ui'; envolver pantallas en <AppShell>; no crear
estilos ad-hoc si hay un componente; DatePicker (no input date), DataTable (datos), StatCard (KPIs).Catálogo visual navegable: npm --prefix docs run dev → /. Diseño y tokens: DESIGN.md.
Publicación y versionado: wiki/publishing.md.