Comment Composer

Test the Lexical-based comment composer with mentions and tags functionality

Back to Home
Comment Composer Examples

Test the Lexical-based comment composer with mention and tag functionality. Comments are saved to local storage.

Primary Composer (card)

Reply Composer (compact)

Inline Composer (inline)

Available Mentions & Tags

Reference guide for available mentions and tags you can use in the composer above.

Users (@ mentions)

@johnsmithjohn.smith@company.com
@sarahjohnsonsarah.johnson@company.com
@mikechenmike.chen@company.com
@emilydavisemily.davis@company.com
@alexrodriguezalex.rodriguez@company.com

Resources (# tags)

Questions
#question1.3.1#question2.1.4#question3.2.1
Rules
#rule3.1.3#rule2.4.1#rule1.2.5
Sections & Labels
#section2.4#front-label#nutrition-panel

Usage: Type @ to mention users or # to reference resources. The composer will show suggestions as you type, and you can navigate with arrow keys or click to select.

Install Fargo Comments

Add commenting functionality to your project using our ShadcnUI-compatible component registry.

Prerequisites

Ensure your project has ShadcnUI configured with proper aliases in components.json

# Initialize ShadcnUI (if not already done)
npx shadcn@latest init

Installation Commands

Core SystemRequired

Essential commenting system with contexts, hooks, types, and Lexical editor

npx shadcn@latest add https://comments.griffen.codes/api/registry/r/core
Open in
Comment List

Main comment listing component with search functionality

npx shadcn@latest add https://comments.griffen.codes/api/registry/r/comment-list
Open in
Comment Drawer

Sidebar/drawer component for centralized comment management

npx shadcn@latest add https://comments.griffen.codes/api/registry/r/drawer
Open in
Server Actions Adapter

Next.js Server Actions storage adapter with React cache integration

npx shadcn@latest add https://comments.griffen.codes/api/registry/r/adapter-server-actions
Open in

Learn More

Additional Storage Adapters
API Adapter

REST API integration for external services

npx shadcn@latest add https://comments.griffen.codes/api/registry/r/adapter-api
Open in
TanStack Query Adapter

React Query integration with caching and optimistic updates

npx shadcn@latest add https://comments.griffen.codes/api/registry/r/adapter-tanstack-query
Open in