Package Exports

visura-ui-react
visura-ui-react/index.ts

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (visura-ui-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Visura UI React

Librería de componentes React minimalista, modular y con soporte para variantes, temas y tipografía Montserrat.
Diseñada para integrarse fácilmente en proyectos con TailwindCSS y React 18+ o 19+.

🚀 Instalación

pnpm add visura-ui-react
npm install visura-ui-react
yarn add visura-ui-react

⚠️ Requisitos importantes

Antes de usar visura-ui-react, asegurate de tener lo siguiente en tu proyecto:

1. TailwindCSS instalado y configurado Esta librería está diseñada para funcionar con Tailwind. Si aún no lo tenés:

pnpm add tailwindcss @tailwindcss/vite
npm install tailwindcss @tailwindcss/vite
yarn add tailwindcss @tailwindcss/vite

Tipografía Montserrat (variable) La librería utiliza Montserrat Variable como fuente base. Se recomienda instalarla vía Fontsource:

pnpm add @fontsource-variable/montserrat
npm install @fontsource-variable/montserrat
yarn add @fontsource-variable/montserrat

Y luego incluirla en tu CSS global:

@import "@fontsource-variable/montserrat";

React y ReactDOM como peer dependencies Tu proyecto debe tener React 18 o 19 instalado:

🌗 Soporte para temas

Todos los componentes que lo requieren tienen soporte para modo claro y oscuro.

A algunos componentes tienes que pasarle como prop theme con el valor light o dark dependiendo del tema que quieras usar.

📦 Componentes incluidos

Button
ButtonGroup
Badge
Typography
Input
Modal
Card
Header
NavBar
NavLink
Menu
Dropdown
Tooltip

Cada componente incluye variantes visuales y semánticas listas para producción.

🧠 Uso básico

import { Button } from "visura-ui-react";

function App() {
  return <Button type="default">Botón</Button>;
}

🛠️ Personalización

Todos los componentes están diseñados para ser editables y adaptables. Podés extender estilos con Tailwind, pasar clases personalizadas o usar variantes predefinidas.

📜 Licencia

MIT — libre para usar, modificar y contribuir.