create-component

You can scaffold a complete Spark UI component structure that automatically generates TypeScript source, CVA-based styles, tests, and Storybook stories in one pass. This ensures your component is export-ready for immediate integration into your design system.

When adding a component to a design system, you need to create the TypeScript source file, a styles file using Tailwind classes, a test file, Storybook stories, MDX documentation, and an index file for exports. An optional variants folder can also be generated for complex configurations.

CVA-based styling with Tailwind classes works by generating a dedicated styles file that maps component variants to Tailwind utility classes. This mechanism ensures strict typing for variant configurations while maintaining consistent styling across the generated component structure.

Yes, you can use this component scaffold generator for accessibility attributes because it automatically enforces proper ARIA attributes and includes a data-spark-component attribute in the generated TypeScript source. This ensures baseline accessibility compliance for your new design system component.

The best way to document a Storybook component with MDX is to generate a dedicated .doc.mdx file alongside your stories and component source. This ensures your documentation is directly coupled with the component implementation and automatically wired for Storybook rendering.

Yes, the generated component skeleton includes TypeScript strict typing across the source and styles files. This enforcement guarantees type safety for component props, CVA variant configurations, and export structures within the packages/components/src directory.