Blife UI

Antes de continuar, asegúrate de usar:

Next.js 14 o posterior
React 18 o posterior
Tailwind CSS 3 o posterior

Configurar el .npmrc

Para poder instalar los paquetes necesitas configurar tu archivo .npmrc con el token de acceso. Crea el archivo en la raiz de tu proyecto y añade el siguiente contenido:

.npmrc

@blifedesarrollo:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken={TOKEN}

Instalar paquete


npm i @blifedesarrollo/blife-ui

Configurar Tailwind v4

Añade a tu archivo de estilos globales la configuracion del preset, los archivos origen del tema y componentes de BlifeUI para la deteccion automatica del contenido.

globals.css

@import "tailwindcss";
@import "../../node_modules/@blifedesarrollo/blife-ui/dist/theme.css";
@source "../../node_modules/@blifedesarrollo/blife-ui/dist";

Configurar Tailwind v3

Añade el siguiente código a tu archivo tailwind.config.{js,mjs}:

tailwind.config.mjs

import blifePreset from "@blifedesarrollo/blife-theme/preset";
 
/** @type {import('tailwindcss').Config} */
export default {
  presets: [blifePreset],
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@blifedesarrollo/blife-ui/dist/*.js",
    "./node_modules/@blifedesarrollo/blife-theme/dist/*.js",
  ],
  theme: {
    extend: {},
  },
};

Si en tu tailwind.config usas CommonModules como sistema de modulos, añade el siguiente codigo.

tailwind.config.js

const blifePreset = require("@blifedesarrollo/blife-theme/preset");
 
/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [blifePreset.default],
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@blifedesarrollo/blife-ui/dist/*.js",
    "./node_modules/@blifedesarrollo/blife-theme/dist/*.js",
  ],
};

Next.js

Configurar el .npmrc

Instalar paquete

Configurar Tailwind v4

Configurar Tailwind v3