A collection of high-quality, accessible UI components built with React, TypeScript, and shadcn/ui. Components are designed to be composable, customizable, and ready for production use.
This repository hosts a curated set of UI components that extend the shadcn/ui ecosystem. All components follow shadcn's design principles:
- 🎨 Copy and paste - Components are yours to own and modify
- 🧩 Composable - Built with composition in mind
- ♿ Accessible - Built on Radix UI primitives
- 🎯 Type-safe - Full TypeScript support
- 🎨 Customizable - Styled with Tailwind CSS
- React 18+ or Next.js 13+ (App Router)
- Tailwind CSS configured
- shadcn/ui base components installed
Components can be installed via the shadcn CLI using their registry URLs:
# Install a component
npx shadcn@latest add https://ui.dylanspace.com/r/[component-name].jsonEach component has its own registry manifest that includes all necessary files, dependencies, and instructions.
A modular, composable component for selecting Vietnamese addresses with cascading combobox selectors and system toggle (old vs new administrative systems).
Install:
npx shadcn@latest add https://ui.dylanspace.com/r/vn-province-selectors.jsonFeatures:
- System toggle between old (with districts) and new (2025, wards only) systems
- Searchable comboboxes for all selectors
- Cascading selection logic
- React Context for flexible composition
- Fully customizable labels and behavior
More components coming soon!
ui-components/
├── app/ # Next.js app directory (demo site)
├── components/
│ └── ui/ # Base shadcn/ui components
├── registry/
│ ├── components/ # Component source files
│ ├── lib/ # Shared utilities and types
│ └── assets/ # Static assets (JSON data, etc.)
├── public/
│ └── r/ # Registry manifests (JSON files)
├── registry.json # Main registry index
└── components.json # shadcn/ui configuration
- Clone the repository:
git clone https://github.com/your-org/ui-components.git
cd ui-components- Install dependencies:
pnpm install- Run the development server:
pnpm dev- Build the registry:
pnpm registry:build- Create component files in
registry/components/ - Add shared utilities to
registry/lib/if needed - Add assets to
registry/assets/if required - Create a registry manifest in
public/r/[component-name].json - Add the component entry to
registry.json - Create component-specific documentation in
docs/[component-name].md - Update this README with the new component
Each component should follow this structure:
registry/
├── components/
│ └── [component-name]/
│ ├── [component-name].tsx # Main component
│ ├── [component-name]-provider.tsx # Context provider (if needed)
│ └── [component-name]-[sub].tsx # Sub-components
├── lib/
│ └── [component-name].ts # Utilities and types
└── assets/
└── [component-name]-data.json # Static data (if needed)
Each component needs a registry manifest JSON file in public/r/ that follows the shadcn registry schema:
{
"$schema": "https://ui.shadcn.com/schema/registry.json",
"name": "component-name",
"type": "registry:ui",
"title": "Component Title",
"description": "Component description",
"registryDependencies": ["button", "input"],
"dependencies": ["@radix-ui/react-dialog"],
"files": [
{
"path": "registry/components/component.tsx",
"type": "registry:ui"
}
]
}- General documentation: This README
- Component-specific docs: See
docs/directory
- React: 18+
- Next.js: 13+ (App Router) or React with proper path aliases
- TypeScript: 5+
- Tailwind CSS: 4+
- shadcn/ui: Base components installed
- Next.js - React framework
- React - UI library
- TypeScript - Type safety
- Tailwind CSS - Styling
- Radix UI - Accessible primitives
- shadcn/ui - Component system
Contributions are welcome! Please follow these guidelines:
- Follow the existing component structure and patterns
- Ensure all components are accessible and type-safe
- Include comprehensive documentation
- Add examples and demos in the app directory
- Update the registry manifest and this README
MIT
- Homepage: https://ui.dylanspace.com
- Registry: https://ui.dylanspace.com/r/registry.json