@neynar/ui 0.1.1

package/docs/llm/components/utilities.md

@@ -0,0 +1,114 @@
+# Utilities
+
+Essential utility components, hooks, and functions for building responsive and accessible interfaces.
+
+## Components
+
+### ThemeToggle
+Theme switching component with light/dark mode support.
+
+```tsx
+import { ThemeToggle } from "@neynar/ui"
+
+export function Header() {
+  return (
+    <div className="flex items-center justify-between p-4">
+      <h1>My App</h1>
+      <ThemeToggle />
+    </div>
+  )
+}
+```
+
+### ScrollArea
+Custom scrollable container with styled scrollbars.
+
+```tsx
+import { ScrollArea } from "@neynar/ui"
+
+export function MessageList({ messages }) {
+  return (
+    <ScrollArea className="h-96 w-full border rounded-md p-4">
+      {messages.map((message) => (
+        <div key={message.id} className="mb-2">{message.text}</div>
+      ))}
+    </ScrollArea>
+  )
+}
+```
+
+### Resizable
+Resizable panels with drag handles.
+
+```tsx
+import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@neynar/ui"
+
+export function Layout() {
+  return (
+    <ResizablePanelGroup direction="horizontal">
+      <ResizablePanel defaultSize={25}>Sidebar</ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel defaultSize={75}>Main Content</ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
+```
+
+## Hooks
+
+### useTheme
+Theme management hook for dark/light mode.
+
+```tsx
+import { useTheme } from "@neynar/ui"
+
+export function CustomThemeToggle() {
+  const { theme, setTheme } = useTheme()
+  
+  return (
+    <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
+      Current: {theme}
+    </button>
+  )
+}
+```
+
+### useMobile
+Responsive design hook for mobile detection.
+
+```tsx
+import { useMobile } from "@neynar/ui"
+
+export function ResponsiveComponent() {
+  const isMobile = useMobile()
+  
+  return (
+    <div className={isMobile ? "grid-cols-1" : "grid-cols-3"}>
+      Content adapts to screen size
+    </div>
+  )
+}
+```
+
+## Utils
+
+### cn
+Class name utility for conditional styling.
+
+```tsx
+import { cn } from "@neynar/ui"
+
+export function Button({ variant, className, ...props }) {
+  return (
+    <button
+      className={cn(
+        "px-4 py-2 rounded",
+        variant === "primary" && "bg-blue-500 text-white",
+        variant === "secondary" && "bg-gray-200",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+```

package/docs/llm/guide.md

@@ -0,0 +1,165 @@
+# @neynar/ui Composition Guide
+
+Essential patterns for building interfaces with @neynar/ui components. Focus on practical composition techniques and TypeScript best practices.
+
+## Import Patterns
+
+```typescript
+// ✅ Correct - named imports with alias
+import { Button, Card, CardContent, CardHeader, CardTitle } from "@neynar/ui"
+import { useIsMobile, cn } from "@neynar/ui"
+
+// ❌ Avoid - relative imports or default exports
+import { Button } from "./ui/button"
+import Button from "@neynar/ui"
+```
+
+## Component Composition
+
+### Card-Based Layouts
+Cards are the primary container component. Always use sub-components for structure:
+
+```typescript
+import { Card, CardHeader, CardTitle, CardContent, CardFooter, Button } from "@neynar/ui"
+
+function UserProfile() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>User Settings</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p>Manage your account preferences</p>
+      </CardContent>
+      <CardFooter>
+        <Button>Save Changes</Button>
+      </CardFooter>
+    </Card>
+  )
+}
+```
+
+### Form Patterns
+Combine form components with consistent spacing:
+
+```typescript
+import { Label, Input, Button, Card, CardContent } from "@neynar/ui"
+
+function LoginForm() {
+  return (
+    <Card className="w-96">
+      <CardContent className="space-y-4 pt-6">
+        <div className="space-y-2">
+          <Label htmlFor="email">Email</Label>
+          <Input id="email" type="email" placeholder="Enter email" />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="password">Password</Label>
+          <Input id="password" type="password" />
+        </div>
+        <Button className="w-full">Sign In</Button>
+      </CardContent>
+    </Card>
+  )
+}
+```
+
+## Responsive Patterns
+
+Use `useIsMobile` for adaptive layouts:
+
+```typescript
+import { useIsMobile, Dialog, Sheet, Button } from "@neynar/ui"
+
+function ResponsiveModal({ children }) {
+  const isMobile = useIsMobile()
+  
+  const Wrapper = isMobile ? Sheet : Dialog
+  
+  return (
+    <Wrapper>
+      <Button>Open Modal</Button>
+      {children}
+    </Wrapper>
+  )
+}
+```
+
+## Data Display
+
+Combine table components for structured data:
+
+```typescript
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@neynar/ui"
+
+function UserTable({ users }) {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Name</TableHead>
+          <TableHead>Email</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {users.map(user => (
+          <TableRow key={user.id}>
+            <TableCell>{user.name}</TableCell>
+            <TableCell>{user.email}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  )
+}
+```
+
+## TypeScript Patterns
+
+Always use function declarations and type definitions:
+
+```typescript
+import { Button, type ButtonProps } from "@neynar/ui"
+
+// ✅ Function declaration with types
+function CustomButton({ variant = "default", ...props }: ButtonProps) {
+  return <Button variant={variant} {...props} />
+}
+
+// ❌ Avoid const/arrow functions for components
+const CustomButton = ({ variant = "default", ...props }: ButtonProps) => {
+  return <Button variant={variant} {...props} />
+}
+```
+
+## Utility Usage
+
+Use `cn()` for conditional styling:
+
+```typescript
+import { Button, cn } from "@neynar/ui"
+
+function StatusButton({ isActive, children }) {
+  return (
+    <Button 
+      className={cn(
+        "transition-colors",
+        isActive && "bg-green-500 hover:bg-green-600"
+      )}
+    >
+      {children}
+    </Button>
+  )
+}
+```
+
+## Common Patterns Summary
+
+1. **Always use named imports** from `@neynar/ui`
+2. **Function declarations** for all components
+3. **Type definitions** instead of interfaces
+4. **Composition over configuration** - combine simple components
+5. **Use `useIsMobile`** for responsive behavior
+6. **Leverage `cn()`** for conditional classes
+7. **Structure with Cards** for most layouts
+8. **Consistent spacing** with Tailwind classes like `space-y-4`

package/llms.txt

@@ -0,0 +1,122 @@
+# @neynar/ui Component Library
+
+A production-ready React component library with 52 components, 2 hooks, and 1 utility. All components use modern TypeScript patterns with function declarations and named exports.
+
+## Quick Reference
+
+```typescript
+import { Button, Card, useIsMobile, cn } from "@neynar/ui"
+import "@neynar/ui/styles"
+```
+
+## Components (52)
+
+### Layout Components → [docs/llm/components/layout.md](docs/llm/components/layout.md)
+- **Container** - Responsive container with max-width constraints
+- **Stack** - Flexible vertical and horizontal layout primitive  
+- **Separator** - Visual content dividers
+- **AspectRatio** - Responsive aspect ratio containers
+- **ResizablePanelGroup**, **ResizablePanel**, **ResizableHandle** - Interactive resizable layouts
+- **ScrollArea**, **ScrollBar** - Custom scrollable areas
+- **Accordion**, **AccordionItem**, **AccordionTrigger**, **AccordionContent** - Collapsible sections
+- **Collapsible**, **CollapsibleTrigger**, **CollapsibleContent** - Simple show/hide content
+
+### Navigation Components → [docs/llm/components/navigation.md](docs/llm/components/navigation.md)
+- **NavigationMenu** + 8 sub-components - Complex navigation menus
+- **Breadcrumb** + 6 sub-components - Hierarchical navigation  
+- **Pagination** + 6 sub-components - Data pagination
+- **Menubar** + 14 sub-components - Desktop-style menu bars
+- **Sidebar** + 20 sub-components - Application sidebars
+- **Tabs**, **TabsList**, **TabsTrigger**, **TabsContent** - Tabbed interfaces
+
+### Form Components → [docs/llm/components/forms.md](docs/llm/components/forms.md)
+- **Input** - Text input fields with validation states
+- **Textarea** - Multi-line text input with auto-resize
+- **TextField** - Complete form field with label and validation
+- **Label** - Accessible form labels
+- **Checkbox** - Boolean input with indeterminate state
+- **RadioGroup**, **RadioGroupItem** - Single-choice selection
+- **Switch** - Toggle switch for boolean settings
+- **Slider** - Range input for numeric values
+- **DatePicker** - Calendar-based date selection
+- **Combobox** - Searchable dropdown with custom options
+- **Select** + 9 sub-components - Dropdown selection
+
+### Button Components → [docs/llm/components/buttons.md](docs/llm/components/buttons.md)
+- **Button** - Primary action component with variants and sizes
+- **Toggle**, **ToggleGroup**, **ToggleGroupItem** - Multi-state buttons
+
+### Card Components → [docs/llm/components/cards.md](docs/llm/components/cards.md)
+- **Card** + 5 sub-components - Content containers
+
+### Display Components → [docs/llm/components/display.md](docs/llm/components/display.md)
+- **Badge** - Status and category indicators
+- **Avatar** + 2 sub-components - User profile pictures
+- **Progress** - Loading and completion indicators
+- **Skeleton** - Loading state placeholders
+- **Chart** + 5 sub-components - Data visualization
+- **EmptyState** - No data placeholder with actions
+
+### Table Components → [docs/llm/components/tables.md](docs/llm/components/tables.md)
+- **Table** + 7 sub-components - Data tables
+
+### Overlay Components → [docs/llm/components/overlays.md](docs/llm/components/overlays.md)
+- **Dialog** + 7 sub-components - Modal dialogs
+- **AlertDialog** + 8 sub-components - Confirmation dialogs
+- **Sheet** + 6 sub-components - Side panel overlays
+- **Drawer** + 6 sub-components - Mobile-first bottom sheets
+- **Popover** + 3 sub-components - Contextual overlays
+- **HoverCard** + 2 sub-components - Hover-triggered content
+- **Tooltip** + 3 sub-components - Informational overlays
+
+### Menu Components → [docs/llm/components/menus.md](docs/llm/components/menus.md)
+- **DropdownMenu** + 15 sub-components - Context menus
+- **ContextMenu** + 15 sub-components - Right-click menus
+- **Command** + 8 sub-components - Command palette interfaces
+- **Calendar** + 1 sub-component - Full calendar interface
+- **Carousel** + 4 sub-components - Content slideshows
+
+### Feedback Components → [docs/llm/components/feedback.md](docs/llm/components/feedback.md)
+- **Alert** + 2 sub-components - Status messages and notifications
+- **Toaster**, **toast** - Toast notification system (Sonner-based)
+- **ThemeToggle** - Dark/light mode switcher
+
+### Typography Components → [docs/llm/components/typography.md](docs/llm/components/typography.md)
+- Text styling and typography components
+
+## Utilities & Hooks → [docs/llm/components/utilities.md](docs/llm/components/utilities.md)
+- **cn()** - Class name merging with Tailwind conflict resolution
+- **useIsMobile()** - Responsive breakpoint detection (768px)
+- **useTheme()** - Theme state management with system preference detection
+
+## TypeScript Standards
+
+All components follow these patterns:
+- Function declarations (not const/arrow functions)
+- Named exports only
+- Type definitions (not interfaces)
+- Comprehensive prop types
+- Full IntelliSense support
+
+```typescript
+// ✅ Correct patterns
+import { Button, type ButtonProps } from "@neynar/ui"
+
+function MyButton(props: ButtonProps) {
+  return <Button {...props} />
+}
+```
+
+## Additional Documentation
+
+- **[docs/llm/guide.md](docs/llm/guide.md)** - Core composition patterns and usage examples
+- **[docs/llm/colors.md](docs/llm/colors.md)** - Tailwind CSS color system and design tokens
+
+## Source Code Access
+- **src/** - Complete TypeScript source with TSDoc comments, type definitions, and implementation details
+
+## Key Features
+- Built on Radix UI primitives + Tailwind CSS v4
+- WCAG-compliant accessibility
+- Tree-shakeable and performant
+- Zero runtime overhead

package/package.json

@@ -0,0 +1,104 @@
+{
+  "name": "@neynar/ui",
+  "version": "0.1.1",
+  "license": "MIT",
+  "author": "Neynar Inc.",
+  "description": "React UI component library built on shadcn/ui and Tailwind CSS",
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "tailwind",
+    "shadcn",
+    "neynar"
+  ],
+  "public": true,
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": "./src/styles/globals.css"
+  },
+  "files": [
+    "dist/**",
+    "src/**",
+    "LICENSE",
+    "README.md",
+    "llms.txt",
+    "docs/llm/**"
+  ],
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "dev": "vite build --watch",
+    "lint": "eslint src/",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "storybook": "storybook dev --no-open -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "1.2.11",
+    "@radix-ui/react-aspect-ratio": "1.1.7",
+    "@radix-ui/react-avatar": "1.1.10",
+    "@radix-ui/react-checkbox": "1.3.2",
+    "@radix-ui/react-collapsible": "1.1.11",
+    "@radix-ui/react-context-menu": "2.2.15",
+    "@radix-ui/react-dialog": "1.1.14",
+    "@radix-ui/react-dropdown-menu": "2.1.15",
+    "@radix-ui/react-hover-card": "1.1.14",
+    "@radix-ui/react-label": "2.1.7",
+    "@radix-ui/react-menubar": "1.1.15",
+    "@radix-ui/react-navigation-menu": "1.2.13",
+    "@radix-ui/react-popover": "1.1.14",
+    "@radix-ui/react-progress": "1.1.7",
+    "@radix-ui/react-radio-group": "1.3.7",
+    "@radix-ui/react-select": "2.2.5",
+    "@radix-ui/react-separator": "1.1.7",
+    "@radix-ui/react-slider": "1.3.5",
+    "@radix-ui/react-slot": "1.2.3",
+    "@radix-ui/react-switch": "1.2.5",
+    "@radix-ui/react-tabs": "1.1.12",
+    "@radix-ui/react-toggle": "1.1.9",
+    "@radix-ui/react-toggle-group": "1.1.10",
+    "@radix-ui/react-tooltip": "1.2.7",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "cmdk": "1.1.1",
+    "date-fns": "4.1.0",
+    "embla-carousel-react": "8.6.0",
+    "lucide-react": "0.539.0",
+    "react-day-picker": "9.8.1",
+    "react-resizable-panels": "3.0.4",
+    "recharts": "2.15.4",
+    "sonner": "2.0.7",
+    "tailwind-merge": "3.3.1",
+    "tw-animate-css": "1.3.6",
+    "vaul": "1.1.2"
+  },
+  "devDependencies": {
+    "@neynar/eslint-plugin": "0.0.3",
+    "@neynar/tsconfig": "0.0.2",
+    "@storybook/addon-docs": "9.1.2",
+    "@storybook/addon-themes": "9.1.2",
+    "@storybook/react-vite": "9.1.2",
+    "@tailwindcss/vite": "4.1.11",
+    "@types/react": "19.1.10",
+    "@types/react-dom": "19.1.7",
+    "eslint": "9.33.0",
+    "eslint-plugin-storybook": "9.1.2",
+    "postcss": "8.5.6",
+    "prettier": "3.6.2",
+    "react": "19.1.1",
+    "react-dom": "19.1.1",
+    "storybook": "9.1.2",
+    "tailwindcss": "4.1.11",
+    "typescript": "5.9.2",
+    "vite": "7.1.2"
+  },
+  "peerDependencies": {
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
+  }
+}