Components

The components/ directory gathers reusable UI building blocks ranging from simple buttons to fully-fledged charts and chat widgets. They are written in TypeScript, follow the Radix UI accessibility guidelines and ship with zero client-side CSS by default thanks to Tailwind CSS.

Below is a curated list of the most frequently used components. For the full source open the corresponding file in your editor.

Name	Path	Purpose
Button	`components/ui/button.tsx`	Base button with variants (`primary`, `ghost`, …)
Card	`components/ui/card.tsx`	Wrapper with shadow, border & padding
Accordion	`components/ui/accordion.tsx`	Collapse / expand sections
Chart	`components/charts/*`	Thin wrappers around visx & D3
Chat Widget	`components/chat/chat-widget.tsx`	Streaming AI chat with tool calls
Solar Panel Scene	`components/solar-panel/scene.tsx`	3D canvas demo powered by Three.js

Usage example

app/example/page.tsx


import { Button } from '@/components/ui/button'
 
export default function Example() {
  return (
    <Button variant="primary" onClick={() => alert('Hello!')}>
      Click me
    </Button>
  )
}

Customising

Every component exposes a Tailwind className prop so you can extend or override styles inline:


<Card className="bg-sky-50 dark:bg-sky-900" />

If you need a brand-new component follow this checklist:

Create the file inside components/ (or a sub-folder).
Write it in TypeScript – insist on explicit props.
Add a Storybook story (if present) or screenshot to help reviewers.

Happy building! 🔨