or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

forms.mdgraphics.mdindex.mdlayout.mdsyntax-highlighting.mdtooltips.mdtypography.mdui-components.md
tile.json

tessl/npm-storybook--components

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@storybook/components@8.6.x

To install, run

npx @tessl/cli install tessl/npm-storybook--components@8.6.0

index.mddocs/

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;
}