Timeline

Plan!
Before diving into coding, it is crucial to plan your software project thoroughly. This involves defining the project scope, setting clear objectives, and identifying the target audience. Additionally, creating a timeline and allocating resources appropriately will contribute to a successful development process.
Design
Designing your software involves creating a blueprint that outlines the structure, user interface, and functionality of your application. Consider user experience (UX) principles, wireframing, and prototyping to ensure an intuitive and visually appealing design.
Code
The coding phase involves translating your design into actual code. Choose a programming language and framework that aligns with your project requirements. Follow best practices, such as modular and reusable code, to enhance maintainability and scalability. Regularly test your code to identify and fix any bugs or errors.
Test
Thorough testing is essential to ensure the quality and reliability of your software. Implement different testing methodologies, including unit testing, integration testing, and user acceptance testing. This helps identify and rectify any issues before deploying the software.
Deploy
Once your software has passed rigorous testing, it's time to deploy it. Consider the deployment environment, whether it's on-premises or in the cloud. Ensure proper documentation and provide clear instructions for installation and configuration.
Done!

Installation

npx nyxbui@latest add timeline

Usage

import {
  Timeline,
  TimelineContent,
  TimelineDot,
  TimelineHeading,
  TimelineItem,
  TimelineLine,
} from "~/components/ui/timeline"

<Timeline>
  <TimelineItem status="done">
    <TimelineHeading>Plan!</TimelineHeading>
    <TimelineDot status="done" />
    <TimelineLine done />
    <TimelineContent>
      Before diving into coding, it is crucial to plan your software project
      thoroughly.
    </TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineHeading>Done!</TimelineHeading>
    <TimelineDot />
  </TimelineItem>
</Timeline>

Examples

Left Aligned

Plan!
Before diving into coding, it is crucial to plan your software project thoroughly. This involves defining the project scope, setting clear objectives, and identifying the target audience. Additionally, creating a timeline and allocating resources appropriately will contribute to a successful development process.
Design
Designing your software involves creating a blueprint that outlines the structure, user interface, and functionality of your application. Consider user experience (UX) principles, wireframing, and prototyping to ensure an intuitive and visually appealing design.
Code
The coding phase involves translating your design into actual code. Choose a programming language and framework that aligns with your project requirements. Follow best practices, such as modular and reusable code, to enhance maintainability and scalability. Regularly test your code to identify and fix any bugs or errors.
Test
Thorough testing is essential to ensure the quality and reliability of your software. Implement different testing methodologies, including unit testing, integration testing, and user acceptance testing. This helps identify and rectify any issues before deploying the software.
Deploy
Once your software has passed rigorous testing, it's time to deploy it. Consider the deployment environment, whether it's on-premises or in the cloud. Ensure proper documentation and provide clear instructions for installation and configuration.
Done!

Right Aligned

Plan!
Before diving into coding, it is crucial to plan your software project thoroughly. This involves defining the project scope, setting clear objectives, and identifying the target audience. Additionally, creating a timeline and allocating resources appropriately will contribute to a successful development process.
Design
Designing your software involves creating a blueprint that outlines the structure, user interface, and functionality of your application. Consider user experience (UX) principles, wireframing, and prototyping to ensure an intuitive and visually appealing design.
Code
The coding phase involves translating your design into actual code. Choose a programming language and framework that aligns with your project requirements. Follow best practices, such as modular and reusable code, to enhance maintainability and scalability. Regularly test your code to identify and fix any bugs or errors.
Test
Thorough testing is essential to ensure the quality and reliability of your software. Implement different testing methodologies, including unit testing, integration testing, and user acceptance testing. This helps identify and rectify any issues before deploying the software.
Deploy
Once your software has passed rigorous testing, it's time to deploy it. Consider the deployment environment, whether it's on-premises or in the cloud. Ensure proper documentation and provide clear instructions for installation and configuration.
Done!

Alternating

Plan!
Before diving into coding, it is crucial to plan your software project thoroughly. This involves defining the project scope, setting clear objectives, and identifying the target audience. Additionally, creating a timeline and allocating resources appropriately will contribute to a successful development process.
Design
Designing your software involves creating a blueprint that outlines the structure, user interface, and functionality of your application. Consider user experience (UX) principles, wireframing, and prototyping to ensure an intuitive and visually appealing design.
Code
The coding phase involves translating your design into actual code. Choose a programming language and framework that aligns with your project requirements. Follow best practices, such as modular and reusable code, to enhance maintainability and scalability. Regularly test your code to identify and fix any bugs or errors.
Test
Thorough testing is essential to ensure the quality and reliability of your software. Implement different testing methodologies, including unit testing, integration testing, and user acceptance testing. This helps identify and rectify any issues before deploying the software.
Deploy
Once your software has passed rigorous testing, it's time to deploy it. Consider the deployment environment, whether it's on-premises or in the cloud. Ensure proper documentation and provide clear instructions for installation and configuration.
Done!

With Lables

Plan!
Done (05/04/2024)
Before diving into coding, it is crucial to plan your software project thoroughly. This involves defining the project scope, setting clear objectives, and identifying the target audience. Additionally, creating a timeline and allocating resources appropriately will contribute to a successful development process.
Design
Failed (05/04/2024)
Designing your software involves creating a blueprint that outlines the structure, user interface, and functionality of your application. Consider user experience (UX) principles, wireframing, and prototyping to ensure an intuitive and visually appealing design.
Code
Current step
The coding phase involves translating your design into actual code. Choose a programming language and framework that aligns with your project requirements. Follow best practices, such as modular and reusable code, to enhance maintainability and scalability. Regularly test your code to identify and fix any bugs or errors.
Test
Next step
Thorough testing is essential to ensure the quality and reliability of your software. Implement different testing methodologies, including unit testing, integration testing, and user acceptance testing. This helps identify and rectify any issues before deploying the software.
Deploy
Deadline (05/10/2024)
Once your software has passed rigorous testing, it's time to deploy it. Consider the deployment environment, whether it's on-premises or in the cloud. Ensure proper documentation and provide clear instructions for installation and configuration.
Done!
Here everything ends