Back to articles
Mantine Has a Free React Component Library — 100+ Accessible Components with Built-In Dark Mode

Mantine Has a Free React Component Library — 100+ Accessible Components with Built-In Dark Mode

via Dev.to ReactAlex Spinov

Why Mantine? Mantine has 100+ components, 50+ hooks, dark mode, form management, and notifications — all accessible and customizable. No Tailwind needed. npm install @mantine/core @mantine/hooks Setup import { MantineProvider } from ' @mantine/core ' import ' @mantine/core/styles.css ' function App () { return ( < MantineProvider defaultColorScheme = " auto " > < YourApp /> < /MantineProvider > ) } Components import { Button , TextInput , Select , Modal , Notification , Table } from ' @mantine/core ' function Form () { return ( <> < TextInput label = " Email " placeholder = " your@email.com " required /> < Select label = " Role " data = {[ ' Admin ' , ' User ' , ' Guest ' ]} / > < Button variant = " filled " color = " blue " > Submit < /Button > < / > ) } Form Management import { useForm } from ' @mantine/form ' function LoginForm () { const form = useForm ({ initialValues : { email : '' , password : '' }, validate : { email : ( v ) => ( /^ \S +@ \S +$/ . test ( v ) ? null : ' Invalid

Continue reading on Dev.to React

Opens in a new tab

Read Full Article
5 views

Related Articles