tessl/npm-nextui-org--react

Beautiful and modern React UI library with comprehensive components, theming, and accessibility support.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Interactive Components

Name: tessl/npm-nextui-org--react
Author: tessl

Interactive components provide user interface elements for actions, selections, and user interactions with consistent styling and accessibility support.

Capabilities

Button

Primary action component for triggering operations, form submissions, and navigation with support for different variants, sizes, and loading states.

/**
 * Button component props extending HTML button attributes
 */
interface ButtonProps {
  /** Button content */
  children?: React.ReactNode;
  /** Button visual variant */
  variant?: "solid" | "bordered" | "light" | "flat" | "faded" | "shadow" | "ghost";
  /** Button size */
  size?: "sm" | "md" | "lg";
  /** Button color theme */
  color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
  /** Border radius */
  radius?: "none" | "sm" | "md" | "lg" | "full";
  /** Whether button takes full width */
  fullWidth?: boolean;
  /** Whether button is disabled */
  isDisabled?: boolean;
  /** Whether button shows loading state */
  isLoading?: boolean;
  /** Whether button is icon-only (for spacing adjustments) */
  isIconOnly?: boolean;
  /** Content displayed at start of button */
  startContent?: React.ReactNode;
  /** Content displayed at end of button */
  endContent?: React.ReactNode;
  /** Custom spinner element for loading state */
  spinner?: React.ReactNode;
  /** Placement of spinner when loading */
  spinnerPlacement?: "start" | "end";
  /** Whether to disable ripple effect */
  disableRipple?: boolean;
  /** Whether to disable animations */
  disableAnimation?: boolean;
  /** Custom CSS classes */
  className?: string;
  /** Custom CSS classes for different component slots */
  classNames?: SlotsToClasses<ButtonSlots>;
  /** Press event handler (preferred over onClick) */
  onPress?: (e: PressEvent) => void;
  /** Press start event handler */
  onPressStart?: (e: PressEvent) => void;
  /** Press end event handler */
  onPressEnd?: (e: PressEvent) => void;
  /** Press change event handler */
  onPressChange?: (isPressed: boolean) => void;
  /** Press up event handler */
  onPressUp?: (e: PressEvent) => void;
}

function Button(props: ButtonProps): JSX.Element;

type ButtonSlots = "base";

Usage Examples:

import { Button } from "@nextui-org/react";

// Basic button
<Button color="primary">
  Click me
</Button>

// Button with loading state
<Button isLoading color="secondary">
  Loading...
</Button>

// Button with start/end content
<Button 
  startContent={<IconUser />}
  endContent={<IconArrow />}
  variant="bordered"
>
  Profile
</Button>

// Icon-only button
<Button isIconOnly variant="light" aria-label="Settings">
  <IconSettings />
</Button>

// Full-width button
<Button fullWidth color="success">
  Submit Form
</Button>

Button Variants

NextUI Button supports multiple visual styles through the variant prop:

solid: Filled background with solid color (default)
bordered: Transparent background with colored border
light: Subtle background with transparent hover states
flat: Subtle filled background
faded: Semi-transparent background with border
shadow: Solid background with shadow effect
ghost: Transparent with border that appears on hover

ButtonGroup

Container component for grouping multiple related buttons together with consistent spacing and visual connections.

interface ButtonGroupProps {
  /** Button group content */
  children: React.ReactNode;
  /** Size applied to all child buttons */
  size?: "sm" | "md" | "lg";
  /** Color applied to all child buttons */
  color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
  /** Variant applied to all child buttons */
  variant?: "solid" | "bordered" | "light" | "flat" | "faded" | "shadow" | "ghost";
  /** Border radius applied to the group */
  radius?: "none" | "sm" | "md" | "lg" | "full";
  /** Whether the group should take full width */
  fullWidth?: boolean;
  /** Whether the group is disabled */
  isDisabled?: boolean;
  /** Whether to disable animations */
  disableAnimation?: boolean;
  /** Whether to disable ripple effects */
  disableRipple?: boolean;
  /** Custom CSS classes */
  className?: string;
  /** Custom CSS classes for different component slots */
  classNames?: SlotsToClasses<ButtonGroupSlots>;
}

function ButtonGroup(props: ButtonGroupProps): JSX.Element;

type ButtonGroupSlots = "base";

Usage Example:

import { Button, ButtonGroup } from "@nextui-org/react";

<ButtonGroup variant="bordered" size="sm">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>

Types

// Press event from React Aria
interface PressEvent {
  /** The type of press event being fired */
  type: 'pressstart' | 'pressend' | 'pressup' | 'press';
  /** The pointer type that triggered the press event */
  pointerType: 'mouse' | 'pen' | 'touch' | 'keyboard' | 'virtual';
  /** The target element of the press event */
  target: Element;
  /** Whether the shift keyboard modifier was held during the press event */
  shiftKey: boolean;
  /** Whether the ctrl keyboard modifier was held during the press event */
  ctrlKey: boolean;
  /** Whether the meta keyboard modifier was held during the press event */
  metaKey: boolean;
  /** Whether the alt keyboard modifier was held during the press event */
  altKey: boolean;
}

// Slot-based styling system
type SlotsToClasses<S extends string> = {
  [key in S]?: string;
};