📚 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.

Build shadcn-ui/ui from scratch.

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

1. text
2. Start
3. Succeed
4. Stop

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:

Website: https://ramunarasinga.com/

Linkedin: https://www.linkedin.com/in/ramu-narasinga-189361128/

Github: https://github.com/Ramu-Narasinga

Email: [email protected]

References:

1. https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/commands/add.ts#L118
2. https://www.npmjs.com/package/ora