UI Components
Showcase of all Fumadocs UI components
UI Components
This page showcases all the UI components available in Fumadocs for creating beautiful documentation.
Callouts
Use callouts to highlight important information with different types:
Information
This is an info callout. Use it for general information or tips.
Warning
This is a warning callout. Use it to warn users about potential issues.
Error
This is an error callout. Use it to highlight critical errors or problems.
Success
This is a success callout. Use it to confirm successful operations.
Custom Callout
You can also create callouts without specifying a type for neutral information.
Cards
Cards are great for organizing related content and creating navigation sections:
Quick Start
Get up and running with Entity Auth in minutes
Follow our step-by-step guide to integrate authentication into your app.
Organizations
Multi-tenant authentication setup
Set up team-based authentication with role management.
Security
Best practices and security features
Understand Entity Auth's security model and recommendations.
Tabs
Organize content into tabbed sections for better readability:
import { EntityAuth } from '@entityauth/auth-client';
function App() {
const auth = new EntityAuth({
apiUrl: process.env.REACT_APP_API_URL,
});
return <div>React App with Entity Auth</div>;
}<template>
<div>Vue App with Entity Auth</div>
</template>
<script>
import { EntityAuth } from '@entityauth/auth-client';
export default {
name: 'App',
created() {
this.auth = new EntityAuth({
apiUrl: process.env.VUE_APP_API_URL,
});
}
};
</script>import { Component, OnInit } from '@angular/core';
import { EntityAuth } from '@entityauth/auth-client';
@Component({
selector: 'app-root',
template: '<div>Angular App with Entity Auth</div>'
})
export class AppComponent implements OnInit {
private auth: EntityAuth;
ngOnInit() {
this.auth = new EntityAuth({
apiUrl: environment.apiUrl,
});
}
}<script>
import { EntityAuth } from '@entityauth/auth-client';
const auth = new EntityAuth({
apiUrl: import.meta.env.VITE_API_URL,
});
</script>
<div>Svelte App with Entity Auth</div>Steps
Use steps to create sequential instructions:
Install the Package
First, install the Entity Auth client library:
npm install @entityauth/auth-clientConfigure the Client
Set up the Entity Auth client with your API URL:
import { EntityAuth } from '@entityauth/auth-client';
const auth = new EntityAuth({
apiUrl: 'https://your-api.com',
});Implement Authentication
Add login functionality to your application:
// Register a new user
await auth.register({
email: 'user@example.com',
password: 'secure-password'
});
// Login existing user
await auth.login({
email: 'user@example.com',
password: 'secure-password'
});Handle Sessions
Manage user sessions and authentication state:
// Get current session
const session = await auth.session.current();
// Logout user
await auth.logout();File Tree
Display file and folder structures clearly:
Accordions
Create expandable content sections:
Announcement
Use an inline callout for page-scoped announcements:
🎉 New Feature: Passkey authentication is now available! Learn more
Code Blocks
Enhanced code blocks with syntax highlighting:
import { EntityAuth } from '@entityauth/auth-client';
// Initialize the client
const auth = new EntityAuth({
apiUrl: process.env.API_URL,
});
// Example authenticated request using the client
await auth.login({ email: "user@example.com", password: "secret" });Combining Components
You can combine multiple components for rich documentation:
Authentication Flow
Security Features
All communications are encrypted and sessions are securely managed.
These components make it easy to create engaging and well-structured documentation. Mix and match them to create the perfect documentation experience for your users!