=============== LIBRARY RULES =============== From library maintainers: - Import components from their dedicated paths: import { Button } from '@neynar/ui/button' - Import themes as CSS: import '@neynar/ui/themes/purple-dawn' - Base styles required: @import '@neynar/ui/styles' in your CSS file - Use ColorModeInitializer in for SSR-safe dark mode - All components have data-slot attributes for CSS targeting - Use the render prop (not asChild) for component polymorphism - Compound components export multiple parts from the same path - Use cn() utility from '@neynar/ui/utils' for class merging ### Quick Start: Basic App Structure with @neynar/ui Components Source: https://github.com/neynarxyz/ui/blob/main/.llm/index.llm.md Demonstrates how to set up a basic React application using components from the @neynar/ui library. It includes importing a button, card components, and applying a theme. This example assumes a standard React project setup. ```tsx import { Button } from "@neynar/ui/button"; import { Card, CardHeader, CardContent } from "@neynar/ui/card"; import "@neynar/ui/themes/purple-dawn"; export function App() { return ( Welcome ); } ``` -------------------------------- ### InputGroup Examples with Icon Addons Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/input-group.llm.md Provides three distinct examples of using InputGroup with icon addons. The first shows an icon at the start, the second an icon at the end, and the third demonstrates placing icons on both sides of the input field for enhanced user guidance or actions. ```tsx // Icon at start // Icon at end // Both sides ``` -------------------------------- ### Basic Sidebar Implementation Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/sidebar.llm.md An example of a basic sidebar setup using Neynar UI components. It includes a provider, sidebar structure, content area, and a trigger for collapsing/expanding. This snippet illustrates the fundamental layout of a sidebar. ```tsx import { SidebarProvider, Sidebar, SidebarContent, SidebarInset, SidebarTrigger } from "@neynar/ui/sidebar" import { HomeIcon } from "lucide-react" function App() { return ( Home

Dashboard

Content
 ) } ``` -------------------------------- ### Tailwind CSS v4 Setup for Next.js Source: https://github.com/neynarxyz/ui/blob/main/README.md Guide for configuring Tailwind CSS v4 within a Next.js project. This involves installing the required npm packages and setting up the postcss.config.js file. ```bash npm install tailwindcss @tailwindcss/postcss ``` ```javascript // postcss.config.js export default { plugins: { "@tailwindcss/postcss": {} } }; ``` -------------------------------- ### Basic Alert Example Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/alert.llm.md A simple example of how to use the Alert component with an icon, title, and description. This demonstrates the default styling and structure. ```tsx Heads up! You can add components to your app using the CLI. ``` -------------------------------- ### Alert with Primary Action Button Example Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/alert.llm.md An example demonstrating how to use the AlertAction component with a primary action button, such as a 'View Migration Guide' button. It includes an icon, title, description, and an action button. ```tsx API v1 Deprecation Notice The v1 API endpoints will be deprecated on March 31, 2025. Please migrate to v2 endpoints to avoid service disruption. ``` -------------------------------- ### Package.json Exports Map Example for @neynar/ui Source: https://github.com/neynarxyz/ui/blob/main/.llm/contributing.llm.md This JSON snippet illustrates the structure of the `package.json` exports map for the @neynar/ui package. It shows how individual components are exposed with their corresponding type definitions and JavaScript module paths, managed by a build script. ```json { "./button": { "types": "./dist/components/ui/button.d.ts", "import": "./dist/components/ui/button.js" } } ``` -------------------------------- ### LLM Documentation Template for @neynar/ui Source: https://github.com/neynarxyz/ui/blob/main/.llm/contributing.llm.md This Markdown template is used for generating documentation for components within the @neynar/ui package, intended for AI assistants. It includes sections for import statements, usage examples, and a table detailing component props. ```markdown # ComponentName One sentence description. ## Import ```tsx import { Component } from "@neynar/ui/component" ``` ## Usage ```tsx Content ``` ## Props | Prop | Type | Default | Description | |------|------|---------|-------------| | variant | "default" \| "secondary" | "default" | Visual style | ## Examples ### With variant ```tsx Secondary ``` ``` -------------------------------- ### Basic Tooltip Usage Example Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/tooltip.llm.md A practical example of a basic tooltip implementation. It uses a Button as the trigger and displays simple text content within the TooltipContent. ```tsx

This is a tooltip

 ``` -------------------------------- ### Install @neynar/ui and Tailwind CSS Source: https://context7.com/neynarxyz/ui/llms.txt Installs the @neynar/ui package and its required peer dependencies, tailwindcss and @tailwindcss/vite, using npm. ```bash # Install the package npm install @neynar/ui # Install required peer dependencies npm install tailwindcss @tailwindcss/vite ``` -------------------------------- ### Input with Helper Text Example Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/input.llm.md An example showing an Input component paired with helper text, providing additional guidance or information to the user. ```tsx

Choose a unique username

``` -------------------------------- ### Button Examples: Basic Variants Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/button.llm.md Provides examples of different visual button variants including default, outline, and destructive. These demonstrate the primary styling options available for the Button component. ```tsx ``` -------------------------------- ### HoverCard Example: Simple Text Preview Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/hover-card.llm.md A basic example demonstrating how to use HoverCard for a simple text preview. A link acts as the trigger, and hovering over it reveals a concise definition or explanation in the HoverCardContent. ```tsx

Learn more about{" "} typography

Typography is the art and science of arranging type to make written language clear, visually appealing, and effective.

{" "}in design.

``` -------------------------------- ### Basic Drawer Usage Example Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/drawer.llm.md A simple implementation of the Drawer component, showcasing a trigger button and basic content within the drawer. This example is suitable for straightforward use cases. ```tsx Drawer Title This is a description.

Your content here.

 ``` -------------------------------- ### Calendar with Dropdown Navigation Example Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/calendar.llm.md Demonstrates using dropdowns for month and year navigation. This example sets 'captionLayout' to 'dropdown' and specifies a year range for the dropdowns. ```tsx function CalendarWithDropdown() { const [date, setDate] = useState() return ( ) } ``` -------------------------------- ### Basic InputGroup Anatomy with Addons and Button Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/input-group.llm.md Demonstrates the fundamental structure of an InputGroup, featuring an addon with an icon at the start, an input field, and another addon containing a button at the end. This example showcases how to integrate interactive elements alongside standard input fields. ```tsx ``` -------------------------------- ### Neynar UI Package Installation Source: https://github.com/neynarxyz/ui/blob/main/README.md These commands show how to install the @neynar/ui package using different package managers: npm, pnpm, and yarn. This is the initial step to integrate the component library into a project. ```bash # npm npm install @neynar/ui # pnpm pnpm add @neynar/ui # yarn yarn add @neynar/ui ``` -------------------------------- ### Label Component with Basic Input Example Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/label.llm.md A practical example of using the Label component to label a text input field. It includes basic styling for spacing. ```tsx
``` -------------------------------- ### Basic Dialog Example (React/TypeScript) Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/dialog.llm.md A fundamental example of a Dialog component in use. It includes a trigger button, content with a header, description, and footer containing both a cancel and a confirm button. This showcases a common dialog pattern. ```tsx }>Open Dialog Dialog Title This is a description providing context about the dialog. }>Cancel ``` -------------------------------- ### Basic Sheet Usage Example - TypeScript/React Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/sheet.llm.md A practical example of implementing the Sheet component for displaying settings. It includes a SheetTrigger that opens a SheetContent with a header, title, description, and a placeholder for settings content. ```tsx }> Open Settings Settings Manage your account settings and preferences
{/* Settings content */}
``` -------------------------------- ### Basic Collapsible Usage Example (TypeScript) Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/collapsible.llm.md A simple example of a Collapsible component with default open state. It includes a trigger with styling and content that slides open. This demonstrates the core functionality for creating expandable sections. ```tsx Click to toggle
Hidden content that slides open
``` -------------------------------- ### Basic Avatar Usage Example Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/avatar.llm.md A simple example showcasing the basic usage of the Avatar component. It includes an AvatarImage with a source URL and alt text, and an AvatarFallback displaying initials. ```tsx DW ``` -------------------------------- ### Set up React Application Entry Point Source: https://context7.com/neynarxyz/ui/llms.txt Configures the main entry point for a React application using ReactDOM to render the root component. It imports necessary modules and the application's CSS. ```typescript // src/main.tsx - Application entry point import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; ReactDOM.createRoot(document.getElementById('root')!).render( ); ``` -------------------------------- ### Building a Keyboard Shortcuts Help Panel Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/kbd.llm.md Provides an example of creating a dynamic help panel that lists keyboard shortcuts and their descriptions using Kbd and KbdGroup components. This component is useful for providing users with quick reference to available shortcuts. ```tsx function ShortcutsHelp() { const shortcuts = [ { keys: K, description: "Open command palette" }, { keys: S, description: "Save changes" }, { keys: Esc, description: "Close dialog" } ] return (
{shortcuts.map((shortcut, idx) => (
{shortcut.description} {shortcut.keys}
))}
) } ``` -------------------------------- ### Data Slot Convention Example for @neynar/ui Source: https://github.com/neynarxyz/ui/blob/main/.llm/contributing.llm.md This example demonstrates the mandatory `data-slot` attribute convention for root elements of components in @neynar/ui. It shows its application in both single and compound component structures, crucial for internal tooling and styling. ```tsx // Single component ``` -------------------------------- ### Carousel with Loop Mode Enabled (TypeScript) Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/carousel.llm.md This example showcases how to enable infinite looping for the carousel. The `opts` prop is used to pass Embla carousel options, specifically setting `loop` to `true` and `align` to `start`. ```tsx {items.map((item, index) => ( {item.content} ))} ``` -------------------------------- ### Button Component Examples with Variants and Sizes Source: https://context7.com/neynarxyz/ui/llms.txt Demonstrates the usage of the @neynar/ui Button component, showcasing various predefined variants (default, outline, ghost, destructive, etc.) and size options (xs, sm, default, lg). Includes examples of icon buttons, buttons with inline icons, custom render elements, disabled states, and invalid states using ARIA attributes. ```typescript import { Button } from "@neynar/ui/button"; import { PlusIcon, SettingsIcon } from "lucide-react"; function ButtonExamples() { return (
{/* Basic variants */} {/* Sizes */} {/* Icon buttons */} {/* Button with inline icon */} {/* Custom element with button styles */} {/* Disabled state */} {/* Invalid state with aria-invalid */}
); } ``` -------------------------------- ### Story Template for @neynar/ui Components Source: https://github.com/neynarxyz/ui/blob/main/.llm/contributing.llm.md This template is used for creating Storybook stories for @neynar/ui components. It defines the metadata for the story, including the title, component, and tags, and provides examples for different states or variants of the component. ```tsx import type { Meta, StoryObj } from "@storybook/react" import { Component } from "../component" const meta: Meta = { title: "UI/Component", component: Component, tags: ["autodocs"], } export default meta type Story = StoryObj export const Default: Story = { args: { children: "Example" }, } export const Variants: Story = { render: () => (
Default Secondary
), } ``` -------------------------------- ### Basic Pagination Structure and Usage Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/pagination.llm.md Demonstrates the fundamental structure of the Pagination component, including the root container, content wrapper, and individual page items. This example shows how to create a simple pagination with previous, next, and a few page links. ```tsx 1 2 3 ``` -------------------------------- ### Tailwind CSS v4 Setup for Vite Source: https://github.com/neynarxyz/ui/blob/main/README.md Instructions for setting up Tailwind CSS v4 with Vite, a popular build tool for modern JavaScript projects. It involves installing the necessary packages and configuring the vite.config.ts file. ```bash npm install tailwindcss @tailwindcss/vite ``` ```typescript // vite.config.ts import tailwindcss from "@tailwindcss/vite"; export default defineConfig({ plugins: [react(), tailwindcss()] }); ``` -------------------------------- ### Designing a Common Shortcuts Grid Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/kbd.llm.md Demonstrates how to arrange common keyboard shortcuts in a grid layout using KbdGroup. This example shows shortcuts like Save, Copy, Paste, and Undo, making them easily scannable for users. ```tsx
Save S
Copy C
Paste V
Undo Z
``` -------------------------------- ### Basic Link Navigation Example Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/navigation-menu.llm.md Shows a simple implementation of the NavigationMenu with basic links for primary navigation. Each NavigationMenuItem contains a NavigationMenuLink to a specific page. ```tsx Home About Contact ``` -------------------------------- ### Basic Usage of Neynar UI Code Component (TSX) Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/code.llm.md Provides a basic example of using the Code component to display a command-line instruction, such as installing a package. This demonstrates the component's ability to render distinct code blocks. ```tsx npm install @neynar/ui ``` -------------------------------- ### First Light Theme Setup (TypeScript) Source: https://github.com/neynarxyz/ui/blob/main/.llm/theming.llm.md Shows how to set up the 'First Light' theme in a React application. It involves importing the theme styles and the `FirstLightFilters` component, which should be added once in the root layout to enable the wobbly SVG filter effect. ```tsx import "@neynar/ui/themes/first-light" import { FirstLightFilters } from "@neynar/ui/first-light" // Add once in your root layout export function Layout({ children }) { return ( <> {children} ) } ``` -------------------------------- ### Icon Sizing with CSS Utility (TypeScript/React) Source: https://github.com/neynarxyz/ui/blob/main/.llm/contributing.llm.md Shows how icons automatically size within a Button component using a CSS utility class targeting SVG elements that do not have an explicit size class. The example demonstrates an icon inheriting a default size. ```tsx // Icons auto-size via [&_svg:not([class*='size-'])]:size-4 ``` -------------------------------- ### Forwarding Refs (TypeScript/React) Source: https://github.com/neynarxyz/ui/blob/main/.llm/contributing.llm.md Explains that Base UI automatically handles ref forwarding, eliminating the need for explicit `forwardRef` wrappers in custom component implementations. The example shows a simple component that uses a primitive component and inherits ref forwarding. ```tsx // Base UI handles ref forwarding automatically // No need for forwardRef wrapper function Component(props: ComponentProps) { return } ``` -------------------------------- ### Command Palette with Custom Empty State Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/command.llm.md Demonstrates how to customize the empty state of the command palette. Instead of a simple text message, this example displays a more informative message with additional details and styling, guiding the user on what to do when no search results are found. ```tsx

No results found.

Try a different search term or check the docs.

Getting Started API Reference ``` -------------------------------- ### Sidebar with Header and Footer Example Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/sidebar.llm.md This example demonstrates how to implement a sidebar with a custom header and footer. The header includes a branding element and user information, while the footer typically contains user profile details. This showcases advanced layout options for the sidebar. ```tsx
Neynar Developer Portal
{/* Menu groups */} JD
John Developer john@example.com
``` -------------------------------- ### Tabs: Vertical Orientation Example (TypeScript/React) Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/tabs.llm.md Demonstrates how to configure the Tabs component for vertical orientation using the 'orientation' prop. This setup is useful for navigation layouts where tabs are positioned alongside content. It requires the Tabs, TabsList, TabsTrigger, and TabsContent components. ```tsx Profile Account Notifications Profile settings Account security Notification preferences ``` -------------------------------- ### Component Template for @neynar/ui Source: https://github.com/neynarxyz/ui/blob/main/.llm/contributing.llm.md This template provides a boilerplate for creating new UI components within the @neynar/ui package. It includes setup for variants using `class-variance-authority`, integrates with Base UI primitives, and handles class merging with `cn`. It enforces the `data-slot` convention and conditionally includes `"use client"`. ```tsx // Add "use client" ONLY if component uses hooks import { Primitive } from "@base-ui/react/primitive" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const componentVariants = cva("base-classes", { variants: { variant: { default: "...", secondary: "...", }, }, defaultVariants: { variant: "default", }, }) type ComponentProps = Primitive.Props & VariantProps /** * Brief description. * * @example * ```tsx * Content * ``` */ function Component({ className, variant, ...props }: ComponentProps) { return ( ) } export { Component, componentVariants, type ComponentProps } ``` -------------------------------- ### Basic Select Component Example Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/select.llm.md Demonstrates the fundamental usage of the Select component with a predefined default value. It includes a trigger and content with selectable items. ```tsx ``` -------------------------------- ### Basic Single Value Slider Example Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/slider.llm.md An example of a basic Slider used for controlling volume, demonstrating a single value selection. ```tsx function VolumeControl() { return (
) } ``` -------------------------------- ### HoverCard Example: User Profile Preview Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/hover-card.llm.md An example showcasing a HoverCard used to display a user's profile information. It includes an Avatar, user details, follow button, and follower/following counts, demonstrating a rich preview scenario. ```tsx
DR

Dan Romero

@dwr

Building Farcaster and Warpcast. Previously VP Eng at Coinbase.

124.5K{" "} followers
428{" "} following
``` -------------------------------- ### Basic Table Example with Data (TypeScript/React) Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/table.llm.md A practical example showcasing a functional table with headers, body rows, and a footer. It includes sample invoice data, status, and amounts, demonstrating how to populate the table cells. ```tsx Invoice Status Amount INV001 Paid $250.00 INV002 Pending $150.00 Total $400.00
``` -------------------------------- ### Date Input Example Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/input.llm.md An example of a date input field, providing a native date picker interface for selecting dates. ```tsx
``` -------------------------------- ### ColorModeToggle Examples Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/color-mode.llm.md Provides examples of using the ColorModeToggle component with different configurations. These examples showcase an icon-only toggle, a toggle with a visible label, a small ghost button variant, and its integration within a header component. The component allows users to switch between system, light, and dark modes. ```tsx // Icon-only (default) // With label // Small ghost button // In a header
``` -------------------------------- ### Next.js Color Mode Setup with @neynar/ui/color-mode Source: https://context7.com/neynarxyz/ui/llms.txt Integrates the ColorModeInitializer component into the root layout of a Next.js application. This component handles the initial setup of the color mode system, preventing flashes of unstyled content (FOUC) by applying the correct theme class before hydration. ```typescript import { ColorModeInitializer } from "@neynar/ui/color-mode"; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ); } ``` -------------------------------- ### Import Patterns for @neynar/ui Components Source: https://github.com/neynarxyz/ui/blob/main/.llm/index.llm.md Illustrates the recommended import pattern for individual components and utility functions from the @neynar/ui library. Each component has its own entry point, ensuring efficient bundle sizes. The `cn` utility is commonly used for conditional class name merging. ```tsx import { Button } from "@neynar/ui/button"; import { Dialog, DialogTrigger, DialogContent } from "@neynar/ui/dialog"; import { Input } from "@neynar/ui/input"; import { cn } from "@neynar/ui/utils"; ``` -------------------------------- ### Basic Text Input Example Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/input.llm.md A simple example of a text input field integrated with a Label component, commonly used for form elements. ```tsx
``` -------------------------------- ### Controlled Drawer State Example Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/drawer.llm.md Illustrates how to manage the open/close state of a Drawer component programmatically using the `open` and `onOpenChange` props. This is useful for scenarios where the drawer's visibility needs to be controlled by application logic. ```tsx function ControlledDrawer() { const [open, setOpen] = useState(false) return ( <> Controlled Drawer
) } ``` -------------------------------- ### Calendar with Custom Button Variant Example Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/calendar.llm.md Demonstrates customizing the appearance of navigation buttons using the 'buttonVariant' prop. This example sets the variant to 'outline'. ```tsx function StyledCalendar() { const [date, setDate] = useState() return ( ) } ``` -------------------------------- ### Calendar with Week Numbers Example Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/calendar.llm.md An example of enabling ISO week number display in the Calendar component. This is achieved by setting the 'showWeekNumber' prop to true. ```tsx function CalendarWithWeeks() { const [date, setDate] = useState() return ( ) } ``` -------------------------------- ### Basic Switch Usage Example Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/switch.llm.md Demonstrates the simplest way to use the Switch component, typically paired with a Label for accessibility. It requires importing both Switch and Label components. ```tsx import { Switch } from "@neynar/ui/switch" import { Label } from "@neynar/ui/label" function Example() { return (
) } ``` -------------------------------- ### Textarea with Validation Error Example Source: https://github.com/neynarxyz/ui/blob/main/.llm/components/textarea.llm.md An example demonstrating a Textarea with custom validation logic. It uses `aria-invalid` and displays an error message below the textarea if validation fails. ```tsx import { useState } from "react" import { Label } from "@neynar/ui/label" function FeedbackForm() { const [feedback, setFeedback] = useState("") const [error, setError] = useState("") const validate = () => { if (feedback.length < 10) { setError("Feedback must be at least 10 characters") } else { setError("") } } return (