June 24, 2024

Keep React V1.4.0

Release Notes

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.


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">
        <AlertIcon />
        <AlertTitle>Alert here</AlertTitle>
        <AlertDescription>A short description followed by two actions items.</AlertDescription>
      <AlertLink href="/">Learn More</AlertLink>
      <AlertDismiss />

export default AlertComponent


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 {
} from 'keep-react'

const CarouselComponent = () => (
  return (
        {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>
          <CarouselPrevButton />
          <CarouselNextButton />
        <CarouselIndicators />

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

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.


This release was made possible by: