1. Introduction
Base components are the core components that are used in the Nexus AI. They are used in other section or card components and can be used directly in the content. Think of them as the base building blocks of the website.
Base components are located in the components/base folder. There are about 37 base components in total.
Each component has props and slots to customize them. They are typically size, variant, label etc.
Here is the list of all the base components:
- Accordion
- BackgroundSpotlight
- BackgroundSpotlightWave
- Badge
- Breadcrumbs
- Button
- Container
- Divider
- DocsContentArticle
- DocsContentBody
- DocsContentDivider
- DocsContentFooter
- DocsContentHeader
- DocsContentPagination
- DocsGrid
- DocsSearchButton
- DocsSearchDialog
- DocsSidebar
- FeatureIcon
- FeaturesTable
- FooterLinks
- IconButton
- IntegSidebar
- Logo
- MenuButton
- NavBar
- NavItems
- NavLink
- SearchInput
- Section
- SectionHeader
- SidebarItem
- SocialLink
- SubscribeInput
- Tag
- TextArea
- TextInput
2. Usage
In the nuxt config, components/ directory is set to globally register and without path prefix. This means that you can directly use the components by its name.
Here is an example of Accordion and Divider components used in the FaqSection component:
<template v-for="(faq, index) in faqs">
<Divider v-if="index != 0" />
<Accordion :title="faq.question" :desc="faq.answer" />
</template>
To keep the DRY principle, base components are designed to be used in other components.