React Custom UI Component Library

A project showcasing a custom-built UI component library for React. This library is built from scratch using TypeScript and Tailwind CSS, with a design philosophy and aesthetic inspired by the excellent work of shadcn/ui.

This is not a copy or fork of shadcn/ui, but rather a unique implementation that focuses on creating a cohesive, reusable, and well-documented set of foundational components.

Philosophy

• Composable: Components are designed to be composed together to build complex UIs. The asChild prop pattern is used where appropriate to provide maximum flexibility.
• Accessible: Accessibility is a priority. Components are built with ARIA attributes and keyboard navigation in mind.
• Customizable: Built on top of Tailwind CSS, the components are easily customizable to fit any design system. The use of CSS variables for theming makes global style changes trivial.
• Developer Experience: With TypeScript for type safety and TSDoc for documentation, the library is designed to be easy to use and maintain.

Tech Stack

• React
• TypeScript
• Tailwind CSS
• Class name utilities (clsx & tailwind-merge) for robust style composition.

Available Components

The library currently includes the following components:

• Accordion: A vertically stacked set of interactive headings that each reveal a section of content.
• Alert: A callout for user attention.
• Button: A versatile button with multiple variants and sizes.
• Card: A container for content and actions about a single subject.
• Checkbox: A control that allows the user to select one or more options.
• CodeBlock: A component for displaying formatted code with a copy-to-clipboard feature.
• Dialog: A modal window that appears on top of the main content.
• Form Elements: Includes Input, Textarea, Label, and Select.
• Icons: A collection of reusable SVG icons.
• Markdown: A component to render Markdown content with custom styling.
• Slider: A control for selecting a value from a range.
• Switch: A control to toggle between two states (on/off).
• Tabs: A set of layered sections of content, known as tab panels.
• ThemeToggle: A button to switch between light and dark modes.
• Tooltip: A popup that displays information related to an element when it's hovered.

Project Structure

The project is organized for clarity and scalability:

/
├── components/     # Reusable UI components
├── contexts/       # React Contexts (e.g., ThemeProvider)
├── lib/            # Core utility functions (e.g., cn)
├── App.tsx         # The main application, serving as a component showcase
├── index.html      # HTML entry point
├── index.tsx       # React entry point
└── README.md       # Project overview