Skip to main content
VibeStacks

Loading the search index…

Article

Functional and display components

Functional components answer "does it work?" (forms, dialogs, menus); display components answer "does it look good?" (3D, motion, visual style). You choose them in completely different ways.

Last reviewed

The most common waste when AI builds UI is having it write a dropdown or date picker from scratch. These look simple, but the hard parts are keyboard interaction, focus management, and screen reader support, and AI easily produces versions you can click but cannot really use.

So we split components into two kinds and treat them differently.

Functional components: use existing ones, do not write your own

Buttons, forms, dialogs, dropdown menus, tabs, tooltips. Their interaction patterns are long settled (WAI-ARIA), and the accessibility details are many and fiddly.

  • Top pick: shadcn/ui. It puts component source code straight into your repository, built on unstyled primitives with proven accessibility, styled with Tailwind. The AI can read and change it directly.
  • Rule for the AI: when you need an interactive component, add it with shadcn/ui instead of writing it by hand.

Display components: choose by expressiveness

3D scenes, scroll animations, page transitions, strongly branded visuals. They decide whether a site looks good, and they are also what most often slows a page down.

  • Motion for animation. Declarative enter, exit, layout, and gesture animations.
  • three.js for 3D. Use it in React through React Three Fiber.
  • Pick a visual style at the Style Museum. Choose one style, take its AI prompt or CSS variables home, and have the AI follow it consistently.

Two baselines

  1. Display components must respect the reduced-motion setting. Some people get dizzy from animation.
  2. Display components must never block function. If 3D or animation fails to load, the page still has to work.

Related

  • EntryTop pick

    shadcn/ui

    Not a component library but component source you copy into your repository. Accessibility comes from proven primitives; the look is yours to change with Tailwind.

  • EntryTop pick

    three.js

    The de facto standard for 3D on the web. In React, pair it with React Three Fiber and write scenes as components.

  • EntryTop pick

    Motion

    The most used animation library in React. Write enter, exit, layout, and gesture animations as declarative props.