Generating a new component
The fastest way to get started with creating a new component is to generate it from the command line. Run the following command to have your new component scaffolded for you:
$ yarn new-package
? SWC package name (i.e. color-area)
? Spectrum CSS package name (i.e. colorarea)
In response to the prompt above, the package name should be the kebab case version of the Spectrum CSS pattern that you are looking to add to the repo. That is, the SpectrumPattern
that you want to create should be represented as spectrum-pattern
in your response. From here, the command generates a new package for your pattern with the following file structure in the /packages
directory:
> spectrum-pattern > src/ index.ts SpectrumPattern.ts spectrum-pattern.css spectrum-config.js > test/ > benchmark/ basic-test.ts spectrum-pattern.test.ts > stories/ spectrum-pattern.stories.ts sp-spectrum-pattern.ts README.md tsconfig.json package.json
From here, peek into the package.json
file and ensure the "devDependency" of @spectrum-css/spectrumpattern
listed there is of the most current version. Then, run yarn
in your terminal to grab any newly-added packages, as well as to ensure that you have the provided CSS processed for use in your component. You'll now be able to see your component in the Storybook, using the command yarn storybook
, or test its functionality via yarn test
so that you can dive into fully preparing the pattern for use as a custom element.
The next place to look is in node_modules/@spectrum-css/spectrumpattern/metadata/spectrumpattern.yml
. Here, you will find complete Spectrum CSS’s HTML representation of the many states, variants, and capabilities offered by the pattern that you are working with. The content of this file is also found on the
Now that you have this scaffold as a base, check out spectrum-config.js
If you run into any issues with the instructions above, or the ones linked across this documentation site, please feel free to
Thanks for stopping by. We look forward to your contribution!