🔶 The Orange Agenda 🔶

A complete React component library built with Radix UI primitives, styled with CSS Modules, and documented with Storybook.

[!NOTE] This project is still under active development. It is not recommended for production use yet.

✨ Features

• 🎨 31 Production-Ready Components - Complete Radix UI coverage including Button, Dialog, Tabs, Switch, Tooltip, Checkbox, Slider, RadioGroup, DropdownMenu, Select, Popover, Accordion, HoverCard, Toast, AlertDialog, AspectRatio, Avatar, Collapsible, ContextMenu, Label, Menubar, NavigationMenu, Progress, ScrollArea, Separator, Toggle, ToggleGroup, and Toolbar
• ♿ Fully Accessible - Built on Radix UI primitives following WAI-ARIA standards
• 🎯 TypeScript First - Complete type definitions for all components
• 💅 Customizable - CSS Modules with CSS variables for easy theming
• 📖 Interactive Documentation - Storybook with live examples
• 🚀 Production Ready - ESM + UMD builds with tree-shaking support
• 🍊 Orange Theme - Beautiful orange color scheme out of the box

🚀 Quick Start

To create a new SDC frontend project with The Orange Agenda, and every dependency pre-installed, run:

pnpm create @nycu-sdc/orange-agenda my-app

📦 Installation

You can install the library via pnpm:

pnpm add @nycu-sdc/orange-agenda

remember to also install peer dependencies:

pnpm add react react-dom

Or create a SDC frontend template project that includes the peer dependencies:

pnpm create @nycu-sdc/orange-agenda

🔥 Usage

Import Components

import { Button, Dialog, DialogTrigger, DialogContent } from "@nycu-sdc/orange-agenda";

function App() {
	return (
		<Dialog>
			<DialogTrigger asChild>
				<Button>Open Dialog</Button>
			</DialogTrigger>
			<DialogContent title="Welcome" description="This is The Orange Agenda">
				<p>Your content here</p>
			</DialogContent>
		</Dialog>
	);
}

Import Styles

import "@nycu-sdc/orange-agenda/styles";

🧩 Components

Button

import { Button } from '@nycu-sdc/orange-agenda';

<Button variant="default">Click me</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>

Dialog

import { Dialog, DialogTrigger, DialogContent } from "@nycu-sdc/orange-agenda";

<Dialog>
	<DialogTrigger asChild>
		<Button>Open</Button>
	</DialogTrigger>
	<DialogContent title="Title" description="Description">
		Content
	</DialogContent>
</Dialog>;

Tabs

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@nycu-sdc/orange-agenda";

<Tabs defaultValue="tab1">
	<TabsList>
		<TabsTrigger value="tab1">Tab 1</TabsTrigger>
		<TabsTrigger value="tab2">Tab 2</TabsTrigger>
	</TabsList>
	<TabsContent value="tab1">Content 1</TabsContent>
	<TabsContent value="tab2">Content 2</TabsContent>
</Tabs>;

Switch

import { Switch } from "@nycu-sdc/orange-agenda";

<Switch checked={true} onCheckedChange={checked => console.log(checked)} />;

Tooltip

import { Tooltip, TooltipProvider } from "@nycu-sdc/orange-agenda";

<TooltipProvider>
	<Tooltip content="Helpful text">
		<Button>Hover me</Button>
	</Tooltip>
</TooltipProvider>;

Checkbox

import { Checkbox } from "@nycu-sdc/orange-agenda";

<Checkbox checked={true} onCheckedChange={checked => console.log(checked)} />;

Slider

import { Slider } from "@nycu-sdc/orange-agenda";

<Slider defaultValue={[50]} min={0} max={100} step={1} />;

RadioGroup

import { RadioGroup, RadioGroupItem } from "@nycu-sdc/orange-agenda";

<RadioGroup defaultValue="option1">
	<RadioGroupItem value="option1" id="r1" />
	<RadioGroupItem value="option2" id="r2" />
</RadioGroup>;

DropdownMenu

import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@nycu-sdc/orange-agenda";

<DropdownMenu>
	<DropdownMenuTrigger asChild>
		<Button>Open</Button>
	</DropdownMenuTrigger>
	<DropdownMenuContent>
		<DropdownMenuItem>Item 1</DropdownMenuItem>
		<DropdownMenuItem>Item 2</DropdownMenuItem>
	</DropdownMenuContent>
</DropdownMenu>;

Select

import { Select, SelectItem } from "@nycu-sdc/orange-agenda";

<Select placeholder="Choose...">
	<SelectItem value="1">Option 1</SelectItem>
	<SelectItem value="2">Option 2</SelectItem>
</Select>;

Popover

import { Popover, PopoverTrigger, PopoverContent } from "@nycu-sdc/orange-agenda";

<Popover>
	<PopoverTrigger asChild>
		<Button>Open</Button>
	</PopoverTrigger>
	<PopoverContent>Content</PopoverContent>
</Popover>;

Accordion

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@nycu-sdc/orange-agenda";

<Accordion defaultValue="item-1">
	<AccordionItem value="item-1">
		<AccordionTrigger>Question?</AccordionTrigger>
		<AccordionContent>Answer!</AccordionContent>
	</AccordionItem>
</Accordion>;

HoverCard

import { HoverCard, HoverCardTrigger, HoverCardContent } from "@nycu-sdc/orange-agenda";

<HoverCard>
	<HoverCardTrigger>Hover me</HoverCardTrigger>
	<HoverCardContent>Additional info</HoverCardContent>
</HoverCard>;

Toast

import { Toast, ToastProvider, ToastViewport } from "@nycu-sdc/orange-agenda";

<ToastProvider>
	<Toast title="Success!" description="Operation completed" />
	<ToastViewport />
</ToastProvider>;

🎨 Theming

The library uses CSS variables for theming. Override them in your app:

:root {
	--color-orange: #your-color;
	--color-orange-dark: #your-dark-color;
	--color-orange-light: #your-light-color;
	/* ... more variables */
}

See src/styles/variables.css for all available variables.

🛠️ Development

Install Dependencies

pnpm install

Run Storybook

pnpm storybook

Opens at http://localhost:6006

Build Library

pnpm build

Lint & Format

pnpm lint
pnpm format

📁 Project Structure

nycu-sdc/orange-agenda/
├── src/
│   ├── components/      # All component implementations
│   ├── styles/          # Global styles and CSS variables
│   └── index.ts         # Main entry point
├── .storybook/          # Storybook configuration
├── dist/                # Built library (after build)
└── package.json

🤝 Contributing

Contributions are welcome! Please follow the existing code style and include tests for new features.

📄 License

Apache-2.0 © NYCU SDC

🙏 Credits

Built with:

• Radix UI - Unstyled, accessible components
• Vite - Next generation frontend tooling
• Storybook - UI component explorer
• TypeScript - Type-safe JavaScript

Made with 🦊 by NYCU SDC Team