Components

Craft UI Components

Out of the box Craft UI comes with styled Typography, Layout components, a Nav component, and a Footer component.

The default components folder is laid out as follows:

components
├── craft
│   ├── layout.tsx
│   ├── section
│   │   ├── footer.tsx
│   │   ├── nav-menu.tsx
│   │   └── nav.tsx
│   └── theme
│       ├── theme-provider.tsx
│       └── theme-toggle.tsx
└── ui
    ├── button.tsx
    ├── dropdown-menu.tsx
    └── navigation-menu.tsx

Typography

The Typographic design of Craft UI comes from a modified version of Tailwind Typography the styles are mostly applied through the Tailwind CSS on the <Main /> component. There is also a <Article /> component that applies mostly the default Tailwind prose styles with a modified link design.

As long as your code is wrapped in the <Craft.Main></Craft.Main> then the Typographic styles will be applied automatically.

Layout Components

The layout components include a standardized Layout component, a Main component, a Section component, a Container component, and an Article component. These are based on the respective HTML elements.

The components are meant to give you a foundation of building pages and sections of pages for websites quickly to use the layout components simply import all the components as follows:

import * as Craft from "@/components/craft/layout";

Now, all of the components are available to use on your page. Learn more about each component below:

Layout Component

Purpose: Layout is a wrapper component for providing a consistent layout across different pages. It includes ThemeProvider and allows custom styling through class names.

Props:

• children: The content to be displayed within the layout.
• className: Optional custom class name for styling.

Usage:

<Layout className="custom-class">
  {/* Child components */}
</Layout>

Main Component

Purpose: Main is used for the primary content of a webpage. It provides styling for various text elements and is customizable through class names.

Props:

• children: The main content.
• className: Optional custom class name for styling.
• id: Optional ID for the main element.

Usage:

<Main className="custom-class" id="main-content">
  {/* Child components */}
</Main>

Section Component

Purpose: Section represents a standalone section within the document or application. It supports custom styling and identification through class names and IDs.

Props:

• children: The content of the section.
• className: Optional custom class name for styling.
• id: Optional ID for the section element.

Usage:

<Section className="custom-class" id="section-id">
  {/* Child components */}
</Section>

Container Component

Purpose: Container provides a centered container with maximum width and padding. It is useful for wrapping content to maintain consistent width and spacing.

Props:

• children: The content to be contained.
• className: Optional custom class name for styling.
• id: Optional ID for the container element.

Usage:

<Container className="custom-class" id="container-id">
  {/* Child components */}
</Container>

Article Component

Purpose: Article is used for wrapping article content, providing appropriate styling for text elements. It's customizable with class names.

Props:

• children: The article content.
• className: Optional custom class name for styling.
• id: Optional ID for the article element.

Usage:

<Article className="custom-class" id="article-id">
  {/* Child components */}
</Article>

Nav Component

Purpose: The Nav component is designed to create a navigation bar for a website. It features sticky positioning at the top of the page, customizable styling, and is composed of several elements, including a logo, navigation menu, and a 'Get Started' button.

Props:

• className: Optional custom class name for additional styling.
• children: Optional React nodes to be included in the navigation bar.
• id: Optional ID for the navigation element.

Usage:

<Nav className="custom-class" id="main-nav">
  {/* Additional content or links */}
</Nav>

Details:

• The navigation bar uses a sticky position at the top of the viewport.
• Includes a logo linked to the home page, a navigation menu, and a 'Get Started' button.
• Utilizes the cn function for conditional and combined classname handling.

Link Component (from Next.js)

Purpose: Used for client-side transitions between routes in a Next.js application. It's used in Nav to link the logo to the homepage and the 'Get Started' button to a specified URL.

Usage:

• For the logo link:

  <Link href="/">
    <Image src={Logo} alt="Logo" />
  </Link>

• For the 'Get Started' button:

  <Link href="https://github.com/9d8dev/craft">Get Started</Link>

Image Component (from Next.js)

Purpose: Optimizes images in a Next.js application. It's used in Nav for displaying the logo with appropriate dimensions and alternative text.

Usage:

<Image src={Logo} alt="Logo" width={72} height={48} />

NavMenu Component

Purpose: Represents the navigation menu within the Nav component. Provides a list of navigation links or items.

Usage:

<NavMenu />

Button Component

Purpose: A reusable button component, utilized in Nav for the 'Get Started' link.

Props:

• asChild: A prop to indicate that the button component will wrap another component or element, such as a link.

Usage:

<Button asChild>
  <Link href="https://github.com/9d8dev/craft">Get Started</Link>
</Button>

Footer Component

Purpose: The Footer component serves as the bottom section of a webpage, providing links to various pages, legal information, and social media links. It's designed to offer users additional navigation options and information about the site and its creators.

Structure:

• Logo and site description
• Social media and mode toggle buttons
• Navigation links organized in categories

Usage:

<Footer />

Details:

• Incorporates the Craft.Section and Craft.Container components for consistent styling and layout.
• Uses the Image component from Next.js to display the site's logo.
• Features a Balancer component for optimized text display.
• Includes ModeToggle for theme switching and Button components for social media links.
• Uses the Link component from Next.js for internal and external navigation.

Craft.Section and Craft.Container Components

Purpose: These components, imported from @/components/craft/layout, are used for structuring the layout within the footer.

Image Component (from Next.js)

Purpose: Used for displaying the site's logo in the footer.

Usage:

<Image src={Logo} alt="Logo" width={100} height={50} />

Balancer Component

Purpose: Provides optimized text display, ensuring a balanced layout and readability. Used for the site description in the footer.

Usage:

<Balancer>
  {/* Text content */}
</Balancer>

ModeToggle Component

Purpose: Allows users to toggle between different theme modes (e.g., light and dark modes).

Usage:

<ModeToggle />

Button Component

Purpose: Used for social media links in the footer. These buttons encapsulate Link components and icons from lucide-react.

Usage:

• For Github link:

  <Button variant="outline" asChild size="icon">
    <Link href={github_link}>
      <Github />
    </Link>
  </Button>

• For Twitter link:

  <Button variant="outline" asChild size="icon">
    <Link href={x_link}>
      <Twitter />
    </Link>
  </Button>

Link Component (from Next.js)

Purpose: Used for navigation within the footer, both for internal site links and external social media links.

Usage:

<Link href="/about">About</Link>

Navigation Links Data Structure

Purpose: A structured array (links) holding categorized navigation links used to dynamically generate link sections in the footer.

Details:

• Each object in the array represents a category with a title and an array of link objects.
• Each link object includes a title and an href attribute.