Components
Loading preview...
This RuixenMoonChat component is a visually minimalistic AI chat-style interface designed to sit just below the center of the screen against a full-screen moon-themed background image. The interface is inspired by the first empty-chat look of modern AI tools like ChatGPT, keeping the design lightweight, monochromatic (black, white, and neutral grays), and distraction-free. At the top center, there’s a bold white heading with a short tagline encouraging users to start typing. The main chat input box appears closer to the lower half of the screen and includes an auto-resizing textarea for smooth typing without manual resizing. A row of Quick Action buttons below the input provides ready-to-use prompts such as Generate Code, Launch App, UI Components, and more—ideal for developers exploring new ideas quickly. These buttons are styled as rounded, subtle pills with borders and icons from Lucide to keep the experience consistent and professional. The design avoids scroll bars and dark/light theme toggles, offering a clean black-and-white look that emphasizes the background image and central chat input. Overall, this component works well as a starting point for an AI-powered coding assistant or creative brainstorming tool.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/ruixen-moon-chat"use client";
import React from "react";
import RuixenMoonChat from "@/components/ui/ruixen-moon-chat"; // adjust path if needed
export default function DemoPage() {
return (
<main className="min-h-screen w-full bg-black text-white">
{/* Chat Component */}
<section className="flex justify-center items-start w-full">
<RuixenMoonChat />
</section>
{/* Footer */}
<footer className="text-center text-neutral-500 py-2 mt-10 border-t border-neutral-800 text-sm">
© {new Date().getFullYear()} Ruixen Demo Page
</footer>
</main>
);
}