@authuser/ui
v0.1.0
Published
Zero-config Tailwind component library for React, Next.js, and React Native.
Maintainers
jscodexReadme
@authuser/ui
Libreria de componentes para construir interfaces consistentes en React, Next.js y React Native desde un mismo sistema de diseno.
@authuser/ui esta pensada como un modulo multifuncional: un solo paquete, dos entornos de uso, componentes tipados y estilos listos para consumir.
- Componentes web y Next.js desde
@authuser/ui - Componentes React Native desde
@authuser/ui/native - CSS compilado para web desde
@authuser/ui/styles.css - Estilos basados en Tailwind con variantes predecibles
- Soporte TypeScript incluido
- API nativa preparada para usar
classNamecon NativeWind
Instalacion
npm install @authuser/uiEl paquete usa React como peer dependency. En proyectos web necesitas React y React DOM. En proyectos nativos necesitas React Native y las dependencias nativas opcionales que usen los componentes que importes.
Uso en Web
Usa el entrypoint principal para React y Next.js:
import { Button } from '@authuser/ui';
import '@authuser/ui/styles.css';
export function Actions() {
return (
<div className='flex gap-2'>
<Button>Save changes</Button>
<Button variant='outline'>Cancel</Button>
</div>
);
}En Next.js, importa la hoja de estilos una sola vez en la entrada de la aplicacion:
// app/layout.tsx
import '@authuser/ui/styles.css';o:
// pages/_app.tsx
import '@authuser/ui/styles.css';Uso en React Native
Usa el entrypoint nativo para proyectos React Native y Expo:
import { Button } from '@authuser/ui/native';
export function Screen() {
return <Button>Continue</Button>;
}Los componentes nativos estan construidos sobre patrones de React Native y preparados para trabajar con className mediante NativeWind.
Por que Web y Native en el mismo paquete
El objetivo principal de @authuser/ui es mantener interfaces consistentes entre plataformas sin obligar a que web y movil compartan exactamente la misma implementacion interna.
Los componentes web pueden usar primitivas propias del navegador como Radix UI, CSS variables y estilos Tailwind compilados. Los componentes nativos usan primitivas de React Native y viven en un entrypoint separado. La API publica se mantiene familiar, pero cada plataforma recibe la implementacion que necesita.
// Web
import { Button } from '@authuser/ui';
// React Native
import { Button } from '@authuser/ui/native';Modulos disponibles
El entrypoint web exporta grupos de componentes para necesidades comunes de interfaz:
- Acciones y botones
- Formularios e inputs
- Primitivas de layout
- Navegacion
- Overlays y dialogos
- Feedback y estados
- Visualizacion de datos
- Media
- Tipografia
- Fechas
El entrypoint nativo incluye equivalentes para React Native dentro del conjunto movil soportado:
- Botones
- Formularios
- Feedback
- Visualizacion de datos
- Disclosure
- Navegacion
- Galeria y media layout
- Tipografia
Puedes ver el inventario completo en docs/components.md.
Estilos
Para web, importa la hoja de estilos compilada una sola vez:
import '@authuser/ui/styles.css';La hoja de estilos incluye los tokens base y los estilos necesarios para los componentes web. El paquete usa variables CSS con el prefijo --authuser-* para evitar colisiones con los estilos de tu aplicacion.
:root {
--authuser-primary: 222.2 47.4% 11.2%;
--authuser-primary-foreground: 210 40% 98%;
--authuser-radius: 0.5rem;
}Para modo oscuro, aplica la clase dark en tu aplicacion:
<html className='dark'>
<body>{children}</body>
</html>TypeScript
Los tipos estan incluidos en el paquete. No necesitas instalar un paquete @types adicional.
import { Button, type ButtonProps } from '@authuser/ui';
import {
Button as NativeButton,
type NativeButtonProps,
} from '@authuser/ui/native';Entrypoints del paquete
import { Button } from '@authuser/ui';
import { Button as NativeButton } from '@authuser/ui/native';
import '@authuser/ui/styles.css';Exports publicados:
@authuser/ui@authuser/ui/native@authuser/ui/styles.css
Development
npm install
npm run lint
npm run typecheck
npm run test
npm run buildEjecuta Storybook para los componentes web:
npm run storybookEl ejemplo de React Native vive en example/mobile..