component-library

Get Started

Installation

Install the package, load the styles with or without Tailwind, and import your first component.

  1. Install the package

    One package carries every component and its effects, all original code.

    npm install @poulo2/ai-components

  2. Load the styles with Tailwind v4

    Add both lines to your global stylesheet so Tailwind generates the classes the components use. If your app already defines the shadcn/ui tokens, skip the theme import to keep your own palette.

    @import "@poulo2/ai-components/theme.css";
@source "../node_modules/@poulo2/ai-components/dist";

  3. Or load the prebuilt stylesheet

    For apps without Tailwind. Import it once at the root; it includes Tailwind's base reset.

    import "@poulo2/ai-components/styles.css";

  4. Use a component

    Import from the package root, or from a category's entry point for bundlers that don't tree-shake the root: backgrounds, text, controls, navigation, media and feedback.

    import { WeatherSky } from "@poulo2/ai-components";
// or
import { WeatherSky } from "@poulo2/ai-components/backgrounds";

Good to know

  • React 19 is a peer dependency. Every component is a client component; the package carries "use client", so it can be imported from a Next.js server component file.
  • Dark mode follows a dark class on an ancestor, usually <html>. No theme library is needed.
  • Nothing depends on Next.js: links are plain anchors and images plain img elements, so the components work in Vite and other React apps.
  • Each component page also has its source in the Code tab, if you would rather copy it in.