LibreChatDocs Components Examples
Explore the various components available on the website that you can seamlessly incorporate into your contributions to the blog and documentation.
Carousel
Callouts
Option Table
| Key | Type | Description | Example |
|---|---|---|---|
| EXAMPLE | boolean | This is an example. | EXAMPLE=true |
File Tree
Â
Cards
Default Button
Button examples with interactive handlers are not yet available in the Fumadocs migration. See the local MDX component mapping for the current non-interactive button wrapper: Component mapping
Features
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
Â
How is this guide?