Introduction

A collection of reusable UI components and blocks built with React, TypeScript, and Tailwind CSS

Welcome to our component library! This is a curated collection of high-quality, accessible UI components and blocks that you can copy and paste into your applications.

What's Included

Our library provides everything you need to build modern web applications:

UI Components

  • Badge - Display status, categories, or labels with multiple color variants
  • Logo - Responsive logo component with icon and text
  • Mode Toggle - Dark/light theme switcher with system preference support
  • Open in v0 Button - Direct integration with v0.dev for rapid prototyping

Rich Text Editing

  • WYSIWYG Editor - Full-featured text editor built with Tiptap, including toolbar, bubble menu, and syntax-highlighted code blocks

Developer Tools

  • Registry Explorer - Interactive file browser for exploring component source code with syntax highlighting

Installation

All components are designed to work seamlessly with the shadcn/ui ecosystem. You can install any component using the shadcn CLI:

npx shadcn@latest add https://jt-components.vercel.app/r/[component-name]

Features

  • Multiple Variants - Each component comes with thoughtfully designed variants
  • Dark Mode Ready - Full support for light and dark themes
  • Accessible - Built with accessibility best practices
  • Responsive - Mobile-first design approach
  • Type Safe - Full TypeScript support with proper prop definitions
  • Customizable - Easy to customize with Tailwind CSS
  • Copy & Paste - No package installations required

Technology Stack

  • React 19 - Latest React with modern patterns
  • TypeScript - Full type safety
  • Tailwind CSS - Utility-first styling
  • Radix UI - Accessible component primitives
  • Next.js 15 - Framework for production-ready apps
  • Tiptap - Rich text editing capabilities

Getting Started

Browse Components

Explore our collection of UI components

View Source Code

Inspect component implementations

Try the Editor

Experience our rich text editor

Open in v0

Rapid prototyping integration

Philosophy

This component library follows these core principles:

  • Quality over Quantity - Each component is carefully crafted and thoroughly tested
  • Developer Experience - Simple APIs with comprehensive documentation
  • Flexibility - Components that adapt to your design system
  • Performance - Optimized for speed and bundle size
  • Accessibility - WCAG compliant by default

Ready to build something amazing? Start by exploring our components or jump right into the code with our Registry Explorer.

Last updated on