Live preview of themes with sample components

Theme Preview

Visualize your theme with color palettes, typography samples, and custom components. Test themes before deployment.

Theme Preview Component

ThemePreview provides a live preview environment for testing themes with sample components, color palettes, typography scales, and spacing visualizations.

Overview

The ThemePreview component creates a visual testing environment where you can see how your theme looks with real components. It displays color palettes, typography samples, spacing scales, and allows you to preview custom components.

✨ Try it now: Interactive Preview Example — Customize colors and visualize a theme with sample components.

Key Features

Theme Details - Display theme metadata and information
Color Palette - Visual representation of all theme colors
Typography Samples - Preview all font sizes, weights, and line heights
Spacing Scale - Visualize spacing tokens
Custom Components - Test theme with your actual components
Sample Rendering - Built-in sample components for quick testing

Basic Usage

Simple Preview

TSX

import { ThemePreview } from '@shohojdhara/atomix/theme/devtools';
import { createTheme } from '@shohojdhara/atomix/theme';

const theme = createTheme({
  name: 'My Theme',
  palette: {
    primary: { main: '#7AFFD7' },
    secondary: { main: '#FF5733' },
  },
});

function App() {
  return (
    <ThemePreview
      theme={theme}
      showDetails={true}
      showPalette={true}
      showTypography={true}
      showSpacing={false}
    />
  );
}

22 lines449 characters

With Custom Components

TSX

import { Button, Card } from '@shohojdhara/atomix';

<ThemePreview theme={theme} showPalette={true}>
  {/* Your custom components */}
  <Button variant="primary">Test Button</Button>
  <Card className="u-p-4">
    <h3>Test Card</h3>
    <p>Testing theme with actual components</p>
  </Card>
</ThemePreview>

10 lines306 characters

Props API

Prop	Type	Default	Description
`theme`	`Theme`	Required	Theme object to preview
`showDetails`	`boolean`	`true`	Show theme metadata and details
`showPalette`	`boolean`	`true`	Show color palette visualization
`showTypography`	`boolean`	`true`	Show typography samples
`showSpacing`	`boolean`	`false`	Show spacing scale visualization
`children`	`ReactNode`	-	Custom components to render with theme
`className`	`string`	-	Custom CSS class name
`style`	`CSSProperties`	-	Inline styles object

Advanced Examples

Theme Testing Suite

Create a comprehensive testing environment:

TSX

import { ThemePreview } from '@shohojdhara/atomix/theme/devtools';
import { Button, Card, Input, Badge } from '@shohojdhara/atomix';

function ThemeTestingSuite({ theme }) {
  return (
    <ThemePreview
      theme={theme}
      showPalette={true}
      showTypography={true}
    >
      <div className="component-tests">
        <section>
          <h3>Buttons</h3>
          <Button variant="primary">Primary</Button>
          <Button variant="secondary">Secondary</Button>
          <Button variant="outline">Outline</Button>
        </section>

        <section>
          <h3>Form Elements</h3>
          <Input placeholder="Test input" />
          <Input type="email" placeholder="Email" />
        </section>

        <section>
          <h3>Cards</h3>
          <Card className="u-p-4">
            <h4>Card Title</h4>
            <p>Card content with theme applied</p>
          </Card>
        </section>

        <section>
          <h3>Badges</h3>
          <Badge variant="primary">Primary</Badge>
          <Badge variant="success">Success</Badge>
          <Badge variant="error">Error</Badge>
        </section>
      </div>
    </ThemePreview>
  );
}

42 lines1169 characters

Storybook Integration

Add theme preview to Storybook stories:

TSX

// .storybook/preview.tsx
import { ThemePreview } from '@shohojdhara/atomix/theme/devtools';

export const decorators = [
  (Story, context) => {
    const theme = context.globals.theme;
    
    return (
      <ThemePreview
        theme={theme}
        showDetails={false}
        showPalette={false}
      >
        <Story />
      </ThemePreview>
    );
  },
];

// In your stories
export const WithTheme = {
  decorators: [
    (Story) => (
      <ThemePreview theme={myCustomTheme}>
        <Story />
      </ThemePreview>
    ),
  ],
};

29 lines543 characters

Multi-Theme Comparison

Preview multiple themes side by side:

TSX

function MultiThemePreview() {
  const themes = [lightTheme, darkTheme, customTheme];

  return (
    <div className="theme-grid">
      {themes.map((theme) => (
        <div key={theme.name} className="theme-preview-container">
          <h3>{theme.name}</h3>
          <ThemePreview
            theme={theme}
            showPalette={true}
            showTypography={false}
          >
            <Button>Test Button</Button>
            <Card className="u-p-3">Sample Card</Card>
          </ThemePreview>
        </div>
      ))}
    </div>
  );
}

21 lines553 characters

Common Use Cases

1. Theme Development

Use ThemePreview during theme creation to see changes in real-time:

Visualize color palette as you adjust values
Test typography scales with actual text samples
Preview components with new theme applied

2. Client Presentations

Show theme options to clients or stakeholders:

Display multiple theme variations
Preview with actual application components
Demonstrate light/dark mode options

3. Documentation

Include in theme documentation:

Show available theme options
Demonstrate theme customization
Provide interactive examples

Best Practices

Test with Real Components

Always preview themes with your actual application components, not just the default samples. This ensures the theme works correctly in your specific use cases.

Check All Variants

Test all component variants (primary, secondary, outline, etc.) to ensure consistent theming across your entire component library.

Verify Accessibility

Use the color palette view to check contrast ratios. Ensure text is readable against all background colors in your theme.

Performance Note

CSS variables are generated once and cached for performance. The preview updates smoothly even with complex themes.

Related Tools

Combine ThemePreview with other devtools:

→ Theme Inspector - Validate and debug themes → Live Editor - Edit themes in real-time → Theme Comparator - Compare theme versions ← Back to Devtools Overview

Live preview of themes with sample components

Theme Preview

Visualize your theme with color palettes, typography samples, and custom components. Test themes before deployment.

Theme Preview Component

ThemePreview provides a live preview environment for testing themes with sample components, color palettes, typography scales, and spacing visualizations.

Overview

✨ Try it now: Interactive Preview Example — Customize colors and visualize a theme with sample components.

Key Features

Theme Details - Display theme metadata and information
Color Palette - Visual representation of all theme colors
Typography Samples - Preview all font sizes, weights, and line heights
Spacing Scale - Visualize spacing tokens
Custom Components - Test theme with your actual components
Sample Rendering - Built-in sample components for quick testing

Basic Usage

Simple Preview

TSX

import { ThemePreview } from '@shohojdhara/atomix/theme/devtools';
import { createTheme } from '@shohojdhara/atomix/theme';

const theme = createTheme({
  name: 'My Theme',
  palette: {
    primary: { main: '#7AFFD7' },
    secondary: { main: '#FF5733' },
  },
});

function App() {
  return (
    <ThemePreview
      theme={theme}
      showDetails={true}
      showPalette={true}
      showTypography={true}
      showSpacing={false}
    />
  );
}

22 lines449 characters

With Custom Components

TSX

import { Button, Card } from '@shohojdhara/atomix';

<ThemePreview theme={theme} showPalette={true}>
  {/* Your custom components */}
  <Button variant="primary">Test Button</Button>
  <Card className="u-p-4">
    <h3>Test Card</h3>
    <p>Testing theme with actual components</p>
  </Card>
</ThemePreview>

10 lines306 characters

Props API

Prop	Type	Default	Description
`theme`	`Theme`	Required	Theme object to preview
`showDetails`	`boolean`	`true`	Show theme metadata and details
`showPalette`	`boolean`	`true`	Show color palette visualization
`showTypography`	`boolean`	`true`	Show typography samples
`showSpacing`	`boolean`	`false`	Show spacing scale visualization
`children`	`ReactNode`	-	Custom components to render with theme
`className`	`string`	-	Custom CSS class name
`style`	`CSSProperties`	-	Inline styles object

Advanced Examples

Theme Testing Suite

Create a comprehensive testing environment:

TSX

import { ThemePreview } from '@shohojdhara/atomix/theme/devtools';
import { Button, Card, Input, Badge } from '@shohojdhara/atomix';

function ThemeTestingSuite({ theme }) {
  return (
    <ThemePreview
      theme={theme}
      showPalette={true}
      showTypography={true}
    >
      <div className="component-tests">
        <section>
          <h3>Buttons</h3>
          <Button variant="primary">Primary</Button>
          <Button variant="secondary">Secondary</Button>
          <Button variant="outline">Outline</Button>
        </section>

        <section>
          <h3>Form Elements</h3>
          <Input placeholder="Test input" />
          <Input type="email" placeholder="Email" />
        </section>

        <section>
          <h3>Cards</h3>
          <Card className="u-p-4">
            <h4>Card Title</h4>
            <p>Card content with theme applied</p>
          </Card>
        </section>

        <section>
          <h3>Badges</h3>
          <Badge variant="primary">Primary</Badge>
          <Badge variant="success">Success</Badge>
          <Badge variant="error">Error</Badge>
        </section>
      </div>
    </ThemePreview>
  );
}

42 lines1169 characters

Storybook Integration

Add theme preview to Storybook stories:

TSX

// .storybook/preview.tsx
import { ThemePreview } from '@shohojdhara/atomix/theme/devtools';

export const decorators = [
  (Story, context) => {
    const theme = context.globals.theme;
    
    return (
      <ThemePreview
        theme={theme}
        showDetails={false}
        showPalette={false}
      >
        <Story />
      </ThemePreview>
    );
  },
];

// In your stories
export const WithTheme = {
  decorators: [
    (Story) => (
      <ThemePreview theme={myCustomTheme}>
        <Story />
      </ThemePreview>
    ),
  ],
};

29 lines543 characters

Multi-Theme Comparison

Preview multiple themes side by side:

TSX

function MultiThemePreview() {
  const themes = [lightTheme, darkTheme, customTheme];

  return (
    <div className="theme-grid">
      {themes.map((theme) => (
        <div key={theme.name} className="theme-preview-container">
          <h3>{theme.name}</h3>
          <ThemePreview
            theme={theme}
            showPalette={true}
            showTypography={false}
          >
            <Button>Test Button</Button>
            <Card className="u-p-3">Sample Card</Card>
          </ThemePreview>
        </div>
      ))}
    </div>
  );
}

21 lines553 characters

Common Use Cases

1. Theme Development

Use ThemePreview during theme creation to see changes in real-time:

Visualize color palette as you adjust values
Test typography scales with actual text samples
Preview components with new theme applied

2. Client Presentations

Show theme options to clients or stakeholders:

Display multiple theme variations
Preview with actual application components
Demonstrate light/dark mode options

3. Documentation

Include in theme documentation:

Show available theme options
Demonstrate theme customization
Provide interactive examples

Best Practices

Test with Real Components

Always preview themes with your actual application components, not just the default samples. This ensures the theme works correctly in your specific use cases.

Check All Variants

Test all component variants (primary, secondary, outline, etc.) to ensure consistent theming across your entire component library.

Verify Accessibility

Use the color palette view to check contrast ratios. Ensure text is readable against all background colors in your theme.

Performance Note

CSS variables are generated once and cached for performance. The preview updates smoothly even with complex themes.

Related Tools

Combine ThemePreview with other devtools:

→ Theme Inspector - Validate and debug themes → Live Editor - Edit themes in real-time → Theme Comparator - Compare theme versions ← Back to Devtools Overview

Getting Started

Documentation

Resources

Community

Theme Preview

Theme Preview Component

Overview

Key Features

Basic Usage

Simple Preview

With Custom Components

Props API

Advanced Examples

Theme Testing Suite

Storybook Integration

Multi-Theme Comparison

Common Use Cases

1. Theme Development

2. Client Presentations

3. Documentation

Best Practices

Test with Real Components

Check All Variants

Verify Accessibility

Performance Note

Related Tools

Theme Preview

Theme Preview Component

Overview

Key Features

Basic Usage

Simple Preview

With Custom Components

Props API

Advanced Examples

Theme Testing Suite

Storybook Integration

Multi-Theme Comparison

Common Use Cases

1. Theme Development

2. Client Presentations

3. Documentation

Best Practices

Test with Real Components

Check All Variants

Verify Accessibility

Performance Note

Related Tools