# Dice UI

> Accessible, copy-paste shadcn-compatible React components with input masking support

Dice UI is an open-source React component collection built with TypeScript and Tailwind CSS, fully compatible with shadcn/ui. It extends standard component registries with specialized primitives, notably input fields that automatically format and mask values like phone numbers, dates, credit cards, and currencies.

Website: https://github.com/sadmann7/diceui

## What it is for

- Format telephone numbers and credit card inputs automatically as users type
- Format currency and percentage inputs to handle localized financial numbers
- Add pre-built accessible tables and advanced inputs into existing shadcn/ui setups

## Features

- Predefined input masking patterns for dates, credit cards, phones, and currency
- Full compatibility with shadcn/ui and custom registry installations
- Built with React, TypeScript, and Tailwind CSS
- Radix UI and Base UI primitive integrations for full accessibility (WAI-ARIA)
- Includes advanced components like data tables and data grids

## Pricing

Open source. Free (MIT License)

## Details

- Type: GitHub repo
- Category: [Development](https://xiry.app/topics/development.md)
- Topic: [UI Components](https://xiry.app/topics/development/ui-components.md)
- Open source: yes
- Platforms: Code library
- For: React and Next.js developers building form-heavy applications
- Alternative to: shadcn/ui, react-imask, react-number-format
- Tags: react, shadcn, tailwind, input mask, ui components, typescript

## Why it was saved

- [@alibey_10, 6 November 2025](https://x.com/alibey_10/status/1986525847663026508): Copy-paste shadcn-style input components that handle input masking/formatting out of the box, useful for any form-heavy product.

## Compare

- [Alternatives to shadcn/ui](https://xiry.app/alternatives/shadcn-ui.md)

## Related

- [shadcn/ui](https://xiry.app/resources/shadcn-ui-1902): Copy-paste React UI components built with Tailwind CSS and Radix primitives. (Website, Open source)
- [Efferd](https://xiry.app/resources/efferd): Pre-built, responsive shadcn/ui blocks and layouts for React applications (Web app, Freemium)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [React Bits](https://xiry.app/resources/react-bits): Open-source animated and interactive React UI components and backgrounds (Website, Freemium)
- [21st.dev](https://xiry.app/resources/21st-dev): Curated directory of crafted React, Tailwind, and shadcn UI components. (Website, Freemium)
- [lucide-animated](https://xiry.app/resources/lucide-animated): Open-source animated React icons built with Lucide and Motion (Web app, Open source)

Updated 10 October 2026. Page: https://xiry.app/resources/dice-ui

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.