@copiloto-dev/copiloto-ui-library
v0.1.54
Published
A UI library for Copiloto
Keywords
Readme
Copiloto UI Library
Copiloto UI Library: React components for Next.js.
Install
Peer deps are required in the consuming app:
npm i copiloto-ui-library
# peer deps (if not already installed in your app)
npm i -S react react-dom next @heroui/buttonUsage (Next.js)
// app/page.tsx or any client component
'use client';
import { Button } from 'copiloto-ui-library';
export default function Page() {
return (
<div>
<Button color="primary">Click me</Button>
</div>
);
}This package ships ESM and CJS with type definitions. The top-level export is a Client Component, so it can be used directly in Next.js App Router.
Setup in the consuming app (Tailwind + HeroUI)
To ensure classes used by this library (e.g., rounded-[8px], bg-turquoise) are generated and HeroUI tokens work, configure Tailwind and the HeroUI provider in your app:
- Tailwind config
// tailwind.config.ts
import { heroui } from '@heroui/theme';
import type { Config } from 'tailwindcss';
export default {
content: [
'./app/**/*.{js,ts,jsx,tsx,mdx}',
// add copiloto-ui-library
'./node_modules/@copiloto-dev/copiloto-ui-library/dist/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {
// add your tokens (e.g., colors like `turquoise`) to match classes used by the library
},
},
plugins: [heroui()],
} satisfies Config;- Provider in Next.js (App Router)
// app/providers.tsx
'use client';
import { HeroUIProvider } from '@heroui/system';
export function UIProviders({ children }: { children: React.ReactNode }) {
return <HeroUIProvider>{children}</HeroUIProvider>;
}
// app/layout.tsx
import { UIProviders } from './providers';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="es">
<body>
<UIProviders>{children}</UIProviders>
</body>
</html>
);
}- Importa Tailwind en tu CSS global
/* app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;Notas
- Si no quieres escanear node_modules, usa
safelisten Tailwind para las clases usadas (p.ej.,rounded-[8px],bg-turquoise,text-black-100). - Para colores personalizados como
bg-turquoise, defínelos entheme.extend.colorsde tu app para que existan.
Development
- Build:
npm run build - Watch:
npm run dev
Notes
- Styles use Tailwind-like utility classes (e.g.,
bg-turquoise). Ensure your consuming app has the matching Tailwind/theme setup. @heroui/buttonandnextare peer dependencies to avoid duplicates in the host app.