nyuchimzizi
Mzizi — an open-architecture project of the Bundu Foundation, operated and developed by Nyuchi. Built on the Five African Minerals palette.
Built by Nyuchi Africav4.0.39
Full chat page layout with sidebar conversations and main chat area.
No interactive demo is registered for this component yet — the source is shown directly.
"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
function ChatLayout({
className,
sidebar,
content,
...props
}: React.ComponentProps<"div"> & {
sidebar: React.ReactNode
content: React.ReactNode
}) {
return (
<div
data-slot="chat-layout" data-portal="https://design.nyuchi.com/components/chat-layout"
className={cn(
"flex h-full w-full overflow-hidden rounded-[var(--radius-lg,14px)] border border-border bg-card",
className
)}
{...props}
>
<div
data-slot="chat-layout-sidebar"
className="hidden w-80 shrink-0 flex-col border-r border-border md:flex"
>
{sidebar}
</div>
<div data-slot="chat-layout-content" className="flex min-w-0 flex-1 flex-col">
{content}
</div>
</div>
)
}
function ChatLayoutHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="chat-layout-header"
className={cn("flex items-center gap-3 border-b border-border px-4 py-3", className)}
{...props}
/>
)
}
function ChatLayoutMessages({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="chat-layout-messages"
className={cn("flex-1 overflow-y-auto px-4 py-4", className)}
{...props}
/>
)
}
function ChatLayoutInput({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="chat-layout-input"
className={cn("border-t border-border px-4 py-3", className)}
{...props}
/>
)
}
export { ChatLayout, ChatLayoutHeader, ChatLayoutMessages, ChatLayoutInput }
The variants, sizes, and props surfaced by the registry. Each is sourced from the Supabase component_docs table.
Hit the registry API live and see the JSON the shadcn CLI consumes when it installs this component.
/api/v1/ui/chat-layoutnpx shadcn@latest add https://mzizi.dev/api/v1/ui/chat-layoutcomponents/ui/chat-layout.tsx