@codefromscratch/cfs-ui v0.4.12

Code From Scratch UI Components

Custom component library for Code From Scratch UI projects.

Installation

npm install @codefromscratch/cfs-ui
# or
yarn add @codefromscratch/cfs-ui

Usage with Next.js

This library is optimized for Next.js 13+ with support for both Server and Client Components. TypeScript declaration files are included for all components.

Server Components (Default in Next.js)

For components that don't use client-side React features:

// In a Server Component (app/page.tsx)
import { SectionTitle } from "@codefromscratch/cfs-ui/server";

export default function Page() {
  return (
    <SectionTitle
      title="Welcome to our site"
      description="Discover our amazing services"
    />
  );
}

Client Components

For components that use client-side React features (like context, state, effects):

// In a Client Component
"use client";

import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from "@codefromscratch/cfs-ui/client";

export default function MyCarousel() {
  return (
    <Carousel>
      <CarouselContent>
        <CarouselItem>Slide 1</CarouselItem>
        <CarouselItem>Slide 2</CarouselItem>
        <CarouselItem>Slide 3</CarouselItem>
      </CarouselContent>
    </Carousel>
  );
}

Default Import (Not Recommended for Next.js)

You can still import everything from the main entry point, but this is not recommended for Next.js applications as it will include client-side code in your server components:

import { SectionTitle, Carousel } from "@codefromscratch/cfs-ui";

Available Components

Server Components

• SectionTitle - A title with optional description
• TextCard - A card with title and description
• Certificate - Certificate display component
• Copyright - Copyright notice component
• FooterLink - Link component for footers
• FooterNavList - Navigation list for footers
• IconRenderer - Component to render icons
• LegalLinks - Legal links component
• SocialMediaLinks - Social media links component
• TestimonialCard - Card for displaying testimonials

Client Components

• Carousel - Interactive carousel component
• Button - Button component with variants

Contributing

Please read our Contributing Guide for details on our code of conduct and the process for submitting pull requests.

License

This project is licensed under the MIT License - see the LICENSE file for details.