component-library
IntroductionInstallationPrompt InputAgent ActivityMessageTodo ListMessage ScrollerImage Generation (new)Chat Alert (new)Chat Widget (new)Weather Sky (new)Aurora (new)Light Rays (new)Precipitation (new)Particles (new)Network Graph (new)ASCII Art (new)Progressive Blur (new)Vapor Text (new)Text Scramble (new)Scramble Link (new)Morph-in Text (new)Handwritten Quote (new)Hold Action Button (new)Metallic Link (new)Expanding Arrow Button (new)Motion Arrow Button (new)Theme Toggle (new)Color Selector (new)Floating Nav (new)Expandable Action Bar (new)Motion Search (new)Section Rail (new)Footer (new)Agent View (new)Cylinder Carousel (new)Infinite Masonry (new)Card (new)Pixel Reveal (new)Reveal Image (new)Inline Video (new)Project Showcase (new)Hover Accordion (new)Frame Rule (new)Consent Card (new)Following Avatar (new)
component-library
Search components/

Get Started

IntroductionInstallation

AI Agents8

Prompt InputAgent ActivityMessageTodo ListMessage ScrollerImage GenerationNewChat AlertNewChat WidgetNew

Backgrounds8

Weather SkyNewAuroraNewLight RaysNewPrecipitationNewParticlesNewNetwork GraphNewASCII ArtNewProgressive BlurNew

Text5

Vapor TextNewText ScrambleNewScramble LinkNewMorph-in TextNewHandwritten QuoteNew

Buttons & Controls6

Hold Action ButtonNewMetallic LinkNewExpanding Arrow ButtonNewMotion Arrow ButtonNewTheme ToggleNewColor SelectorNew

Navigation6

Floating NavNewExpandable Action BarNewMotion SearchNewSection RailNewFooterNewAgent ViewNew

Media & Cards9

Cylinder CarouselNewInfinite MasonryNewCardNewPixel RevealNewReveal ImageNewInline VideoNewProject ShowcaseNewHover AccordionNewFrame RuleNew

Feedback & Overlays2

Consent CardNewFollowing AvatarNew

“Design is not just what it looks like and feels like. Design is how it works”

“Design is not just what it looks like and feels like.
Design is how it works”

Steve Jobs
poulo

Menu

  • Home pageHome page
  • WorksWorks
  • About meAbout me
  • StackStack

Contact

  • EmailEmail
  • LinkedinLinkedin
  • GitHubGitHub

Designed and built by Poulo

poulo

NavigationAgent View

Agent View

A small button that shows the current page as an AI agent reads it: plain Markdown with the text, links and media descriptions, and the layout and animation stripped away. The Markdown can be copied.

Loading preview…

Install

Steps for Next.js.

  1. 1

    Install the package

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

    bun add @poulo2/ai-components
  2. 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. 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";

Props

NameTypeDefaultDescription
classNamestring—Classes for the root element.