Studio React Components

A comprehensive collection of pre-built React components designed for use with Studio. These components are built on top of Radix UI primitives and styled with Goober CSS-in-JS, providing accessible, customizable, and production-ready UI components.

• Studio React Components
  • Features
  • Installation
  • Quick Start
    • Basic Usage
    • Selective Component Registration
  • Available Components
    • Layout & Structure
    • Navigation
    • Feedback & Status
    • Interactive Elements
  • Styling
    • Design Tokens
    • ADVANCED_COMPONENTS
  • Browser Support

Features

• 20+ Pre-built Components - Ready-to-use UI components with sensible defaults
• Accessible - Built on Radix UI primitives for excellent accessibility
• Studio Ready - Seamlessly integrates with Studio's visual builder
• Customizable - Full styling control with design tokens and CSS classes
• Responsive - Mobile-first design approach
• Lightweight - Optimized bundle size with tree-shaking support
• TypeScript - Full TypeScript support with comprehensive type definitions

Installation

npm install @contentstack/studio-react-components

Quick Start

Basic Usage

import { getAdvancedComponents } from '@contentstack/studio-react-components';
import { registerComponents, registerDesignTokens } from '@contentstack/studio-react';

// Register design tokens
const designTokens = registerDesignTokens({});

// Get all advanced components
const advancedComponents = getAdvancedComponents(designTokens);

// Register components with Studio
registerComponents(advancedComponents);

Selective Component Registration

import { getAdvancedComponents, ADVANCED_COMPONENTS } from '@contentstack/studio-react-components';

const designTokens = registerDesignTokens({});

// Register only specific components
const selectedComponents = getAdvancedComponents(designTokens, [
  ADVANCED_COMPONENTS.ACCORDION,
  ADVANCED_COMPONENTS.ALERT,
  ADVANCED_COMPONENTS.BUTTON,
  ADVANCED_COMPONENTS.CARD
]);

registerComponents(selectedComponents);

Available Components

Layout & Structure

• Accordion - Collapsible content sections
• Card - Container for content with header, body, and footer
• Collapsible - Expandable/collapsible content
• Drawer - Slide-out panel from screen edges
• Sheet - Modal-like overlay panel
• Separator - Visual divider between content

Navigation

• Breadcrumb - Navigation breadcrumbs
• MenuBar - Horizontal menu bar
• Tabs - Tabbed content interface

Feedback & Status

• Alert - Status messages and notifications
• Badge - Small status indicators
• Progress - Progress indicators
• Skeleton - Loading placeholders
• Toast - Temporary notifications

Interactive Elements

• Avatar - User profile images
• Carousel - Image/content carousel
• Dropdown - Dropdown menus
• HoverCard - Hover-triggered cards
• Popover - Floating content panels
• Tooltip - Hover tooltips

Styling

Design Tokens

Components are styled using design tokens that can be customized:

const customDesignTokens = registerDesignTokens({
  colors: {
    primary: '#007bff',
    secondary: '#6c757d',
    // ... more colors
  },
  spacing: {
    'space-1': '0.25rem',
    'space-2': '0.5rem',
    // ... more spacing values
  },
  typography: {
    fontSize: {
      'font-size-base': '1rem',
      'font-size-lg': '1.125rem',
      // ... more font sizes
    }
  }
});

ADVANCED_COMPONENTS

Constant object containing all available component names:

{
  ACCORDION: "accordion",
  ALERT: "alert",
  AVATAR: "avatar",
  BADGE: "badge",
  BREADCRUMB: "bread-crumb",
  CARD: "card",
  CAROUSEL: "carousel",
  COLLAPSIBLE: "collapsible",
  DRAWER: "drawer",
  HOVER_CARD: "hover-card",
  MENUBAR: "menubar",
  POPOVER: "popover",
  PROGRESS: "progress",
  SEPARATOR: "separator",
  SHEET: "sheet",
  SKELETON: "skeleton",
  TABS: "tabs",
  TOAST: "toast",
  TOOLTIP: "tooltip"
}

Browser Support

• Chrome >= 88
• Firefox >= 78
• Safari >= 14
• Edge >= 88