diamant

✨ 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:

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

License

MIT © Vahan Gevorgyan

Made with ❤️ for the React community