Find out how the Ora package is used to show a CLI spinner in shadcn-ui/ui source code.
I found a function named ora in add.ts in shadcn-ui/ui source code. Wanted to find out what it is, so I did some research and this article presents my findings about ora.
Where is ora imported from?
I was checking to see if ora is a function that’s part of shadcn-ui/ui utilities.
Next obvious step is to scroll to the top of add.ts and this is where you will find the below import.
Ora is imported from an ora npm package.
Ora: a CLI spinner
Ora is written by the legend, Sindre Sorhus.
It is used to show spinners in your CLI. isn’t that cool!? You can read more about Ora here.
A simple usage from the Ora docs
import ora from 'ora';
const spinner = ora('Loading unicorns').start();
setTimeout(() => {
spinner.color = 'yellow';
spinner.text = 'Loading rainbows';
}, 1000);
I found the below APIs used in add.ts in shadcn-ui/ui
Conclusion:
I found that Ora is used in shadcn-ui’s CLI package, to show the spinner in your terminal as you add component via this CLI to your project. Ora is quite popular, at the time of writing this article, it has about 24 million downloads per week.
About me:
Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.
I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com
My Github — https://github.com/ramu-narasinga
My website — https://ramunarasinga.com
My Youtube channel — https://www.youtube.com/@ramu-narasinga
Learning platform — https://thinkthroo.com
Codebase Architecture — https://app.thinkthroo.com/architecture
Best practices — https://app.thinkthroo.com/best-practices
Production-grade projects — https://app.thinkthroo.com/production-grade-projects