Using Shadcn UI

Shadcn UI is a modern component library for React that provides a set of reusable, customizable UI components designed to work seamlessly with Tailwind CSS. It offers a straightforward way to build beautiful and responsive user interfaces without sacrificing flexibility. In this blog post, we will explore how to set up Shadcn UI in your project and showcase some examples to help you get started.

What is Shadcn UI?

Shadcn UI is built with accessibility and usability in mind. It comes with pre-styled components that follow best practices for building responsive interfaces. The library is designed to be extensible, allowing developers to customize styles and behaviors easily. With Shadcn UI, you can focus on building your application without worrying about the intricacies of styling.

Setting Up Shadcn UI

To get started with Shadcn UI, you need to install it in your React project. You can do this by running the following command in your project directory:

npm install shadcn-ui

After installing the package, make sure to configure Tailwind CSS if you haven’t already. You can follow the official Tailwind CSS documentation for setup instructions.

Basic Usage of Shadcn UI

Let's take a look at how to use some of the basic components provided by Shadcn UI. In this example, we'll create a simple form using the library's components.

import React from 'react';
import { Button, Input, Label } from 'shadcn-ui';

const SimpleForm = () => {
  const handleSubmit = (event) => {
    event.preventDefault();
    // Handle form submission
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div>
        <Label htmlFor="username">Username</Label>
        <Input id="username" type="text" placeholder="Enter your username" />
      </div>
      <div>
        <Label htmlFor="email">Email</Label>
        <Input id="email" type="email" placeholder="Enter your email" />
      </div>
      <Button type="submit" className="bg-blue-500 text-white">Submit</Button>
    </form>
  );
};

export default SimpleForm;

Explaining the Code

In this example:

• We import the necessary components from Shadcn UI: Button, Input, and Label.
• We create a simple form that collects a username and email.
• The handleSubmit function handles form submission.
• Each input is wrapped with a Label for accessibility.

Styling Components

Shadcn UI components come with default styles, but you can easily customize them using Tailwind CSS classes. You can apply Tailwind utility classes directly to Shadcn UI components to adjust margins, paddings, colors, and more. Here’s an example of customizing the button:

<Button type="submit" className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
  Submit
</Button>

Creating a Modal with Shadcn UI

Modals are a common UI pattern, and Shadcn UI makes it easy to implement them. Below is an example of creating a modal component that can be opened and closed:

import React, { useState } from 'react';
import { Modal, Button } from 'shadcn-ui';

const ModalExample = () => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleModal = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div>
      <Button onClick={toggleModal} className="bg-blue-500 text-white">Open Modal</Button>
      <Modal isOpen={isOpen} onClose={toggleModal}>
        <h2 className="text-lg font-bold mb-4">My Modal</h2>
        <p>This is an example of a modal using Shadcn UI.</p>
        <Button onClick={toggleModal} className="bg-red-500 text-white">Close</Button>
      </Modal>
    </div>
  );
};

export default ModalExample;

Conclusion

Shadcn UI provides a modern and flexible way to build user interfaces in React applications. Its integration with Tailwind CSS makes styling components a breeze, allowing you to create beautiful and responsive layouts with ease. In this post, we covered the basics of setting up Shadcn UI, using its components, and customizing styles. Whether you're building simple forms or complex UIs, Shadcn UI is a great tool to enhance your development experience.

Explore the Shadcn UI documentation to learn more about its features and components, and start building amazing interfaces today!