Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

199
Views
How can I add copy to storybook stories in CSF (React)?

I've implemented some stories in MDX with no format. I'm using @storybook/react version ^6.3.12. Here's a brief example:

## Examples

### Dark Background

The same styling works on light or dark background.

*Due to a storybook bug, you cannot see dark-background stories in the Docs
page.  Use the Canvas page instead.*

<Canvas>
  <Story
    name="Dark Background" 
    parameters={{
      backgrounds: {default: 'dark'}
    }}  
    args={{}}
  >
    {args => (
      <Selector assets={[...fixtures, ...fixtures]} />
    )}  
  </Story>
</Canvas>

### Few Assets

With only a few assets, the slider works the same way but without moving the 
thumbnails.

<Canvas>
  <Story name="Few assets" args={{}}>
    {args => (
      <Selector assets={[fixtures[0], fixtures[1]]} />
    )}  
  </Story>
</Canvas>

Due to problems with MDX, I'm switching to CSF. Here's a brief example (the second example from above).

export const FewAssets = (args) => (
  <Selector assets={[fixtures[0], fixtures[1]]} />
);
FewAssets.args = {...};
// and so on with parameters or whatever.

I've read the docs many times now. I can't quite seem to figure out how to add copy to the page in CSF:

### Few Assets

With only a few assets, the slider works the same way but without moving the 
thumbnails.

I thought of just adding it into the story definition, but then the docs page shows all that markup when you look at the code sample.

Am I missing something obvious?

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!