Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Source code

Click here to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

Installation

npx ui-thing@latest add tabs

Usage

Basic example

Account

Make changes to your account here. Click save when you're done.

With Indicator

Passing :pill="false" to the List and Trigger components will remove the background color from both components. This allows us to use the Indicator component to create a custom indicator.

Account

Make changes to your account here. Click save when you're done.

Origin UI Examples

These are some examples that I found today over here Origin UI. I think they are cool.

To use these examples you will have to copy the code and adjust it for your own use.

One

Content for Tab 1

Two

Content for Tab 1

Three

Content for Tab 1

Four

Content for Tab 1

Five

Content for Tab 1

Six

Content for Tab 1

Seven

Content for Tab 1

Eight

These are the number of outstanding projects.

Nine

These are the number of outstanding projects.

Ten

These are the number of outstanding projects.

Eleven

These are the number of outstanding projects.

Twelve

These are the number of outstanding projects.

Thirteen

These are the number of outstanding projects.

Fourteen

These are the number of outstanding projects.

Fifteen

These are the number of outstanding projects.

Sixteen

These are the number of outstanding projects.

Seventeen

These are the number of outstanding projects.

Eighteen

These are the number of outstanding projects.

Nineteen

These are the number of outstanding projects.

Twenty

These are the number of outstanding projects.