web_interface/components/ui/README.md

UI Components (shadcn-friendly)

This folder contains four UI components taken from 21st.dev templates and prepared for a shadcn/Tailwind/TypeScript Next.js project:

• animated-shader-hero.tsx — full-screen animated WebGL shader hero
• sidebar.tsx — responsive animated sidebar (framer-motion)
• ai-chat-input.tsx — animated AI chat input with placeholder cycling
• loader-10.tsx — gooey loader

Also provided: small demo pages demo-*.tsx showing usage.

Important notes before using

1. These files assume a standard shadcn structure (Next.js with components/ui folder). If your project doesn't use @/ path aliases, adjust imports accordingly.
2. The helper cn function is imported from @/lib/utils. If you don't have it, create a small utility:

// lib/utils.ts
export function cn(...args: Array<string | false | null | undefined>) {
  return args.filter(Boolean).join(' ');
}

Required NPM packages

• framer-motion
• lucide-react
• motion (for motion/react used in ai-chat-input) OR replace with framer-motion motion

Suggested install (run in your project root, PowerShell):

npm install framer-motion lucide-react
# If you want the motion/react API used above, install `motion` (but framer-motion can be used instead)
npm install motion

Tailwind / shadcn / TypeScript setup

1. If you do not have a project scaffolded, follow shadcn CLI to create the base UI system. From your project root:

npx shadcn@latest init
# or to add specific components:
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/animated-shader-hero
npx shadcn@latest add https://21st.dev/r/aceternity/sidebar
npx shadcn@latest add https://21st.dev/r/preetsuthar17/ai-chat-input
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/loader-10

2. Tailwind: if not present, install Tailwind CSS and configure with Next.js — follow the official Tailwind docs: https://tailwindcss.com/docs/guides/nextjs

3. TypeScript: npm install -D typescript @types/react @types/node and add tsconfig.json.

Default component path

• shadcn tends to use components/ui for reusable UI primitives. If your project places components elsewhere, create components/ui and keep these files there — it helps keep shadcn components discoverable and consistent with the rest of the ecosystem and the shadcn CLI.

Assets

• I used an Unsplash image URL in the sidebar demo. Replace with your preferred images.

Next steps I can do for you

1. Wire these components into your Next.js pages (index page with hero -> chat sidebar layout).
2. Replace motion/react usage with framer-motion for consistency.
3. Run a local dev build and fix any TypeScript errors.