mirror of
https://github.com/LibreChat-AI/librechat.ai.git
synced 2026-03-27 10:48:32 +07:00
4656b0116a
* feat: enhance accessibility and improve component structure across various files * feat: enhance components with TypeScript typings and improve documentation - Added TypeScript interface for Screenshot component props. - Updated button component documentation for clarity. - Removed unnecessary console log in ContainerScroll component. - Added descriptive comments for FloatingDock and utility functions. - Improved CSP headers in next.config.mjs for security. - Cleaned up package.json by removing unused dependencies. - Refactored _app.tsx to use AppProps for type safety. - Updated meta configuration by removing hidden display property. - Added API documentation comments for GitHub stats and subscription endpoints. - Enhanced error handling in subscription API. - Updated Tailwind CSS configuration with detailed comments. - Cleaned up style.css by organizing and refining styles. - Updated tsconfig.json to include TypeScript files for API routes. - Added comments to Subscriber model and dbConnect utility for clarity. * feat: add aria-labels to HeroLinks for improved accessibility * feat: replace Twitter icon with X and add new X icon component * chore: update code structure for better readability and maintenance * chore: update .gitignore to include additional AI assistant files and Claude Flow generated files * feat: replace sidebar emojis with Lucide icons, fix duplicate titles, and clean up codebase - Add icon resolver (lib/icons.tsx) with 73 Lucide React icons mapped to string IDs - Wire icon resolver into Fumadocs loader for automatic sidebar icon rendering - Update all 19 meta.json files to use icon field instead of emoji prefixes - Add icon frontmatter to all 162 MDX documentation pages - Deduplicate adjacent sidebar icons (e.g. Search/ListFilter, Brain/Bookmark) - Remove duplicate H1 headings from 154 MDX files (DocsTitle renders frontmatter) - Add frontmatter to 33 files that were missing it - Shorten overly long titles (agents, mcp, url_query) - Rewrite /docs/local cards from old Nextra syntax to Fumadocs Card components - Remove all emojis from Get Started and Features index pages - Collapse sidebar folders by default (defaultOpenLevel: 0) - Delete temporary debugging scripts, test specs, and screenshot artifacts - Fix eslint errors in mdx-components, nextra-shims, tailwind config, and error page - Update .gitignore to exclude test/debug artifacts * feat: enhance accessibility and improve UI components - Added aria-hidden attributes to social media icons in FooterMenu for better accessibility. - Updated FooterMenu to use <footer> element for semantic HTML. - Improved Carousel component by adding aria-labels to navigation buttons for better screen reader support. - Modified OptionTable to use a unique key for each row to prevent rendering issues. - Enhanced CredentialsGeneratorBox with aria-labels for input fields and buttons to improve accessibility. - Updated documentation to remove unnecessary links and improve clarity in various sections. - Fixed iframe attributes in documentation for better compatibility and accessibility. - Adjusted CSS variable for muted foreground color to improve contrast. - Updated package.json and pnpm-lock.yaml for dependency management and optimization. * feat: update FileComponent and FolderComponent to include new props for enhanced functionality * Add new AI provider icons and update documentation - Introduced new SVG icons for AI providers: TogetherAI, TrueFoundry, VLLM, Vultr, and XAI. - Updated existing AI endpoint documentation to reflect new icon names and improve clarity. - Replaced generic \Plug\ icons with specific provider icons for Anyscale, APIpie, Cloudflare, Cohere, Databricks, DeepSeek, Fireworks, Groq, Helicone, HuggingFace, LiteLLM, Mistral, MLX, Moonshot, NeuroChain, Ollama, OpenRouter, Perplexity, Portkey, ShuttleAI, and TrueFoundry. - Enhanced the icon resolution logic to include new icons in the icon registry. * feat: add DocsHub and QuickStartHub components for enhanced documentation navigation * feat: implement FeaturesHub component for enhanced feature navigation and update ViewOptions for improved links * feat: add fresh-build script for streamlined project setup and development * fix: update ESLint configuration and improve type handling in components - Added 'next.config.mjs' to ESLint ignore list. - Refactored version assignment in ChangelogPage for better type safety. - Removed unnecessary type casting in Author components for cleaner code. - Simplified BlogHeader component by removing redundant type assertions. - Added eslint-disable comments for unused variables in CardCompat and Nextra shims. * fix: update ViewOptions link for LibreChat to remove unnecessary submit parameter * feat: enhance HomePage layout and improve GitHub star display - Integrated HomeLayout component for better page structure. - Updated HeroSection to improve the presentation of GitHub stars with a new layout and styling. - Adjusted link attributes for better accessibility and user experience. * refactor: simplify title for Model Context Protocol (MCP) documentation - Changed the title from "Model Context Protocol (MCP)" to "MCP" for brevity. - Updated the description to clarify how LibreChat utilizes MCP for integration with external tools and services. * feat: enhance navigation styling and update HomeLayout props - Added a new background style for the navigation bar with a blur effect. - Updated HomeLayout component to include a transparent navigation mode for improved visual integration. * refactor: deprecate plugins in favor of agents and update related documentation - Removed references to plugins across various files, including the FeaturesHub and documentation. - Updated navigation redirects to point to agents instead of plugins. - Deleted the plugins documentation file to streamline content and reduce confusion. * feat: update demo images for improved visual representation --------- Co-authored-by: Danny Avila <danny@librechat.ai>
807 lines
30 KiB
Plaintext
807 lines
30 KiB
Plaintext
---
|
|
title: Docs Components Examples
|
|
icon: Code
|
|
description: Explore the various components available on the website that you can seamlessly incorporate into your contributions to the blog and documentation.
|
|
---
|
|
|
|
|
|
import {
|
|
ArrowRight,
|
|
ArrowUp,
|
|
SvgBox,
|
|
Brush,
|
|
SvgCards,
|
|
ChevronRight,
|
|
Close,
|
|
Cloud,
|
|
Code,
|
|
Diagram,
|
|
Dropper,
|
|
File,
|
|
Files,
|
|
SvgFolderTree,
|
|
Formula,
|
|
Gear,
|
|
Globe,
|
|
IdCard,
|
|
Lightning,
|
|
SvgLink,
|
|
Markdown,
|
|
Newsletter,
|
|
One,
|
|
Picture,
|
|
Rows,
|
|
Search,
|
|
Sort,
|
|
Stars,
|
|
SvgSwitch,
|
|
SvgTable,
|
|
Terminal,
|
|
Warning,
|
|
} from '@/components/svg'
|
|
|
|
import { Feature, Features } from '@/components/features'
|
|
|
|
## Carousel
|
|
|
|
<Tabs items={['Example', 'Code']}>
|
|
<Tabs.Tab>
|
|
<Carousel autoplay animationDuration="1500" perView="3">
|
|
<img
|
|
src="https://github.com/danny-avila/LibreChat/assets/32828263/9b260f59-6acc-4fac-83b9-9d123d6b4a35"
|
|
alt="Slide 1"
|
|
style={{ maxWidth: '75%', height: 'auto', borderRadius: '20px' }}
|
|
/>
|
|
<img
|
|
src="https://github.com/danny-avila/LibreChat/assets/32828263/d742c488-963a-4011-86f2-b6df184b70d1"
|
|
alt="Slide 2"
|
|
style={{ maxWidth: '75%', height: 'auto', borderRadius: '20px' }}
|
|
/>
|
|
<img
|
|
src="https://github.com/danny-avila/LibreChat/assets/32828263/5a338731-eb95-41ea-8327-f5e78b8cc157"
|
|
alt="Slide 3"
|
|
style={{ maxWidth: '75%', height: 'auto', borderRadius: '20px' }}
|
|
/>
|
|
</Carousel>
|
|
</Tabs.Tab>
|
|
|
|
<Tabs.Tab>
|
|
```tsx copy filename="carousel"
|
|
<Carousel autoplay animationDuration="1500" showBullets perView="3">
|
|
<img src="slide1.jpg" alt="Slide 1" />
|
|
<img src="slide2.jpg" alt="Slide 2" />
|
|
<img src="slide3.jpg" alt="Slide 3" />
|
|
</Carousel>
|
|
```
|
|
|
|
This example demonstrates how to use the `Carousel` component with the following props:
|
|
|
|
- `autoplay`: Enables autoplay for the carousel.
|
|
- `animationDuration="1500"`: Sets the animation duration to 1500 milliseconds.
|
|
- `showControls`: Shows the previous and next controls for the carousel.
|
|
- `showBullets`: Shows the bullet navigation for the carousel.
|
|
- `perView="3"`: Displays three slides at a time in the carousel.
|
|
|
|
Inside the `Carousel` component, you can place any content you want to display as slides. In this example, we're using `<img>` elements with source paths to `slide1.jpg`, `slide2.jpg`, and `slide3.jpg`.
|
|
|
|
</Tabs.Tab>
|
|
</Tabs>
|
|
|
|
## Callouts
|
|
|
|
<Tabs items={['Collapsible Callouts', 'Standard Callouts']}>
|
|
<Tabs.Tab>
|
|
<Tabs items={['Example', 'Code']}>
|
|
<Tabs.Tab>
|
|
|
|
<Callout type="other" title="undefined or unsupported type" emoji='💀'collapsible>
|
|
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.
|
|
|
|
</Callout>
|
|
|
|
<Callout type="default" title="default" collapsible>
|
|
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.
|
|
|
|
</Callout>
|
|
|
|
<Callout type="example" title="example" collapsible>
|
|
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.
|
|
|
|
</Callout>
|
|
|
|
<Callout type="note" title="note" collapsible>
|
|
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.
|
|
|
|
</Callout>
|
|
|
|
<Callout type="abstract" title="abstract" collapsible>
|
|
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.
|
|
|
|
</Callout>
|
|
|
|
<Callout type="info" title="info" collapsible>
|
|
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.
|
|
|
|
</Callout>
|
|
|
|
<Callout type="tip" title="tip" collapsible>
|
|
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.
|
|
|
|
</Callout>
|
|
|
|
<Callout type="success" title="success" collapsible>
|
|
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.
|
|
|
|
</Callout>
|
|
|
|
<Callout type="question" title="question" collapsible>
|
|
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.
|
|
|
|
</Callout>
|
|
|
|
<Callout type="warning" title="warning" collapsible>
|
|
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.
|
|
|
|
</Callout>
|
|
|
|
<Callout type="error" title="error" collapsible>
|
|
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.
|
|
|
|
</Callout>
|
|
|
|
<Callout type="danger" title="danger" collapsible>
|
|
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.
|
|
|
|
</Callout>
|
|
|
|
<Callout type="bug" title="bug" collapsible>
|
|
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.
|
|
|
|
</Callout>
|
|
|
|
<Callout type="quote" title="quote" collapsible>
|
|
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.
|
|
|
|
</Callout>
|
|
</Tabs.Tab>
|
|
<Tabs.Tab>
|
|
```tsx copy filename="callout"
|
|
<Callout type="success" title="title" emoji='🦆' collapsible>
|
|
- The type comes with a color scheme and default emoji
|
|
- "title" is optional
|
|
- "emoji" is optional
|
|
- "collapsible" is only added when the collapsible feature is wanted
|
|
</Callout>
|
|
```
|
|
</Tabs.Tab>
|
|
</Tabs>
|
|
</Tabs.Tab>
|
|
<Tabs.Tab>
|
|
<Tabs items={['Example', 'Code']}>
|
|
<Tabs.Tab>
|
|
|
|
{' '}
|
|
|
|
<Callout type="" title="undefined callout" emoji="💀">
|
|
undefined or unsupported `type` default to this color scheme
|
|
</Callout>
|
|
|
|
{' '}
|
|
|
|
<Callout type="default" title="default">
|
|
this is a default callout
|
|
</Callout>
|
|
|
|
{' '}
|
|
|
|
<Callout type="example" title="example">
|
|
this is a example callout
|
|
</Callout>
|
|
|
|
{' '}
|
|
|
|
<Callout type="note" title="note">
|
|
this is a note callout
|
|
</Callout>
|
|
|
|
{' '}
|
|
|
|
<Callout type="abstract" title="abstract">
|
|
this is a abstract callout
|
|
</Callout>
|
|
|
|
{' '}
|
|
|
|
<Callout type="info" title="info">
|
|
this is a info callout
|
|
</Callout>
|
|
|
|
{' '}
|
|
|
|
<Callout type="tip" title="tip">
|
|
this is a tip callout
|
|
</Callout>
|
|
|
|
{' '}
|
|
|
|
<Callout type="success" title="success">
|
|
this is a success callout
|
|
</Callout>
|
|
|
|
{' '}
|
|
|
|
<Callout type="question" title="question">
|
|
this is a question callout
|
|
</Callout>
|
|
|
|
{' '}
|
|
|
|
<Callout type="warning" title="warning">
|
|
this is a warning callout
|
|
</Callout>
|
|
|
|
{' '}
|
|
|
|
<Callout type="error" title="error">
|
|
this is a error callout
|
|
</Callout>
|
|
|
|
{' '}
|
|
|
|
<Callout type="danger" title="danger">
|
|
this is a danger callout
|
|
</Callout>
|
|
|
|
{' '}
|
|
|
|
<Callout type="bug" title="bug">
|
|
this is a bug callout
|
|
</Callout>
|
|
|
|
<Callout type="quote" title="quote">
|
|
this is a quote callout
|
|
</Callout>
|
|
</Tabs.Tab>
|
|
<Tabs.Tab>
|
|
```tsx copy filename="callout"
|
|
<Callout type="success" title="title" emoji='🦆'>
|
|
- The type comes with a color scheme and default emoji
|
|
- "title" is optional
|
|
- "emoji" is optional
|
|
- "collapsible" is only added when the collapsible feature is wanted
|
|
</Callout>
|
|
```
|
|
</Tabs.Tab>
|
|
</Tabs>
|
|
</Tabs.Tab>
|
|
</Tabs>
|
|
|
|
## Option Table
|
|
|
|
<Tabs items={['Example', 'Code']}>
|
|
<Tabs.Tab>
|
|
<OptionTable
|
|
options={[
|
|
['EXAMPLE', 'boolean', 'This is an example.','EXAMPLE=true'],
|
|
]}
|
|
/>
|
|
</Tabs.Tab>
|
|
|
|
<Tabs.Tab>
|
|
```mdx filename="Option Table"
|
|
<OptionTable
|
|
options={[
|
|
['EXAMPLE', 'boolean', 'This is an example.','EXAMPLE=true'],
|
|
]}
|
|
/>
|
|
```
|
|
</Tabs.Tab>
|
|
</Tabs>
|
|
|
|
## File Tree
|
|
|
|
<Tabs items={['Example','Code']}>
|
|
|
|
|
|
<Tabs.Tab>
|
|
|
|
<FileTree>
|
|
<FileTree.Folder name="src" defaultOpen>
|
|
<FileTree.File name="main.js" active />
|
|
<FileTree.Folder name="components">
|
|
<FileTree.File name="Header.js" />
|
|
<FileTree.File name="Footer.js" />
|
|
</FileTree.Folder>
|
|
</FileTree.Folder>
|
|
<FileTree.File name="package.json" />
|
|
</FileTree>
|
|
|
|
</Tabs.Tab>
|
|
|
|
<Tabs.Tab>
|
|
|
|
- `<FileTree.Folder>`: Represents a folder. It can hold nested Folder or File components.
|
|
- `<FileTree.File>`: Represents a file. This component only requires a name prop, which determines the file name displayed in the UI.
|
|
- `name`: This determines the name of the file or folder as displayed in the UI.
|
|
- `defaultOpen`: This shows the initial state of a Folder. If it is set to true, the Folder will be expanded when first rendered.
|
|
- `open`: If this prop is passed to a Folder, it will always be open regardless of user interaction. This is useful when you want to maintain certain sections of the file tree exposed.
|
|
- `active`: When this prop is used in a File, the file name will be highlighted. This is handy when you want to show users which file is currently active or selected.
|
|
|
|
```tsx copy filename="file-tree.tsx"
|
|
<FileTree>
|
|
<FileTree.Folder name="src" defaultOpen>
|
|
<FileTree.File name="main.js" active />
|
|
<FileTree.Folder name="components">
|
|
<FileTree.File name="Header.js" />
|
|
<FileTree.File name="Footer.js" />
|
|
</FileTree.Folder>
|
|
</FileTree.Folder>
|
|
<FileTree.File name="package.json" />
|
|
</FileTree>
|
|
```
|
|
|
|
[<span style={{ fontSize: '0.8rem' }}>Source Code ↗</span>](https://github.com/shuding/nextra/blob/main/packages/nextra/src/components/file-tree.tsx)
|
|
|
|
</Tabs.Tab>
|
|
</Tabs>
|
|
|
|
## Cards
|
|
|
|
<Tabs items={['Card Array', 'Single Card']}>
|
|
<Tabs.Tab>
|
|
<Tabs items={['Example', 'Code']}>
|
|
<Tabs.Tab>
|
|
|
|
<Cards>
|
|
<Cards.Card icon={<ArrowRight />} title="ArrowRight" href="/" />
|
|
<Cards.Card icon={<ArrowUp />} title="ArrowUp" href="/" />
|
|
<Cards.Card icon={<SvgBox />} title="SvgBox" href="/" />
|
|
<Cards.Card icon={<Brush />} title="Brush" href="/" />
|
|
<Cards.Card icon={<SvgCards />} title="SvgCards" href="/" />
|
|
<Cards.Card icon={<ChevronRight />} title="ChevronRight" href="/" />
|
|
<Cards.Card icon={<Close />} title="Close" href="/" />
|
|
<Cards.Card icon={<Cloud />} title="Cloud" href="/" />
|
|
<Cards.Card icon={<Code />} title="Code" href="/" />
|
|
<Cards.Card icon={<Diagram />} title="Diagram" href="/" />
|
|
<Cards.Card icon={<Dropper />} title="Dropper" href="/" />
|
|
<Cards.Card icon={<File />} title="File" href="/" />
|
|
<Cards.Card icon={<Files />} title="Files" href="/" />
|
|
<Cards.Card icon={<SvgFolderTree />} title="SvgFolderTree" href="/" />
|
|
<Cards.Card icon={<Formula />} title="Formula" href="/" />
|
|
<Cards.Card icon={<Gear />} title="Gear" href="/" />
|
|
<Cards.Card icon={<Globe />} title="Globe" href="/" />
|
|
<Cards.Card icon={<IdCard />} title="IdCard" href="/" />
|
|
<Cards.Card icon={<Lightning />} title="Lightning" href="/" />
|
|
<Cards.Card icon={<SvgLink />} title="Link" href="/" />
|
|
<Cards.Card icon={<Markdown />} title="Markdown" href="/" />
|
|
<Cards.Card icon={<Newsletter />} title="Newsletter" href="/" />
|
|
<Cards.Card icon={<One />} title="One" href="/" />
|
|
<Cards.Card icon={<Picture />} title="Picture" href="/" />
|
|
<Cards.Card icon={<Rows />} title="Rows" href="/" />
|
|
<Cards.Card icon={<Search />} title="Search" href="/" />
|
|
<Cards.Card icon={<Sort />} title="Sort" href="/" />
|
|
<Cards.Card icon={<Stars />} title="Stars" href="/" />
|
|
<Cards.Card icon={<SvgSwitch />} title="SvgSwitch" href="/" />
|
|
<Cards.Card icon={<SvgTable />} title="SvgTable" href="/" />
|
|
<Cards.Card icon={<Terminal />} title="Terminal" href="/" />
|
|
<Cards.Card icon={<Warning />} title="Warning" href="/" />
|
|
<Cards.Card icon="🚀  " title="Emoji" href="/" />
|
|
</Cards>
|
|
|
|
</Tabs.Tab>
|
|
<Tabs.Tab>
|
|
|
|
```tsx copy filename="Card Array"
|
|
import { Code } from '@/components/svg/'
|
|
;<Cards>
|
|
<Cards.Card icon={<Code />} title="Code" href="/" />
|
|
</Cards>
|
|
```
|
|
|
|
</Tabs.Tab>
|
|
</Tabs>
|
|
|
|
</Tabs.Tab>
|
|
<Tabs.Tab>
|
|
<Tabs items={['Example', 'Code']}>
|
|
<Tabs.Tab>
|
|
|
|
{' '}
|
|
|
|
<Cards.Card icon={<ArrowRight />} title="ArrowRight" href="/" />
|
|
<Cards.Card icon={<ArrowUp />} title="ArrowUp" href="/" />
|
|
<Cards.Card icon={<SvgBox />} title="SvgBox" href="/" />
|
|
<Cards.Card icon={<Brush />} title="Brush" href="/" />
|
|
<Cards.Card icon={<SvgCards />} title="SvgCards" href="/" />
|
|
<Cards.Card icon={<ChevronRight />} title="ChevronRight" href="/" />
|
|
<Cards.Card icon={<Close />} title="Close" href="/" />
|
|
<Cards.Card icon={<Cloud />} title="Cloud" href="/" />
|
|
<Cards.Card icon={<Code />} title="Code" href="/" />
|
|
<Cards.Card icon={<Diagram />} title="Diagram" href="/" />
|
|
<Cards.Card icon={<Dropper />} title="Dropper" href="/" />
|
|
<Cards.Card icon={<File />} title="File" href="/" />
|
|
<Cards.Card icon={<Files />} title="Files" href="/" />
|
|
<Cards.Card icon={<SvgFolderTree />} title="SvgFolderTree" href="/" />
|
|
<Cards.Card icon={<Formula />} title="Formula" href="/" />
|
|
<Cards.Card icon={<Gear />} title="Gear" href="/" />
|
|
<Cards.Card icon={<Globe />} title="Globe" href="/" />
|
|
<Cards.Card icon={<IdCard />} title="IdCard" href="/" />
|
|
<Cards.Card icon={<Lightning />} title="Lightning" href="/" />
|
|
<Cards.Card icon={<SvgLink />} title="Link" href="/" />
|
|
<Cards.Card icon={<Markdown />} title="Markdown" href="/" />
|
|
<Cards.Card icon={<Newsletter />} title="Newsletter" href="/" />
|
|
<Cards.Card icon={<One />} title="One" href="/" />
|
|
<Cards.Card icon={<Picture />} title="Picture" href="/" />
|
|
<Cards.Card icon={<Rows />} title="Rows" href="/" />
|
|
<Cards.Card icon={<Search />} title="Search" href="/" />
|
|
<Cards.Card icon={<Sort />} title="Sort" href="/" />
|
|
<Cards.Card icon={<Stars />} title="Stars" href="/" />
|
|
<Cards.Card icon={<SvgSwitch />} title="SvgSwitch" href="/" />
|
|
<Cards.Card icon={<SvgTable />} title="SvgTable" href="/" />
|
|
<Cards.Card icon={<Terminal />} title="Terminal" href="/" />
|
|
<Cards.Card icon={<Warning />} title="Warning" href="/" />
|
|
<Cards.Card icon="🚀  " title="Emoji" href="/" />
|
|
|
|
</Tabs.Tab>
|
|
<Tabs.Tab>
|
|
|
|
```tsx copy filename="Single Cards"
|
|
import { Code } from '@/components/svg/'
|
|
;<Cards.Card icon={<Code />} title="Code" href="/" />
|
|
```
|
|
|
|
</Tabs.Tab>
|
|
</Tabs>
|
|
|
|
</Tabs.Tab>
|
|
</Tabs>
|
|
|
|
{/* TODO: Button examples with onClick handlers need client component wrapping for Fumadocs.
|
|
These were Nextra interactive examples that are incompatible with Server Components. */}
|
|
|
|
## Default Button
|
|
|
|
Button examples with interactive handlers are not yet available in the Fumadocs migration.
|
|
See the original Nextra source for reference:
|
|
[Source Code](https://github.com/shuding/nextra/blob/main/packages/nextra/src/components/button.tsx)
|
|
|
|
## Features
|
|
|
|
<Tabs items={['Example', 'Code']}>
|
|
<Tabs.Tab>
|
|
<Features>
|
|
<Feature href="https://example.com">
|
|
This is a feature with a link.
|
|
</Feature>
|
|
<Feature medium lightOnly>
|
|
This is a medium "lightOnly" feature occupying two spaces.
|
|
</Feature>
|
|
<Feature large centered>
|
|
This is a large feature with "centered" attribute.
|
|
</Feature>
|
|
<Feature large>
|
|
|
|
</Feature>
|
|
</Features>
|
|
|
|
</Tabs.Tab>
|
|
|
|
<Tabs.Tab>
|
|
|
|
This example showcases the usage of the `<Features>` and `<Feature>` components for displaying feature sections. The `<Feature>` component can be customized with different props such as `href` for linking, `medium` or `large` for size, `lightOnly` for light mode only, and `centered` for centering the content.
|
|
|
|
The provided code includes a mix of Markdown content and the `<Features>` section. Inside the `<Features>` section, there are four `<Feature>` components with different configurations to demonstrate different use cases.
|
|
|
|
```tsx copy filename="features"
|
|
import { Feature, Features } from '@/components/features'
|
|
;<Features>
|
|
<Feature href="https://example.com">This is a feature with a link.</Feature>
|
|
<Feature medium lightOnly>
|
|
This is a medium "lightOnly" feature occupying two spaces.
|
|
</Feature>
|
|
<Feature large centered>
|
|
This is a large feature with "centered" attribute.
|
|
</Feature>
|
|
<Feature large></Feature>
|
|
</Features>
|
|
```
|
|
|
|
[<span style={{ fontSize: '0.8rem' }}>Source: ./components/features/</span>]()
|
|
|
|
</Tabs.Tab>
|
|
</Tabs>
|
|
|
|
## Simple Tabs
|
|
|
|
<Tabs items={['Example', 'Code']}>
|
|
<Tabs.Tab>
|
|
<Tabs items={['React', 'Vue', 'Angular']}>
|
|
<Tabs.Tab>
|
|
**React** is a JavaScript library for building user interfaces.
|
|
</Tabs.Tab>
|
|
<Tabs.Tab>
|
|
**Vue** is a progressive JavaScript framework for building user interfaces.
|
|
</Tabs.Tab>
|
|
<Tabs.Tab>
|
|
**Angular** is a platform for building mobile and desktop web applications.
|
|
</Tabs.Tab>
|
|
</Tabs>
|
|
</Tabs.Tab>
|
|
|
|
<Tabs.Tab>
|
|
```tsx copy filename="simple-tabs"
|
|
<Tabs items={['React', 'Vue', 'Angular']}>
|
|
<Tabs.Tab>
|
|
**React** is a JavaScript library for building user interfaces.
|
|
</Tabs.Tab>
|
|
<Tabs.Tab>
|
|
**Vue** is a progressive JavaScript framework for building user interfaces.
|
|
</Tabs.Tab>
|
|
<Tabs.Tab>
|
|
**Angular** is a platform for building mobile and desktop web applications.
|
|
</Tabs.Tab>
|
|
</Tabs>
|
|
```
|
|
[<span style={{ fontSize: '0.8rem' }}>Source Code ↗</span>](https://github.com/shuding/nextra/blob/main/packages/nextra/src/components/tabs.tsx)
|
|
</Tabs.Tab>
|
|
</Tabs>
|
|
|
|
---
|
|
|
|
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.
|
|
|
|
<Tabs items={['Example', 'Code']}>
|
|
<Tabs.Tab>
|
|
<Tabs items={['Fruit', 'Vegetable']}>
|
|
<Tabs.Tab>
|
|
<Tabs items={['Apple', 'Orange']}>
|
|
<Tabs.Tab>
|
|
Apple is a fruit.
|
|
</Tabs.Tab>
|
|
<Tabs.Tab>
|
|
Orange is a fruit.
|
|
</Tabs.Tab>
|
|
</Tabs>
|
|
</Tabs.Tab>
|
|
<Tabs.Tab>
|
|
<Tabs items={['Carrot', 'Broccoli']}>
|
|
<Tabs.Tab>
|
|
Carrot is a vegetable.
|
|
</Tabs.Tab>
|
|
<Tabs.Tab>
|
|
Broccoli is a vegetable.
|
|
</Tabs.Tab>
|
|
</Tabs>
|
|
</Tabs.Tab>
|
|
</Tabs>
|
|
</Tabs.Tab>
|
|
|
|
<Tabs.Tab>
|
|
```tsx copy filename="nested-tabs"
|
|
<Tabs items={['A', 'B']}>
|
|
<Tabs.Tab>
|
|
<Tabs items={['1a', '2a']}>
|
|
<Tabs.Tab>
|
|
**Content for 1a**
|
|
</Tabs.Tab>
|
|
<Tabs.Tab>
|
|
**Content for 2a**
|
|
</Tabs.Tab>
|
|
</Tabs>
|
|
</Tabs.Tab>
|
|
<Tabs.Tab>
|
|
<Tabs items={['1b', '2b']}>
|
|
<Tabs.Tab>
|
|
**Content for 1b**
|
|
</Tabs.Tab>
|
|
<Tabs.Tab>
|
|
**Content for 2b**
|
|
</Tabs.Tab>
|
|
</Tabs>
|
|
</Tabs.Tab>
|
|
</Tabs>
|
|
```
|
|
[<span style={{ fontSize: '0.8rem' }}>Source Code ↗</span>](https://github.com/shuding/nextra/blob/main/packages/nextra/src/components/tabs.tsx)
|
|
</Tabs.Tab>
|
|
</Tabs>
|
|
|
|
## Video
|
|
|
|
<Tabs items={['Example', 'Code']}>
|
|
<Tabs.Tab>
|
|
<video
|
|
muted
|
|
autoPlay
|
|
playsInline
|
|
controls
|
|
>
|
|
<source src="https://github.com/danny-avila/LibreChat/assets/32828263/0464f122-eb20-49cd-b201-57db50c57376" />
|
|
</video>
|
|
</Tabs.Tab>
|
|
|
|
<Tabs.Tab>
|
|
```tsx copy filename="video"
|
|
<video
|
|
muted
|
|
autoPlay
|
|
playsInline
|
|
controls
|
|
>
|
|
<source src="/videos/example.mp4" />
|
|
</video>
|
|
```
|
|
</Tabs.Tab>
|
|
</Tabs>
|
|
|
|
## Steps
|
|
|
|
<Tabs items={['Example','Code']}>
|
|
|
|
|
|
<Tabs.Tab>
|
|
|
|
<Steps>- Step 1: example - Step 2: example - Step 3: example - Step 4: example</Steps>
|
|
|
|
</Tabs.Tab>
|
|
|
|
<Tabs.Tab>
|
|
|
|
[<span style={{ fontSize: '0.8rem' }}>Source Code ↗</span>](https://github.com/shuding/nextra/blob/main/packages/nextra/src/components/steps.tsx)
|
|
|
|
```tsx copy filename="steps.tsx"
|
|
<Steps>- Step 1: example - Step 2: example - Step 3: example - Step 4: example</Steps>
|
|
```
|
|
|
|
</Tabs.Tab>
|
|
</Tabs>
|