✨ Diamant

Beautiful React UI components, one command away

Add stunning, accessible UI components to your React and Next.js projects. Inspired by shadcn/ui — own your components, customize everything.

Live Demo • Getting Started • Components • Commands • Configuration

Getting Started

Get up and running in seconds with a single command:

npx diamant init

This will automatically:

• Detect or install Tailwind CSS
• Set up theme variables and animations
• Create the cn() utility function
• Generate diamant.json configuration

Adding Components

# Add specific components
npx diamant add button dialog card

# Add all components at once
npx diamant add --all

# Interactive picker (prompts you to select)
npx diamant add

Components

A carefully curated collection of 25+ accessible, customizable components:

| Component | Description | | -------------- | --------------------------------- | | accordion | Collapsible content sections | | alert | Static callout messages | | alertdialog | Modal confirmation dialogs | | avatar | User profile images with fallback | | badge | Small status indicators | | button | Click actions with ripple effect | | card | Content containers | | carousel | Image/content slideshows | | checkbox | Boolean form inputs | | dialog | Modal dialogs | | dropdown | Click/hover menus | | input | Text input fields | | label | Form labels | | notification | Toast notifications | | progress | Progress indicators | | radio | Single-select options | | select | Dropdown selection | | separator | Visual dividers | | sheet | Slide-in panels | | skeleton | Loading placeholders | | slider | Range inputs | | switch | Toggle switches | | tabs | Tabbed interfaces | | textarea | Multi-line inputs | | toggle | Two-state buttons | | tooltip | Hover information |

Commands

| Command | Description | | ------------------------------------ | ------------------------------------ | | npx diamant init | Initialize Diamant in your project | | npx diamant add [components...] | Add one or more components | | npx diamant remove <components...> | Remove installed components | | npx diamant update [components...] | Update components to latest versions | | npx diamant diff [component] | View local changes vs. original | | npx diamant list | List all available components |

Configuration

After running init, a diamant.json file is created in your project root:

{
    "typescript": true,
    "tailwind": {
        "config": "tailwind.config.js",
        "css": "src/app/globals.css"
    },
    "aliases": {
        "components": "src/components/ui",
        "utils": "src/lib"
    }
}

You can customize:

• TypeScript support — toggle .ts/.tsx or .js/.jsx output
• Tailwind paths — point to your config and global CSS files
• Component aliases — define where components and utilities live

Requirements

| Requirement | Version | | ------------ | ---------- | | Node.js | 18+ | | React | 18+ | | Tailwind CSS | 3.4+ or 4+ |

Contributing

Contributions are welcome! Feel free to:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT © Vahan Gevorgyan

Made with ❤️ for the React community