Introduction

What is Shadcn extension?

Shadcn extension is an extend for Shadcn/ui component library that provides a set of components for building web applications. It is built on top of Shadcn/ui.

Capabilities

Shadcn extension is a set of components that are built on top of Shadcn-ui . It extends the component that are provided by shadcn and use the one there to build some common component for the most web apps . It is built with the following goals in mind:

• Customizable: Shadcn extension is designed to be highly customizable. It provides a set of components that can be easily customized to fit your needs.
• Easy to use: Shadcn extension is designed to be easy to use. It provides a set of components that are easy to use and can be easily integrated into your web application.
• No need for installation: Shadcn extension does not require any installation. just Copy&Paste the code and install the shadcn/ui component that it uses.

Getting Started

To get started with shadcn extension, you need to have a basic understanding of ReactJs/NextJs and Tailwinds .You also need to have a basic understanding of Shadcn ui. If you are new to Shadcn-ui, you can check out the Shadcn/ui.

Installation

To install shadcn extension, you need to configure the shadcn/ui component that it uses. You can do this by following the instructions in the Shadcn/ui.

Usage

To use Shadcn extension, you need to Copy&Paste the components that you want to use from the shadcn extension . You can then use these components in your web application.

Example:

import React from "react";
import { BreadCrumb } from "@/component/extension/breadcrumb";
 
export const BreadCrumbTest = () => {
  return (
    <BreadCrumb variant="ghost">
      <BreadCrumbItem>Home</BreadCrumbItem>
      <BreadCrumbSeparator />
      <BreadCrumbItem>Settings</BreadCrumbItem>
      <BreadCrumbSeparator />
      <BreadCrumbItem>Info</BreadCrumbItem>
    </BreadCrumb>
  );
};

Contributing

If you would like to contribute to Shadcn extension, you can do so by following the instructions in the CONTRIBUTING.md guide.

In the end , I want to give a special thanks to shadcn for the amazing work that he did to build the shadcn/ui component, he's the one who inspired me to build this extension and I hope that it will help people shipping better web applications.