UNPKG

@neynar/ui

Version:

React UI component library built on shadcn/ui and Tailwind CSS

119 lines (98 loc) 2.52 kB
# Lead **Type**: component Lead - Introductory paragraph component for article openings Lead paragraph for article introductions, page descriptions, and summary content. Uses "subheading" variant with muted color for visual hierarchy. ## JSX Usage ```jsx import { Lead } from '@neynar/ui'; <Lead color={value} align={value} transform={value} weight={value} htmlFor="value" asChild={true} italic={true} underline={true} strikethrough={true} truncate={true} srOnly={true} className="value" > {/* Your content here */} </Lead> ``` ## Component Props ### color - **Type**: `| "default" | "muted" | "accent" | "destructive" | "success" | "warning"` - **Required**: No - **Description**: No description available ### align - **Type**: `"left" | "center" | "right" | "justify"` - **Required**: No - **Description**: No description available ### transform - **Type**: `"uppercase" | "lowercase" | "capitalize"` - **Required**: No - **Description**: No description available ### weight - **Type**: `"normal" | "medium" | "semibold" | "bold"` - **Required**: No - **Description**: No description available ### htmlFor - **Type**: `string` - **Required**: No - **Description**: No description available ### asChild - **Type**: `boolean` - **Required**: No - **Description**: No description available ### italic - **Type**: `boolean` - **Required**: No - **Description**: No description available ### underline - **Type**: `boolean` - **Required**: No - **Description**: No description available ### strikethrough - **Type**: `boolean` - **Required**: No - **Description**: No description available ### truncate - **Type**: `boolean` - **Required**: No - **Description**: No description available ### srOnly - **Type**: `boolean` - **Required**: No - **Description**: No description available ### className - **Type**: `string` - **Required**: No - **Description**: No description available ### children - **Type**: `React.ReactNode` - **Required**: No - **Description**: No description available ## Examples ```tsx // Article introduction <Lead> This comprehensive guide covers everything you need to know about building modern web applications with React and TypeScript. </Lead> // Page description <Lead className="mb-8"> Discover powerful APIs and tools to build the next generation of social applications on Farcaster. </Lead> // With custom color <Lead color="default"> This lead paragraph uses the default text color for more prominence. </Lead> ```