Content Components
Here are example renders of the Nuxt content components found in app/components/content, using the Nuxt Content MDC syntax:
These are basic examples. Some components may require specific props or slots to render correctly. Refer to the component's source code for detailed usage.
Benefits
::Benefits
---
list:
- icon: "blocks"
title: "Example Benefit 1"
description: "Description for example benefit 1."
- icon: "sparkle"
title: "Example Benefit 2"
description: "Description for example benefit 2."
---
#title
Our Amazing Benefits
#subtitle
Unlock Your Potential
#description
Discover how our features can transform your workflow.
::
Our Amazing Benefits
Unlock Your Potential
Discover how our features can transform your workflow.
01
Example Benefit 1
Description for example benefit 1.
02
Example Benefit 2
Description for example benefit 2.
BlogFeatured
::BlogFeatured
::
BlogHero
::BlogHero
::
BlogList
::BlogList
::
BlueSkyComment
::BlueSkyComment
---
thread:
post:
author:
handle: "example"
displayName: "Example User"
did: "did:plc:example"
record:
text: "This is an example comment."
createdAt: "2023-01-01T12:00:00Z"
uri: "at://did:plc:example/app.bsky.feed.post/example"
isReply: false
replies: []
---
::
BlueSkyComments
::BlueSkyComments
---
url: "https://bsky.app/profile/bsky.app/post/3jqn24234234"
---
#title
Discussion Section
#subtitle
Join the conversation!
::
Comments
::Comments
---
url: "https://bsky.app/profile/bsky.app/post/3jqn24234234"
---
::
Community
::Community
---
icon: "lucide:github"
url: "https://github.com/leamsigc"
label: "Join our GitHub"
---
#title
Become part of our
<span class="gradient-text">Developer Community</span>
#content
Connect with other developers, share your projects, and get support.
::
ConButton
::ConButton
---
variant: "default"
size: "lg"
---
Click Me
::
::div{class="container prose mx-auto py-24 sm:py-32"}`
Contact
::Contact
::
FAQ
::FAQ
---
list:
- question: "What is Nuxt?"
answer: "Nuxt is an open-source framework that makes web development simple and powerful."
value: "item-1"
- question: "How to install?"
answer: "You can install it via npm or yarn."
value: "item-2"
---
#title
Frequently Asked Questions
#subtitle
Your Questions Answered
::
::
Features
::Features
---
list:
- icon: "tabletSmartphone"
title: "Responsive Design"
description: "Adapts to any screen size."
- icon: "badgeCheck"
title: "High Performance"
description: "Optimized for speed."
---
#title
Key Features
#subtitle
Why Choose Us?
#description
Explore the powerful features that set our platform apart.
::
Hero
::Hero
---
badge:
label: New
content: Design is out
actions:
- label: Get Started
href: /register
icon: "lucide:arrow-right"
- label: Documentation
href: /docs
variant: outline
heroImage:
light: "img/hero-image-light.jpg"
dark: "img/hero-image-dark.jpg"
alt: "Dashboard using shadcn-vue and nuxt4"
---
#title
Experience the
<span class="gradient-text">Shadcn/Vue </span>
landing page
#description
We're more than just a tool, we're a community of passionate creators. Get
access to exclusive resources, tutorials, and support.
::
HeroB
::HeroB
---
#title
Our Awesome Blog
::
HowItWorks
::HowItWorks
---
list:
- badgeTitle: "Step 1"
title: "Sign Up Easily"
description: "Create your account in a few simple steps."
image: "roboto.png"
- badgeTitle: "Step 2"
title: "Configure Your Settings"
description: "Customize your preferences to get started."
image: "runner.png"
---
#title
Our Process
#subtitle
Simple Steps to Success
::
Marquee
::Marquee
---
pauseOnHover: true
vertical: false
repeat: 3
---
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
::
Navbar
::Navbar
::
NotFoundView
::NotFoundView
---
statusCode: 404
message: "Page Not Found"
---
::
Pricing
::Pricing
---
plans:
- title: "Basic"
popular: 0
price: 10
description: "Perfect for small teams."
buttonText: "Choose Basic"
benefitList:
- "5 Users"
- "10 GB Storage"
- title: "Pro"
popular: 1
price: 50
description: "Ideal for growing businesses."
buttonText: "Go Pro"
benefitList:
- "Unlimited Users"
- "100 GB Storage"
---
#title
Our Pricing Plans
#subtitle
Find the Perfect Plan for You
#description
Flexible pricing options to suit every need, from individuals to large enterprises.
::
ReviewCard
::ReviewCard
---
img: "https://i.pravatar.cc/250?img=60"
name: "Jane Doe"
username: "@janedoe"
body: "This product exceeded my expectations!"
---
::
Services
::Services
---
list:
- title: "Web Development"
description: "Building modern and responsive web applications."
pro: 0
- title: "Mobile App Development"
description: "Creating native and cross-platform mobile apps."
pro: 1
---
#title
Our Services
#subtitle
What We Offer
#description
Comprehensive solutions to help your business thrive in the digital age.
::
ShinyCard
::ShinyCard
---
showBg: true
---
### This is a Shiny Card
<p>Content goes here.</p>
::
Sponsors
::Sponsors
---
reviews:
- name: "Company A"
username: "@companya"
body: "Proud to sponsor this amazing project!"
img: "https://i.pravatar.cc/250?img=1"
- name: "Company B"
username: "@companyb"
body: "Supporting innovation and growth."
img: "https://i.pravatar.cc/250?img=2"
---
::
Team
::Team
---
list:
- imageUrl: "https://i.pravatar.cc/250?img=68"
firstName: "Alice"
lastName: "Smith"
positions: ["Lead Developer"]
socialNetworks:
- name: "Github"
url: "https://github.com/alice"
- imageUrl: "https://i.pravatar.cc/250?img=69"
firstName: "Bob"
lastName: "Johnson"
positions: ["UI/UX Designer"]
socialNetworks:
- name: "LinkedIn"
url: "https://linkedin.com/in/bob"
---
#title
Meet Our Team
#subtitle
The Visionaries Behind Our Success
::
Testimonials
::Testimonials
---
list:
- image: "https://github.com/shadcn.png"
name: "Client One"
userName: "CEO, Tech Solutions"
comment: "Absolutely fantastic product, highly recommend!"
rating: 5.0
- image: "https://github.com/shadcn.png"
name: "Client Two"
userName: "Founder, Innovate Co."
comment: "Transformed our business operations."
rating: 4.9
---
#title
What Our Clients Say
#subtitle
Trusted by Industry Leaders
::
TheFooter
::TheFooter
::
ToggleTheme
::ToggleTheme
::
TyndallEffect
::TyndallEffect
---
streak-color: "#00FF00"
---
### Content inside Tyndall Effect
<p>This area is affected by the visual effect.</p>
::
UiConfettiContainer
::UiConfettiContainer
---
confetti: "firework"
---
::
Explore by Region
Baden-WürttembergBayernBerlinBrandenburgBremenHamburgHessenNiedersachsenMecklenburg-VorpommernNordrhein-WestfalenRheinland-PfalzSaarlandSachsenSachsen-AnhaltSchleswig-HolsteinThüringen
Popular Categories
Buchhaltungsfirmen und SteuerdienstleistungenAesthetic MedicineLandwirtschaftliche Dienstleistungen und BetriebeAmerican GeschäfteArgentine GeschäfteAutoteile- und ZubehörgeschäfteAutoreparaturwerkstätten und MechanikerBrot, Gebäck und BackwarenlädenBuchläden, Musik und MedieneinzelhändlerCoffeeshops, Cafés und GetränkeausgabenNeu- und GebrauchtwagenhändlerReinigungs- und WartungsdienstleistungenBekleidungsgeschäfte, Boutiquen und ModeeinzelhändlerColombian GeschäfteComputer- und GerätereparaturdienstleistungenBaufirmen und AuftragnehmerUnternehmensberatung und BeratungsdienstleistungenZahnärzte und ZahnklinikenGroße Einzelhandelsgeschäfte mit mehreren AbteilungenElektriker und VerkabelungsdienstleistungenElektronische Geräte, Computer und HaushaltsgeräteUnterhaltungsstätten und EventdienstleistungenSchnellrestaurants und Fast-Food-KettenBanken, Finanzberater und InvestmentdienstleistungenFitnesszentren und FitnessstudiosSupermärkte und LebensmitteleinzelhändlerHair RestorationFriseursalons und SchönheitssalonsHaushaltsverbesserung, Möbel und GartenzubehörMedizinische Einrichtungen und GesundheitsdienstleisterHospitals & Clinics Unternehmen und DienstleistungenHotels, Motels und UnterkunftsdienstleistungenVersicherungsagenten und -maklerLatin American GeschäfteAnwaltskanzleien, Rechtsanwälte und RechtsberaterFertigung und IndustrieunternehmenFacharztpraxen und ÄrzteMediterranean GeschäfteMexican GeschäfteMezcaleria GeschäfteOnline GeschäftePeruvian GeschäfteHaustierpflege, Pflege und tiermedizinische DienstleistungenApotheken und DrogerienPlastic SurgerySanitär- und WassersystemdienstleistungenImmobilienmakler, Hausverwaltung und VermietungVollbedienungsrestaurantsBildungseinrichtungen und LernzentrenSchools & Education Unternehmen und DienstleistungenShop GeschäfteSoftware EngineeringSpa, Massage und WellnesszentrenSpezialitätengeschäfte und FeinkostlädenSportanlagen und FreizeitdienstleistungenTacos GeschäfteTapas GeschäfteTaxidienstleistungen und FahrgemeinschaftsunternehmenIT-Dienstleistungen, Softwareentwicklung und TechnologieberatungTransport- und LogistikdienstleistungenReiseplanung und BuchungsdienstleistungenBildungsdienstleistungen und BerufsausbildungTierkliniken und Veterinärkliniken