Text Appear On Scroll

It is a very interactive way which will hook the user to read the entire message.

npx shadcn@latest add https://unicornspace-ui.vercel.app/r/text-appear-on-scroll.json

Simple News-Letters-Form

This section helps collecting the emails for newsletter or early signups with a clear and concise message.

npx shadcn@latest add https://unicornspace-ui.vercel.app/r/news-letters-form.json

News-Letters-Form

A clean newsletter form section with a compelling heading, brief description, and an input field for email subscription. Perfect for building your mailing list and staying connected with your audience.

npx shadcn@latest add https://unicornspace-ui.vercel.app/r/news-letters-form2.json

Profile

A profile section featuring a clear headshot, concise bio, key details about the user or product, and social links for easy connection. Perfect for building trust and showcasing personality or brand identity.

npx shadcn@latest add https://unicornspace-ui.vercel.app/r/profile.json

NewsLetter

A newsletter section with a catchy headline, a brief description, and an email subscription form. Perfect for engaging users and growing your mailing list effortlessly.

npx shadcn@latest add https://unicornspace-ui.vercel.app/r/news-letter1.json

CuisineSelector

npx shadcn@latest add https://unicornspace-ui.vercel.app/r/cuisine-selector.json

Source Code: CuisineSelector

Cards

A versatile card section featuring structured layouts with an image, heading, description, and optional buttons. Perfect for displaying information or content in a clean and organized format.

npx shadcn@latest add https://unicornspace-ui.vercel.app/r/card1.json

AvatarList

A collection of avatars displayed in a horizontal list with a title and optional description. Perfect for showcasing customers, team members, contributors, or user profiles in a visually appealing way.

npx shadcn@latest add https://unicornspace-ui.vercel.app/r/avatar-list.json

title: Ecommerce

description: An e-commerce section designed to showcase products. Perfect for encouraging purchases.

Carousel product

A carousel product section featuring interactive slides to display multiple products with high-quality images, descriptions, and a standout note for additional context or promotions.

npx shadcn@latest add https://unicornspace-ui.vercel.app/r/product-image-carousel.json

Detailed product view

A responsive, corousel product section featuring high quality images, description, cost breakdown of the product and a button helping the user proceed with the next step.

npx shadcn@latest add https://unicornspace-ui.vercel.app/r/product-section1.json

faq

description: The FAQ section is used to let the user know the frequently asked questions or concers related to the business.

Grid layout FAQ section

It is very simple, responsive, grid layout section highlighting the frequently asked questions and answers. It also contains a cool background color.

npx shadcn@latest add https://unicornspace-ui.vercel.app/r/faq1.json

Accordian faq

A responsive, minimalist and easy to understand faq section, answers are displayed when clicked on the question.

npx shadcn@latest add https://unicornspace-ui.vercel.app/r/faq2.json

Typography

This is very useful snippet to create typography for your project and reuse consistent typography.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply font-bold text-4xl;
  }
  h2 {
    @apply font-bold text-3xl;
  }
  h3 {
    @apply font-bold text-2xl border-b;
  }
  p {
    @apply text-sm;
  }
}

Shapes for easy access and icons

This is a very useful snippet to create shapes and icons for your project and use them in different places.

import { cn } from "@/lib/utils";

type Props = {
  className?: string;
};
export const Shapes = {
  CrownHappy: ({ className }: Props) => (
    <svg>

    </svg>
  ),
  Star_1: ({ className }: Props) => (
    <svg>
    </svg>
  ),
};

A dynamic logo with customizations

This logo is made to be customized with different props and can be used in different places with different styles.

import { cn } from "@/lib/utils";
import Image from "next/image";
import Link from "next/link";
import { Badge } from "./ui/badge";

const Logo = ({
  full = false,
  width = 100,
  height = 100,
  link = true,
  className,
  textClassName,
  isBeta = false,
}: {
  full?: boolean;
  link?: boolean;
  isBeta?: boolean;
  width?: number;
  height?: number;
  className?: string;
  textClassName?: string;
}) => {
  if (link)
    return (
      <Link
        href={"/"}
        className={cn("flex flex-col items-center justify-center", className)}
      >
        <Image
          src={"/logos/logo-black-256x256.png"}
          width={30}
          height={30}
          // alt="Unicorn Space UI logo"
          alt=""
          className="dark:hidden block"
        />
        <Image
          src={"/logos/logo-white-256x256.png"}
          width={30}
          height={30}
          alt=""
          className="hidden dark:block"
        />

        {full && (
          <h3 className={cn("font-medium text-2xl", textClassName)}>
            UnicornSpaceUI
          </h3>
        )}
      </Link>
    );
  else
    return (
      <div
        className={cn("flex flex-col items-center justify-center", className)}
      >
        <Image
          src={"/assets/logo-base-256x256.png"}
          width={width}
          height={height}
          alt="logo"
        />
        {full && <h2 className="font-medium text-2xl">FreelanceFlow</h2>}
        {isBeta && (
          <Badge variant={"secondary"} className="scale-[80%]">
            Beta
          </Badge>
        )}
      </div>
    );
};

export default Logo;

title: CTA Section description: A compelling CTA section is a prominent button to drive user action. Perfect for converting visitors into leads or customers.

Examples

Basic CTA Section

It contains very precise heading, description and a CTA button alongside visually appealing logo, image or SVG's.

npx shadcn@latest add https://unicornspace-ui.vercel.app/r/call-out-section.json

Bold CTA section

A clear and bold heading, with a description and buttons that will help converting the visitor.

npx shadcn@latest add https://unicornspace-ui.vercel.app/r/cta2.json

CTA with background effect

Minimalist and eye catching design with a clear message, that will help the user retain and understand the message.

npx shadcn@latest add https://unicornspace-ui.vercel.app/r/cta1.json

console.log('Hello World');

Fumadocs Framework: Docs Layout

URL: /docs/ui/layouts/docs Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/ui/layouts/docs.mdx

The layout of documentation

The layout of documentation pages, it includes a sidebar and mobile-only navbar.

It is a server component, you should not reference it in a client component.

Usage

Pass your page tree to the component.

import { DocsLayout } from 'fumadocs-ui/layouts/docs';
import { baseOptions } from '@/app/layout.config';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <DocsLayout {...baseOptions} tree={tree}>
      {children}
    </DocsLayout>
  );
}

Sidebar

import { DocsLayout } from 'fumadocs-ui/layouts/docs';

<DocsLayout
  sidebar={{
    enabled: true,
    // replace the default sidebar
    // component:
  }}
/>;

See Sidebar Links for customising sidebar items.

Nav

A mobile-only navbar, we recommend to customise it from baseOptions.

import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';

export const baseOptions: BaseLayoutProps = {
  githubUrl: 'https://github.com/fuma-nama/fumadocs',
  nav: {
    title: 'My App',
  },
};

Transparent Mode

To make the navbar background transparent, you can configure transparent mode.

import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';

export const baseOptions: BaseLayoutProps = {
  nav: {
    transparentMode: 'top',
  },
};

Replace Navbar

To replace the navbar in Docs Layout, set nav.component to your own component.

import { baseOptions } from '@/app/layout.config';
import { DocsLayout } from 'fumadocs-ui/layouts/notebook';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <DocsLayout
      {...baseOptions}
      nav={{
        component: <CustomNavbar />,
      }}
    >
      {children}
    </DocsLayout>
  );
}

Fumadocs uses CSS Variables to share the size of layout components, and fit each layout component into appropriate position.

You need to override --fd-nav-height to the exact height of your custom navbar, this can be done with a CSS stylesheet (e.g. in global.css):

:root {
  --fd-nav-height: 80px !important;
}

Advanced

Disable Prefetching

By default, it uses the Next.js Link component with prefetch enabled. When the link component appears into the browser viewport, the content (RSC payload) will be prefetched.

On Vercel, this may cause a high usage of serverless functions and Data Cache. It can also hit the limits of some other hosting platforms.

You can disable prefetching to reduce the amount of RSC requests.

import { DocsLayout } from 'fumadocs-ui/layouts/docs';

<DocsLayout sidebar={{ prefetch: false }} />;