Docs Components Examples

Carousel

Callouts

💀

undefined or unsupported type▷

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fermentum dapibus diam lacinia curabitur nullam habitasse etiam. Aliquam dolor nostra himenaeos ullamcorper duis venenatis laoreet. Netus dictum hac donec risus adipiscing tempus ultrices. Vivamus eros volutpat suscipit mi a lacus volutpat.

Dolor semper vehicula cras convallis id sociosqu lacus. At ligula porta habitasse nunc ridiculus odio litora. Vestibulum suscipit nisi urna montes conubia fringilla nascetur. Turpis rutrum nunc ad elementum molestie interdum curae. Integer euismod mi luctus proin habitant interdum proin.

Litora dui mus cum condimentum mus eget suscipit. Tellus phasellus duis phasellus elementum vitae pretium et. Netus habitasse tincidunt semper nullam sociosqu nisl mollis. Est hendrerit nulla ante fusce faucibus convallis vulputate. Metus imperdiet fusce id rhoncus urna ridiculus sem.

🪶

default▷

👾

example▷

✏️

note▷

📔

abstract▷

ℹ️

info▷

🔥

tip▷

✔️

success▷

❔

question▷

⚠️

warning▷

❌

error▷

💣

danger▷

🐞

bug▷

🪽

quote▷

Option Table

Key	Type	Description	Example
EXAMPLE	boolean	This is an example.	EXAMPLE=true

File Tree

main.js

package.json

Cards

Default Button

Open ecosystem.Ai’s website in a new tab:

Open ecosystem.Ai’s website in the current tab:

And here’s a button with Alert:

Features

This is a feature with a link.

This is a medium “lightOnly” feature occupying two spaces.

This is a large feature with “centered” attribute.

Simple Tabs

React is a JavaScript library for building user interfaces.

In this example, we have a single <Tabs> component with three tabs: “React”, “Vue”, and “Angular”. Each tab contains a brief description of the respective technology.

The items prop on the <Tabs> component is an array of strings that represents the labels for each tab. The content for each tab is placed inside the corresponding <Tabs.Tab> component.

This demonstrates a straightforward usage of the <Tabs> component without any nesting.

Nested Tabs

This example demonstrates how to create nested tabs using the <Tabs> and <Tabs.Tab> components. The outer <Tabs> component has two tabs: “Fruit” and “Vegetable”. Inside each of these tabs, there are nested tabs for specific fruits and vegetables.

The items prop on the <Tabs> component is an array of strings that represents the labels for each tab. The content for each tab is placed inside the corresponding <Tabs.Tab> component.

Apple is a fruit.

Video

Steps

- Step 1: example - Step 2: example - Step 3: example - Step 4: example

Contributing to the Docs Syntax Highlighting