diff --git a/CONTEXT.md b/CONTEXT.md index a6af7fd..91aa6a0 100644 --- a/CONTEXT.md +++ b/CONTEXT.md @@ -21,6 +21,60 @@ This project is a Nostr client application built with React 19.x, TailwindCSS 3. - `/src/lib/`: Utility functions and shared logic - `/public/`: Static assets +## UI Components + +The project uses shadcn/ui components located in `@/components/ui`. These are unstyled, accessible components built with Radix UI and styled with Tailwind CSS. Available components include: + +- **Accordion**: Vertically collapsing content panels +- **Alert**: Displays important messages to users +- **AlertDialog**: Modal dialog for critical actions requiring confirmation +- **AspectRatio**: Maintains consistent width-to-height ratio +- **Avatar**: User profile pictures with fallback support +- **Badge**: Small status descriptors for UI elements +- **Breadcrumb**: Navigation aid showing current location in hierarchy +- **Button**: Customizable button with multiple variants and sizes +- **Calendar**: Date picker component +- **Card**: Container with header, content, and footer sections +- **Carousel**: Slideshow for cycling through elements +- **Chart**: Data visualization component +- **Checkbox**: Selectable input element +- **Collapsible**: Toggle for showing/hiding content +- **Command**: Command palette for keyboard-first interfaces +- **ContextMenu**: Right-click menu component +- **Dialog**: Modal window overlay +- **Drawer**: Side-sliding panel +- **DropdownMenu**: Menu that appears from a trigger element +- **Form**: Form validation and submission handling +- **HoverCard**: Card that appears when hovering over an element +- **InputOTP**: One-time password input field +- **Input**: Text input field +- **Label**: Accessible form labels +- **Menubar**: Horizontal menu with dropdowns +- **NavigationMenu**: Accessible navigation component +- **Pagination**: Controls for navigating between pages +- **Popover**: Floating content triggered by a button +- **Progress**: Progress indicator +- **RadioGroup**: Group of radio inputs +- **Resizable**: Resizable panels and interfaces +- **ScrollArea**: Scrollable container with custom scrollbars +- **Select**: Dropdown selection component +- **Separator**: Visual divider between content +- **Sheet**: Side-anchored dialog component +- **Sidebar**: Navigation sidebar component +- **Skeleton**: Loading placeholder +- **Slider**: Input for selecting a value from a range +- **Sonner**: Toast notification manager +- **Switch**: Toggle switch control +- **Table**: Data table with headers and rows +- **Tabs**: Tabbed interface component +- **Textarea**: Multi-line text input +- **Toast**: Toast notification component +- **ToggleGroup**: Group of toggle buttons +- **Toggle**: Two-state button +- **Tooltip**: Informational text that appears on hover + +These components follow a consistent pattern using React's `forwardRef` and use the `cn()` utility for class name merging. Many are built on Radix UI primitives for accessibility and customized with Tailwind CSS. + ## Nostr Protocol Integration This project comes with custom hooks for querying and publishing events on the Nostr network.