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:

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

References:

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

2. https://www.npmjs.com/package/ora