Registry Explorer
A powerful file explorer component that allows you to browse and view component files from your registry with syntax highlighting and interactive navigation
Preview
Installation
Install the registry explorer
npx shadcn@latest add https://jt-components.vercel.app/r/registry-explorer.jsonpnpm dlx shadcn@latest add https://jt-components.vercel.app/r/registry-explorer.jsonyarn dlx shadcn@latest add https://jt-components.vercel.app/r/registry-explorer.jsonbunx --bun shadcn@latest add https://jt-components.vercel.app/r/registry-explorer.jsonUsage
import RegistryExplorer from "@/components/registry-explorer"// Basic usage
<RegistryExplorer componentName="badge" />
// With custom styling and default file selection
<RegistryExplorer
componentName="tiptap"
className="border-2 border-dashed"
defaultSelectedFile="registry/tiptap/components/tiptap.tsx"
/>Source Code
Loading component...
Props
| Prop | Type | Default |
|---|---|---|
defaultSelectedFile? | string | - |
className? | string | - |
componentName | string | - |
Features
- Interactive File Tree: Navigate through component files with expandable folders
- Syntax Highlighting: View code with proper formatting and line numbers
- Auto-expand: Automatically expands all folders for easy navigation
- Copy to Clipboard: One-click copying of file contents
- Responsive Design: Adapts to different screen sizes with collapsible sidebar
- Loading States: Smooth loading indicators for better user experience
- Error Handling: Graceful error handling with helpful error messages
Examples
Exploring Different Components
// Explore a simple UI component
<RegistryExplorer componentName="badge" />
// Explore a complex component with multiple files
<RegistryExplorer componentName="tiptap" />
// Explore with a specific file pre-selected
<RegistryExplorer
componentName="mode-toggle"
defaultSelectedFile="registry/mode-toggle/components/theme-provider.tsx"
/>Custom Styling
<RegistryExplorer
componentName="logo"
className="h-[400px] border-primary/20 rounded-xl"
/>Last updated on