Spaces:
Sleeping
Sleeping
File size: 2,704 Bytes
2398be6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
# 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:
```ts
// 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):
```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:
```powershell
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.
|