Storybook

CSF Format (Component Story Format)

• Default export is component meta—title, component, args, decorators
• Named exports are stories—each export becomes a story in sidebar
• satisfies Meta<typeof Component> for TypeScript type checking
• CSF3 uses object syntax, not functions—export const Primary = { args: {...} }

Args vs ArgTypes

• args are actual prop values passed to component—args: { label: 'Click me' }
• argTypes configure controls UI—argTypes: { size: { control: 'select', options: ['sm', 'lg'] } }
• Default args in meta apply to all stories—override in individual stories
• argTypes: { onClick: { action: 'clicked' } } logs events in Actions panel

Controls