---
title: "Ui Preview | MagicSync"
canonical_url: "https://magicsync.dev/fr/ui-preview"
locale: fr
meta:
  "og:title": "Ui Preview | MagicSync"
---

> Index of every page on this site: [llms.txt](https://magicsync.dev/llms.txt)

# **UI Components Preview **

Browse and preview all available UI components

Documentation related to Magic Sync here https://leamsigc.github.io/MagicSync/

### **Banner Promo**

BaseBannerPromo

Banner promo for other pages.

**Preview**

### **Beams**

BaseBeams

Dynamic Tyndall effect component with customizable streaks.

**Preview**

### **Benefits**

BaseBenefits

Benefits section component with icons and descriptions.

**Preview**

### **Blue Sky Comments**

BaseBlueSkyComments

Comments component for Blue Sky social platform.

**Preview**

### **Button**

BaseButton

Customizable button component.

**Preview**

### **Chart**

BaseChart

Interactive chart component using ECharts.

**Preview**

### **Comments**

BaseComments

Comments component for the application.

**Preview**

### **Community**

BaseCommunity

Community section with join links.

**Preview**

### **Contact**

BaseContact

Contact form section component.

**Preview**

### **Dashboard Overview Cards**

BaseDashboardOverviewCards

Dashboard overview with metrics and charts.

**Preview**

### **FAQ**

BaseFaq

Frequently asked questions accordion component.

**Preview**

### **Features**

BaseFeatures

Features section component with icons.

**Preview**

### **Header**

BaseHeader

Application header with navigation menu.

**Preview**

### **Hero**

BaseHero

Hero section component with image and actions.

**Preview**

### **Hero B**

BaseHeroB

Alternative hero component with different styling.

**Preview**

### **How It Works**

BaseHowItWorks

Step-by-step process component.

**Preview**

### **Not Found View**

BaseNotFoundView

404 error page component.

**Preview**

### **Pricing**

BasePricing

Pricing plans component.

**Preview**

### **Review Card**

BaseReviewCard

Testimonial card component.

**Preview**

### **Root Page**

BaseRootPage

Base root page component.

**Preview**

### **Services**

BaseServices

Services section component.

**Preview**

### **Shiny Card**

BaseShinyCard

Card with shiny hover effects.

**Preview**

### **Team**

BaseTeam

Team members showcase component.

**Preview**

### **Testimonials**

BaseTestimonials

Customer testimonials carousel.

**Preview**

### **Translation Menu**

BaseTranslationMenu

Locale selection component.

**Preview**

### **Tyndall Effect**

BaseTyndallEffect

Dynamic Tyndall effect component.

**Preview**

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://magicsync.dev/#website","@type":"WebSite","inLanguage":"fr-FR","name":"MagicSync - Social Media Management Made Easy","url":"https://magicsync.dev/","publisher":{"@id":"https://magicsync.dev/#identity"},"translationOfWork":{"@id":"https://magicsync.dev/#website"}},{"@id":"https://magicsync.dev/fr/ui-preview#webpage","@type":"WebPage","name":"Ui Preview","url":"https://magicsync.dev/fr/ui-preview","isPartOf":{"@id":"https://magicsync.dev/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://magicsync.dev/fr/ui-preview"]}],"primaryImageOfPage":{"@id":"https://magicsync.dev/#logo"}},{"@id":"https://magicsync.dev/#identity","@type":"Organization","name":"MagicSync","url":"https://magicsync.dev","logo":{"@id":"https://magicsync.dev/#logo"}},{"@id":"https://magicsync.dev/#logo","@type":"ImageObject","caption":"MagicSync","contentUrl":"https://magicsync.dev/img/logo.png","inLanguage":"fr-FR","url":"https://magicsync.dev/img/logo.png"}]}
```

## Sitemap

See the full [sitemap](https://magicsync.dev/sitemap.md) for all pages.