v1.4.0

[Arifulislam5577]

Keep React V1.4.0

Welcome to the latest release of Keep React! This version brings several improvements and updates to our components while maintaining the familiar UI look and feel.

Alert

The Alert component structure has been updated for better consistency. Here are the changes:

• Alert.Container is now AlertContainer
• Alert.Body is now AlertBody
• Alert.Dismiss is now AlertDismiss
• Alert.Link is now AlertLink
• Alert.Icon is now AlertIcon
• Alert.Title is now AlertTitle
• Alert.Description is now AlertDescription

import { Alert, AlertContainer, AlertDescription, AlertDismiss, AlertIcon, AlertLink, AlertTitle } from 'keep-react'

const AlertComponent = () => {
  return (
    <Alert color="primary">
      <AlertContainer>
        <AlertIcon />
        <AlertTitle>Alert here</AlertTitle>
        <AlertDescription>A short description followed by two actions items.</AlertDescription>
      </AlertContainer>
      <AlertLink href="/">Learn More</AlertLink>
      <AlertDismiss />
    </Alert>
  )
}

export default AlertComponent

Carousel

We have revamped the Carousel component structure. Here are the changes:

• Carousel.Control is now CarouselControl
• Carousel.Buttons is now CarouselButtons
• Carousel.Item is now CarouselItem
• Carousel.Slides is now CarouselSlides
• Carousel.Indicators is now CarouselIndicators
• Carousel.PrevButton is now CarouselPrevButton
• Carousel.NextButton is now CarouselNextButton

import {
  Carousel,
  CarouselButtons,
  CarouselControl,
  CarouselIndicators,
  CarouselItem,
  CarouselNextButton,
  CarouselPrevButton,
  CarouselSlides,
} from 'keep-react'

const CarouselComponent = () => (
  return (
    <Carousel>
      <CarouselSlides>
        {Array.from({ length: 5 }).map((_, index) => (
          <CarouselItem key={index}>
            <div className="flex items-center justify-center rounded-xl border border-metal-100 bg-primary-25 p-20 dark:border-metal-900 dark:bg-metal-900">
              <h1 className="text-heading-1 font-medium text-metal-900 dark:text-white">{index + 1}</h1>
            </div>
          </CarouselItem>
        ))}
      </CarouselSlides>
      <CarouselControl>
        <CarouselButtons>
          <CarouselPrevButton />
          <CarouselNextButton />
        </CarouselButtons>
        <CarouselIndicators />
      </CarouselControl>
    </Carousel>
  )
}

export default CarouselComponent

Card, Modal, Accordion, and More

Similarly, other components like Card, Modal, Accordion, and many more have undergone structural updates for consistency and clarity.

Updated Component List

• Accordion
• Alert
• Avatar
• Breadcrumb
• ButtonGroup
• Card
• Carousel
• Drawer
• Dropdown
• Empty
• Input
• Modal
• Navbar
• Notification
• Number Input
• Pagination
• Popover
• Progress
• Rating
• Sidebar
• Skeleton
• Slider
• Steps
• Table
• Tabs
• Timeline
• Upload

Dark Mode

With the release of Keep React v.1.4.0, dark mode is now available for all components. Enhance your user interface with this sleek new feature and provide a better experience for users who prefer darker themes.

Next Js Server and Client Component

Starting from this version, you can now use Keep components in our Next.js server components without the need for the "use client" directive. Even though our components are still client-side components, they can seamlessly integrate with Next.js server components, offering greater flexibility in your project architecture.

Contributors

This release was made possible by:

• Arifulislam5577

---

This discussion was created from the release v1.4.0.