ui-radix-collection

v1.0.0

Published

21 days ago

Modern React UI component library built with Radix UI primitives and Tailwind CSS. Fully typed, accessible, and compatible with Next.js.

Downloads

0High
0Medium
0Low

emanuelg0895

react ui components nextjs radix-ui tailwindcss typescript accessible headless-ui component-library design-system recharts

UI Radix Collection

Modern React UI component library built with Radix UI primitives and Tailwind CSS. Fully typed, accessible, and compatible with Next.js 13+ and React 18+.

Installation

npm install ui-radix-collection

Requisitos Previos

Esta librería requiere que tu proyecto tenga configurado:

1. Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configura tailwind.config.js para incluir los componentes de la librería:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    // Importante: Incluir los componentes de la librería
    './node_modules/ui-radix-collection/**/*.{js,ts,jsx,tsx}',
  ],
  darkMode: 'class', // o 'media'
  theme: {
    extend: {},
  },
  plugins: [],
}

2. CSS Global

Agrega las directivas de Tailwind a tu archivo CSS global:

@tailwind base;
@tailwind components;
@tailwind utilities;

Uso en Next.js

Todos los componentes incluyen la directiva "use client" y son compatibles con Next.js 13+ (App Router).

// app/page.tsx
import { Button, AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent } from 'ui-radix-collection';

export default function Home() {
  return (
    <div>
      <Button variant="default">Click me</Button>
      
      <AccordionRoot type="single" collapsible>
        <AccordionItem value="item-1">
          <AccordionTrigger>¿Pregunta?</AccordionTrigger>
          <AccordionContent>Respuesta</AccordionContent>
        </AccordionItem>
      </AccordionRoot>
    </div>
  );
}

Componentes Disponibles

Button

import { Button } from 'ui-radix-collection';

<Button variant="default" size="default">Click me</Button>

Variantes: default, destructive, outline, secondary, ghost, link
Tamaños: default, sm, lg, icon

Accordion

import { 
  AccordionRoot, 
  AccordionItem, 
  AccordionTrigger, 
  AccordionContent 
} from 'ui-radix-collection';

<AccordionRoot type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Título</AccordionTrigger>
    <AccordionContent>Contenido</AccordionContent>
  </AccordionItem>
</AccordionRoot>

Popover

import { 
  PopoverRoot, 
  PopoverTrigger, 
  PopoverContent 
} from 'ui-radix-collection';

<PopoverRoot>
  <PopoverTrigger>Abrir</PopoverTrigger>
  <PopoverContent>Contenido del popover</PopoverContent>
</PopoverRoot>

Theme Toggle

import { ThemeToggle, useTheme } from 'ui-radix-collection';

// Componente listo para usar
<ThemeToggle />

// O usa el hook directamente
function MyComponent() {
  const { isDark, toggleTheme } = useTheme();
  return <button onClick={toggleTheme}>Toggle</button>;
}

Modo Oscuro

Para habilitar el modo oscuro, agrega la clase dark al elemento <html>:

// Next.js App Router: app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="es" className="dark"> {/* Agrega o quita 'dark' */}
      <body>{children}</body>
    </html>
  );
}

O usa el componente ThemeToggle incluido para cambiar entre modos dinámicamente.

Personalización

Todos los componentes aceptan la prop className para personalización adicional:

<Button className="my-custom-class">Custom Button</Button>

<AccordionRoot className="max-w-2xl mx-auto">
  {/* ... */}
</AccordionRoot>

TypeScript

La librería está completamente tipada con TypeScript. Los tipos se exportan automáticamente.

import type { ButtonProps } from 'ui-radix-collection';

Peer Dependencies

Esta librería requiere las siguientes dependencias en tu proyecto:

{
  "react": "^18.0.0 || ^19.0.0",
  "react-dom": "^18.0.0 || ^19.0.0"
}

Licencia

ISC

Soporte

Para reportar bugs o solicitar nuevas características, abre un issue en el repositorio.