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.

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

``bash
npm install @contentstack/studio-react-components
`

Quick Start

$3

`tsx
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);
`

$3

`tsx
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

$3

`tsx
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
}
}
});
`

$3

Constant object containing all available component names:

`tsx
{
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