UNPKG

@neynar/ui

Version:

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

115 lines (94 loc) 2.49 kB
# P **Type**: component P - Paragraph component for body text content Standard paragraph element for readable body text. Uses "body" variant with p semantic element. Optimized for readability with appropriate line height and font size. ## JSX Usage ```jsx import { P } from '@neynar/ui'; <P 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 */} </P> ``` ## 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 // Standard paragraph <P>This is standard body text that provides information to the user.</P> // With color variants <P color="muted">Secondary information with reduced visual prominence.</P> // With custom spacing <P className="mb-6">Paragraph with custom bottom margin for layout control.</P> // Truncated paragraph <P truncate className="max-w-md"> Long paragraph content that will be truncated with ellipsis </P> ```