UNPKG

@neynar/ui

Version:

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

115 lines (94 loc) 2.42 kB
# Strong **Type**: component Strong - Emphasized text component for important content Semantic strong element for text that needs strong emphasis or importance. Uses "bodyEmphasized" variant with strong semantic meaning. ## JSX Usage ```jsx import { Strong } from '@neynar/ui'; <Strong 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 */} </Strong> ``` ## 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 // Important information <Strong>Important: This action cannot be undone.</Strong> // Critical warning <Strong color="destructive">Error: Invalid credentials provided.</Strong> // In body text <p> Make sure to <Strong>save your changes</Strong> before leaving the page. </p> // Success message <Strong color="success">Account created successfully!</Strong> ```