Development · GitHub repo
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.
What it's 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
- Topic
- UI Components
- 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: Copy-paste shadcn-style input components that handle input masking/formatting out of the box, useful for any form-heavy product.
Compare
Related
Copy-paste React UI components built with Tailwind CSS and Radix primitives.
Pre-built, responsive shadcn/ui blocks and layouts for React applications
Open-source animation library for React, Vue, and vanilla JavaScript
Open-source animated and interactive React UI components and backgrounds
Curated directory of crafted React, Tailwind, and shadcn UI components.
Open-source animated React icons built with Lucide and Motion
Updated