CtrlK
BlogDocsLog inGet started
Tessl Logo

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

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

layout.mddocs/

Layout Components

NextUI's layout components provide the structural foundation for organizing content, creating visual hierarchy, and managing spacing in your applications.

Capabilities

Card

A flexible container component for grouping related content with customizable shadows, borders, and interactive states.

interface CardProps {
  /** Card content */
  children?: React.ReactNode;
  /** Card shadow intensity */
  shadow?: "none" | "sm" | "md" | "lg";
  /** Border radius size */
  radius?: "none" | "sm" | "md" | "lg";
  /** Whether card takes full available width */
  fullWidth?: boolean;
  /** Enable hover elevation effect */
  isHoverable?: boolean;
  /** Enable press/click interaction */
  isPressable?: boolean;
  /** Apply blur backdrop effect */
  isBlurred?: boolean;
  /** Disable all interactions */
  isDisabled?: boolean;
  /** Disable animations */
  disableAnimation?: boolean;
  /** Disable ripple effect on press */
  disableRipple?: boolean;
  /** Allow text selection when pressable */
  allowTextSelectionOnPress?: boolean;
  /** Custom CSS class */
  className?: string;
  /** Slot-based styling */
  classNames?: SlotsToClasses<CardSlots>;
  /** Press event handler */
  onPress?: () => void;
}

type CardSlots = "base" | "header" | "body" | "footer";

function Card(props: CardProps): JSX.Element;

/**
 * Hook for Card state management
 */
function useCard(props: CardProps): {
  Component: React.ElementType;
  slots: Record<CardSlots, string>;
  classNames: SlotsToClasses<CardSlots>;
  getCardProps: () => any;
};

Card Sections

Specialized components for structuring content within cards.

interface CardHeaderProps {
  /** Header content */
  children?: React.ReactNode;
  /** Custom CSS class */
  className?: string;
}

interface CardBodyProps {
  /** Body content */  
  children?: React.ReactNode;
  /** Custom CSS class */
  className?: string;
}

interface CardFooterProps {
  /** Footer content */
  children?: React.ReactNode;
  /** Custom CSS class */
  className?: string;
}

function CardHeader(props: CardHeaderProps): JSX.Element;
function CardBody(props: CardBodyProps): JSX.Element;
function CardFooter(props: CardFooterProps): JSX.Element;

Card Usage Example:

import { Card, CardHeader, CardBody, CardFooter, Button, Image } from "@nextui-org/react";

function ProductCard() {
  return (
    <Card isHoverable isPressable className="max-w-[300px]">
      <CardHeader className="pb-0 pt-2 px-4 flex-col items-start">
        <p className="text-tiny uppercase font-bold">Daily Mix</p>
        <small className="text-default-500">12 Tracks</small>
        <h4 className="font-bold text-large">Frontend Radio</h4>
      </CardHeader>
      <CardBody className="overflow-visible py-2">
        <Image
          alt="Card background"
          className="object-cover rounded-xl"
          src="/images/hero-card-complete.jpeg"
          width={270}
        />
      </CardBody>
      <CardFooter className="pt-2">
        <Button 
          className="w-full" 
          color="primary" 
          radius="lg" 
          size="sm"
        >
          Play Now
        </Button>
      </CardFooter>
    </Card>
  );
}

Card Context

Context system for sharing card state across card sections.

interface CardProviderProps {
  children: React.ReactNode;
  value: CardContextValue;
}

interface CardContextValue {
  slots: Record<CardSlots, string>;
  classNames?: SlotsToClasses<CardSlots>;
  isPressed?: boolean;
  isHovered?: boolean;
  isDisabled?: boolean;
}

const CardProvider: React.FC<CardProviderProps>;

/**
 * Hook to access card context
 * @throws Error if used outside CardProvider
 */
function useCardContext(): CardContextValue;

Spacer

A flexible spacing component for creating consistent gaps between elements.

interface SpacerProps {
  /** Horizontal spacing (as CSS units or responsive scale) */
  x?: number | string;
  /** Vertical spacing (as CSS units or responsive scale) */
  y?: number | string;
  /** Custom CSS class */
  className?: string;
}

function Spacer(props: SpacerProps): JSX.Element;

/**
 * Hook for Spacer state management
 */
function useSpacer(props: SpacerProps): {
  Component: React.ElementType;
  getSpacerProps: () => any;
};

Spacer Usage Examples:

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

function SpacingExample() {
  return (
    <div className="flex flex-col">
      <Button>First Button</Button>
      {/* Vertical spacing */}
      <Spacer y={4} />
      <Button>Second Button</Button>
      
      {/* Horizontal spacing in flex row */}
      <div className="flex">
        <Button>Left</Button>
        <Spacer x={2} />
        <Button>Right</Button>
      </div>
    </div>
  );
}

Divider

A visual separator for organizing content sections with customizable orientation and styling.

interface DividerProps {
  /** Divider orientation */
  orientation?: "horizontal" | "vertical";
  /** Custom CSS class */
  className?: string;
}

function Divider(props: DividerProps): JSX.Element;

/**
 * Hook for Divider state management
 */
function useDivider(props: DividerProps): {
  Component: React.ElementType;
  getDividerProps: () => any;
};

Divider Usage Examples:

import { Divider, Card, CardBody } from "@nextui-org/react";

function ContentSection() {
  return (
    <Card>
      <CardBody>
        <div>Section 1 Content</div>
        
        {/* Horizontal divider */}
        <Divider className="my-4" />
        
        <div>Section 2 Content</div>
        
        {/* Vertical divider in flex layout */}
        <div className="flex items-center gap-4">
          <span>Left content</span>
          <Divider orientation="vertical" className="h-8" />
          <span>Right content</span>
        </div>
      </CardBody>
    </Card>
  );
}

Scroll Shadow

A container component that adds visual shadows to indicate scrollable content overflow.

interface ScrollShadowProps {
  /** Content to be wrapped with scroll shadows */
  children?: React.ReactNode;
  /** Shadow visibility configuration */
  visibility?: ScrollShadowVisibility;
  /** Scroll direction for shadow calculation */
  orientation?: ScrollShadowOrientation;
  /** Container height (required for vertical scrolling) */
  height?: number | string;
  /** Container width (required for horizontal scrolling) */
  width?: number | string;
  /** Maximum height before scrolling */
  maxHeight?: number | string;
  /** Whether shadows are enabled */
  isEnabled?: boolean;
  /** Shadow size */
  size?: number;
  /** Hide scrollbar */
  hideScrollBar?: boolean;
  /** Offset before showing shadows */
  offset?: number;
  /** Custom CSS class */
  className?: string;
}

type ScrollShadowVisibility = "auto" | "top" | "bottom" | "left" | "right" | "both" | "none";
type ScrollShadowOrientation = "vertical" | "horizontal";

function ScrollShadow(props: ScrollShadowProps): JSX.Element;

/**
 * Hook for ScrollShadow state management
 */
function useScrollShadow(props: ScrollShadowProps): {
  Component: React.ElementType;
  getScrollShadowProps: () => any;
  getWrapperProps: () => any;
  isTopShadowVisible: boolean;
  isBottomShadowVisible: boolean;
  isLeftShadowVisible: boolean;
  isRightShadowVisible: boolean;
};

ScrollShadow Usage Examples:

import { ScrollShadow, Card, CardBody } from "@nextui-org/react";

function ScrollableContent() {
  const longContent = Array.from({ length: 50 }, (_, i) => (
    <div key={i} className="py-2 px-4 border-b">
      Item {i + 1}
    </div>
  ));

  return (
    <Card>
      <CardBody>
        {/* Vertical scrolling with shadows */}
        <ScrollShadow 
          height="300px" 
          className="w-full"
          hideScrollBar
        >
          <div className="space-y-2">
            {longContent}
          </div>
        </ScrollShadow>
        
        {/* Horizontal scrolling */}
        <ScrollShadow
          orientation="horizontal"
          width="300px"
          className="mt-4"
        >
          <div className="flex gap-4 w-max">
            {Array.from({ length: 20 }, (_, i) => (
              <div 
                key={i} 
                className="min-w-[120px] p-4 bg-gray-100 rounded"
              >
                Card {i + 1}
              </div>
            ))}
          </div>
        </ScrollShadow>
      </CardBody>
    </Card>
  );
}

Layout Component Types

// Shared types for layout components
interface LayoutBaseProps {
  /** Component content */
  children?: React.ReactNode;
  /** Custom CSS class */
  className?: string;
}

// Card-specific types
interface CardContextValue {
  slots: Record<CardSlots, string>;
  classNames?: SlotsToClasses<CardSlots>;
  isPressed?: boolean;
  isHovered?: boolean;
  isDisabled?: boolean;
}

// Spacing utilities
type SpacingValue = number | string | {
  xs?: number | string;
  sm?: number | string;  
  md?: number | string;
  lg?: number | string;
  xl?: number | string;
};

// Scroll shadow utilities
interface ScrollShadowState {
  isScrollable: boolean;
  canScrollUp: boolean;
  canScrollDown: boolean;
  canScrollLeft: boolean;
  canScrollRight: boolean;
  scrollTop: number;
  scrollLeft: number;
  scrollHeight: number;
  scrollWidth: number;
  clientHeight: number;
  clientWidth: number;
}

Integration Examples

Responsive Card Layout

import { Card, CardHeader, CardBody, Spacer, Divider } from "@nextui-org/react";

function ResponsiveLayout() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {[1, 2, 3, 4, 5, 6].map((item) => (
        <Card key={item} className="h-full">
          <CardHeader>
            <h3 className="text-lg font-semibold">Card {item}</h3>
          </CardHeader>
          <Divider />
          <CardBody className="flex-grow">
            <p>Card content goes here...</p>
            <Spacer y={2} />
            <p>More content with consistent spacing.</p>
          </CardBody>
        </Card>
      ))}
    </div>
  );
}

Complex Layout with ScrollShadow

import { 
  Card, CardHeader, CardBody, 
  ScrollShadow, Spacer, Divider 
} from "@nextui-org/react";

function DashboardLayout() {
  return (
    <div className="flex h-screen">
      {/* Sidebar */}
      <Card className="w-64 rounded-none">
        <CardHeader>
          <h2>Navigation</h2>
        </CardHeader>
        <Divider />
        <CardBody className="p-0">
          <ScrollShadow height="100%">
            <div className="p-4 space-y-2">
              {/* Navigation items */}
            </div>
          </ScrollShadow>
        </CardBody>
      </Card>
      
      <Spacer x={1} />
      
      {/* Main content */}
      <Card className="flex-1 rounded-none">
        <CardHeader>
          <h1>Dashboard</h1>
        </CardHeader>
        <Divider />
        <CardBody>
          <ScrollShadow height="calc(100vh - 120px)">
            <div className="space-y-6">
              {/* Main content */}
            </div>
          </ScrollShadow>
        </CardBody>
      </Card>
    </div>
  );
}

docs

core-system.md

data-display.md

date-time.md

feedback.md

forms.md

index.md

inputs.md

interactions.md

layout.md

navigation.md

overlays.md

utilities.md

tile.json