Extend shadcn/ui with Additional Primitives, Utilities & Components

UI-X is an open-source collection of accessible and customizable UI components that extend the popular shadcn/ui framework.

It provides additional components you can copy and paste directly into your applications, maintaining the same philosophy and design patterns as the original library.

UI-X focuses on extending functionality with components that aren’t available in the core shadcn/ui library, while adhering to the same high standards of accessibility and customization.

GitHub Repo

DOCs

Features

🧩 Component Extension – Expands the shadcn/ui ecosystem with additional components not found in the core library

🎯 Consistent API Design – Mirrors Radix UI conventions for intuitive developer experience

🔄 Separation of Concerns – Primitive logic separated from styled counterparts for better code maintainability

🛠️ Customization Options – Extensive styling capabilities to match your application’s design system

🔌 Plug-and-Play Integration – Components designed to work seamlessly with existing shadcn/ui implementations

⚙️ Primitive Components – Includes primitive components where Radix UI doesn’t provide them

📱 Responsive Components – All components work across various screen sizes and devices

🔒 Accessibility Built-in – Components follow WCAG guidelines for accessible web applications

Use Cases

Data Visualization Tools – Construct interactive data displays using the timeline component and sortable utility for user-manipulated data presentations.
Enhanced Form Systems – Implement complex forms with specialized inputs like date pickers, dropzones, and password fields that provide better user experience than standard HTML inputs.
Administrative Dashboards – Build data-rich interfaces with components like calendars, timelines, and description lists to present information in structured, accessible ways.
File Management Interfaces – Create intuitive file upload and management interfaces using the dropzone and file list components.
Date-Focused Applications – Develop applications requiring date and time selection with the specialized date time field, range field, and picker components.

Primitives Included

Combobox
Date Time Field
Date Time Range Field
Date Picker
Dropzone
Password Input

Utilities Included

Sortable
Virtualizer

Components Included

Badge Group
Calendar
Combobox
Confirmer
Control Group
New
Date Field
Date Time Field
Date Time Range Field
Date Picker
Description List
Dropzone
File List
Input Base
Kbd
Native Select
Password Input
Time Field
Time
Timeline

Installation

Ensure you have shadcn/ui properly set up in your project by following the official Shadcn installation guide.
Use the updated shadcn CLI to install remote components via URL.
Select the specific component you need from UI-X repository.
Install the component using the shadcn CLI which will copy the component code into your project.
Import and use the component in your application as you would with native shadcn/ui components.

Usage

Here’s an example of how to use the Calendar component from UI-X:

"use client"
import * as React from "react"
import { Calendar } from "@/components/ui/calendar"
export function CalendarDemo() {
  const [date, setDate] = React.useState<Date | undefined>(new Date())
  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      className="rounded-md border shadow"
    />
  )
}

Related Resources

shadcn/ui: The base collection ui-x extends. Essential for understanding the core philosophy and installation. (https://ui.shadcn.com/)
Radix UI: Provides the unstyled, accessible primitives that underpin both shadcn/ui and ui-x. Understanding Radix helps customize components further. (https://www.radix-ui.com/)
Tailwind CSS: The utility-first CSS framework used for styling in shadcn/ui and ui-x. (https://tailwindcss.com/)

FAQs

Q: How is UI-X different from shadcn/ui?
A: UI-X is an extension of shadcn/ui that provides additional components not found in the core library. It follows the same design principles and API conventions but fills gaps with components like date pickers and dropzones that many applications need.

Q: Do I need to install shadcn/ui to use UI-X?
A: Yes, UI-X is an extension of shadcn/ui and requires the core library to be set up in your project before adding UI-X components.

Q: How do I customize UI-X components?
A: UI-X components follow the same customization patterns as shadcn/ui. They are copied directly into your project, allowing you to modify the source code and styling as needed.