dr-ui

Getting started

dr-ui is an open-source React component library that implements UI components, blocks, and chat functionality.

Introduction

dr-ui is a shadcn-based component registry that provides a collection of high-quality React components, blocks, hooks, and pages for building modern web applications. Built on top of Radix UI primitives and styled with Tailwind CSS, dr-ui offers a flexible and customizable component system that follows best practices for accessibility and developer experience.

Advantages of dr-ui

  • UI Components: A comprehensive set of reusable UI components including buttons, dropdown menus, headings, and more
  • Blocks: Pre-built component blocks like chat interfaces, chat inputs, and message components
  • Hooks: Custom React hooks such as use-chat for managing chat functionality
  • Chat Functionality: Complete chat interface components with message handling, input controls, and sidebar support
  • Internationalization: Built-in i18n support with multiple language locales
  • Theme Support: Flexible theming system with dark mode support
  • TypeScript: Fully typed components for better developer experience
  • Accessible: Built on Radix UI primitives ensuring accessibility standards

Getting Started

To start using dr-ui components in your project, you can add them using the shadcn CLI. Simply configure the registry in your components.json file and install components as needed. Check out the Installation guide for detailed setup instructions.

On this page