DOCSEARCHbyAlgolia
Submit Docs

shadcn-extension

repository·master·Indexed 23 days ago

https://github.com/belkacemyerfa/shadcn-extension

A Turborepo-managed monorepo for developing and sharing reusable UI components via the @shadx/cli and a specialized registry system. It provides a set of extended components including Breadcrumb, Carousel, DatetimePicker, and FileUploader, along with a CLI for project initialization and component installation.

Tokens
19.6K
Snippets
35
Records
103
Agent score
74%

What's inside shadcn-extension

  1. What is Shadcn extension?

    master

    Shadcn extension is an extension for the Shadcn/ui component library. It provides a set of higher-level components designed for common web application patterns, built directly on top of existing Shadcn/ui components.

    Key characteristics include:

    • Customizable: Designed to be easily adapted to your specific needs.
    • Easy to use: Components are designed for quick integration into web applications.
    • No installation required: Instead of installing a package, you use a Copy&Paste workflow. You simply copy the component code and ensure the underlying Shadcn/ui components it depends on are installed in your project.

  2. Use the @shadx/cli for component management

    master
    The @shadx/cli package provides a command-line interface designed to automate tasks like adding components to your project and setting up configurations. For specific command usage and detailed instructions, refer to the CLI-specific documentation located at packages/cli/README.md.

  6. Understand the difference between TreeView and TreeView-API

    master

    The Tree View provides two distinct approaches depending on your needs:

    1. tree-view component: A high-level wrapper built on top of tree-view-api.

      • Best for: Developers who want functionality out of the box.
      • Features: Includes Virtualization, Selection, Expand/Collapse, and Keyboard Navigation automatically.
      • Control: Provides full control over the UI while managing logic for you.

    2. tree-view-api component: A low-level primitive based on radix-ui-accordion.

      • Best for: Developers building highly custom tree structures.
      • Features: Gives you complete control over both the UI and the underlying functionality logic.

  8. Use the Timeline component

    master

    The Timeline component displays a list of events in chronological order. It is composed of several sub-components that allow you to define items, headings, dots, lines, and content.

    Component API

    • Timeline: The root container for the timeline.
    • TimelineItem: Represents a single event in the timeline. Supports a status prop (e.g., status="done").
    • TimelineHeading: The title or heading for a specific timeline item.
    • TimelineDot: The visual indicator (dot) for the event. Supports a status prop.
    • TimelineLine: The vertical line connecting the dots. Supports a done boolean prop.
    • TimelineContent: The descriptive text or body content for the event.
    import {
  Timeline,
  TimelineContent,
  TimelineDot,
  TimelineHeading,
  TimelineItem,
  TimelineLine,
} from "@/components/ui/timeline";

export default function TimelineDemo() {
  return (
    <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>
  );
}

  9. Initialize a new project with shadcn-extension

    master

    To use shadcn-extension in a new project, you must first initialize the standard shadcn-ui dependencies and then initialize the shadcn-extension CLI. This process sets up necessary dependencies, the cn utility, tailwind.config.js configurations, and CSS variables.

    Note: All type packages currently need to be installed manually.

  10. Clone and install the Shadcn Extension monorepo

    master

    To set up the development environment for the Shadcn Extension Turborepo, clone the repository and use pnpm to install all dependencies across the workspace.

    git clone https://github.com/BelkacemYerfa/shadcn-extension.git
cd shadcn-extension
pnpm install

  11. Install Smart DateTime Input

    master

    You can install the SmartDateTimeInput component using either the @shadx/cli or via manual installation.

    Using CLI (Recommended)

    Run the following command to add the component directly to your project:

    npx @shadx/cli add smart-datetime-input

    Manual Installation

    1. Install the base shadcn input component and the chrono-node dependency:
    npx shadcn@latest add input
npm i chrono-node
    1. Copy the component source code into your project files.

  12. Install the Tags Input component

    master

    You can install the TagsInput component using either the CLI or by manual installation.

    Using CLI (Recommended)

    Run the following command to add the component directly to your project:

    npx @shadx/cli add tags-input

    Manual Installation

    1. Ensure you have the badge component installed from shadcn/ui:
    npx shadcn-ui@latest add badge
    1. Copy the component source code into your project.
    2. Update the import paths to match your project's directory structure.