CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-storybook--components

Core Storybook Components (Deprecated - re-exports from storybook/internal/components)

—

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

Storybook Components

Storybook Components is a comprehensive UI component library that provides all the building blocks for creating Storybook's interface. While officially deprecated as a standalone package, it serves as a compatibility shim that re-exports all functionality from Storybook's internal component system, ensuring backward compatibility during architectural transitions.

Package Information

  • Package Name: @storybook/components
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @storybook/components
  • Status: Deprecated (compatibility shim)
  • Peer Dependency: storybook ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0

Core Imports

import { Button, Icons, Modal, Tabs } from "@storybook/components";

For CommonJS:

const { Button, Icons, Modal, Tabs } = require("@storybook/components");

Import all components:

import * as StorybookComponents from "@storybook/components";

Basic Usage

import { Button, H1, P, Badge, Modal } from "@storybook/components";

// Basic button usage
<Button variant="solid" size="medium" onClick={() => console.log('clicked')}>
  Click me
</Button>

// Typography components
<H1>Main Title</H1>
<P>This is a paragraph with proper Storybook styling.</P>

// UI components
<Badge status="positive">New Feature</Badge>

// Complex components
<Modal open={true} onOpenChange={() => {}} width={400}>
  <P>Modal content here</P>
</Modal>

Architecture

Storybook Components is built around several key areas:

  • Typography System: Complete set of styled HTML elements (H1-H6, P, Code, etc.) with consistent theming
  • Form Controls: Button, IconButton, and Form components with multiple variants and states
  • UI Components: Modal, Tabs, ActionBar, ScrollArea, Badge, ErrorFormatter, Loader, and other interface building blocks
  • Graphics System: Icon components, logos, and visual elements (with deprecation notices)
  • Layout Components: Bar, Separator, and spacing utilities for component arrangement
  • Tooltip System: Comprehensive tooltip components with various display options
  • Utility Components: ClipboardCode, SyntaxHighlighter, and other specialized utilities

Capabilities

Typography Components

Complete set of styled HTML elements with consistent theming and typography. Perfect for building documentation interfaces and content display.

// HTML Elements
const A: React.ComponentType<React.AnchorHTMLAttributes<HTMLAnchorElement>>;
const H1: React.ComponentType<React.HTMLAttributes<HTMLHeadingElement>>;
const H2: React.ComponentType<React.HTMLAttributes<HTMLHeadingElement>>;
const H3: React.ComponentType<React.HTMLAttributes<HTMLHeadingElement>>;
const P: React.ComponentType<React.HTMLAttributes<HTMLParagraphElement>>;
const Code: React.ComponentType<React.HTMLAttributes<HTMLElement>>;

// Typography utilities
const components: Record<string, React.ComponentType>;
const resetComponents: Record<string, React.ComponentType>;

Typography Components

Form Controls

Button components and form utilities with multiple variants, sizes, and animation options.

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'outline' | 'solid' | 'ghost';
  size?: 'small' | 'medium';
  padding?: 'small' | 'medium' | 'none';
  animation?: 'none' | 'rotate360' | 'glow' | 'jiggle';
  disabled?: boolean;
  active?: boolean;
  asChild?: boolean;
}

const Button: React.ForwardRefExoticComponent<ButtonProps>;
const IconButton: React.ComponentType;
const Form: Record<string, React.ComponentType>;

Form Controls

UI Components

Core interface components including modals, tabs, action bars, and layout utilities.

const Modal: React.ComponentType<ModalProps>;
const Badge: React.ComponentType<BadgeProps>;
const Tabs: React.ComponentType;
const ActionBar: React.ComponentType;
const ScrollArea: React.ComponentType;
const Placeholder: React.ComponentType;
const Spaced: React.ComponentType;
const Zoom: React.ComponentType;
const ErrorFormatter: React.ComponentType;
const Loader: React.ComponentType;
const ProgressSpinner: React.ComponentType;
const ClipboardCode: React.ComponentType;

UI Components

Tooltip System

Comprehensive tooltip components with link lists, messages, and notes for enhanced user interactions.

const WithTooltip: React.ComponentType;
const WithTooltipPure: React.ComponentType;
const TooltipMessage: React.ComponentType;
const TooltipNote: React.ComponentType;
const TooltipLinkList: React.ComponentType<{
  links: TooltipLinkListLink[];
}>;

interface TooltipLinkListLink {
  id: string;
  title: string;
  href?: string;
  onClick?: () => void;
}

Tooltip System

Graphics and Icons

Icon components, brand elements, and visual utilities. Note that Icons component is deprecated in favor of @storybook/icons.

interface IconsProps {
  icon: IconType;
  useSymbol?: boolean;
  onClick?: () => void;
}

const Icons: React.ComponentType<IconsProps>; // Deprecated
const StorybookLogo: React.ComponentType;
const StorybookIcon: React.ComponentType;
const Symbols: React.ComponentType;

Graphics and Icons

Syntax Highlighting

Code highlighting components with extensive language support and customization options.

interface SyntaxHighlighterProps {
  language: SupportedLanguage;
  children: string;
  showLineNumbers?: boolean;
  theme?: string;
}

const SyntaxHighlighter: React.ComponentType<SyntaxHighlighterProps>;
function createCopyToClipboardFunction(): (text: string) => void;

type SupportedLanguage = "javascript" | "typescript" | "jsx" | "tsx" | "css" | "html" | "json" | "markdown" | string;

Syntax Highlighting

Layout and Navigation

Bar components, separators, tabs, and navigation utilities for building complex interfaces.

const Bar: React.ComponentType;
const FlexBar: React.ComponentType;
const Separator: React.ComponentType;
const TabBar: React.ComponentType;
const TabWrapper: React.ComponentType;
const TabButton: React.ComponentType;
const AddonPanel: React.ComponentType;

function interleaveSeparators<T>(items: T[]): (T | React.ReactElement)[];

Layout and Navigation

Utilities

Navigation and helper utilities for Storybook-specific functionality.

/**
 * Utility to generate story URLs for navigation
 */
function getStoryHref(storyId: string, options?: { 
  viewMode?: 'story' | 'docs';
  [key: string]: any;
}): string;

Migration Notes

This package is deprecated and serves as a compatibility shim. All functionality is re-exported from storybook/internal/components. Users should eventually migrate to importing from the internal module structure:

// Current (deprecated but supported)
import { Button } from "@storybook/components";

// Future (recommended)
import { Button } from "storybook/internal/components";

Many individual components include deprecation warnings with migration guidance. The @storybook/icons package should be used instead of the deprecated Icons component.

Common Types

interface ActionItem {
  id: string;
  title: string;
  onClick: () => void;
  disabled?: boolean;
}

type IconType = string; // Specific icon names from the icon library

interface SyntaxHighlighterFormatTypes {
  [key: string]: any;
}

interface SyntaxHighlighterRendererProps {
  rows: any[];
  stylesheet: any;
  useInlineStyles: boolean;
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@storybook/components@8.6.x
Publish Source
CLI
Badge
tessl/npm-storybook--components badge