Latest articles

Efficient Web Development with Reusable Components: A Guide to Using Shadcn-UI

Estimated reading time: 0.5 min
blog image

When building web applications, efficiency and speed are crucial. This often involves reusing code across projects to save time and reduce bugs. Enter Shadcn-UI: not your traditional component library, but a collection of reusable components designed for quick copying and pasting into your Next.js projects. Here's how you can utilize these components to enhance your development workflow.

Introduction

Shadcn-UI stands apart from typical component libraries because it isn’t distributed via npm or installed as a dependency. Instead, it offers a set of accessible, customizable, and open-source UI components that developers can directly integrate into their applications.

Key Features:

  • No Installation Required: Simply copy and paste the components you need.
  • Fully Customizable: Adjust the components to suit your project's requirements.
  • Open Source: Modify and share the code without limitations.

Setting Up Your Project

1. Initialize Your Next.js Project

Start by creating a new Next.js project with TypeScript, Tailwind CSS, and ESLint configured:

npx create-next-app@latest my-app --typescript --tailwind --eslint

2. Configure Shadcn-UI

Set up your project with Shadcn-UI to incorporate predefined components:

npx shadcn-ui@latest init

During the setup, configure your components.json file based on your preferences for style and color:

Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Do you want to use CSS variables for colors? › yes

Integrating Fonts and Styling

Default Font Configuration:

Shadcn-UI uses Inter as the default font, but it can be replaced with any font of your choosing. Here’s how to configure Inter in your Next.js project:

Import the Font in Your Root Layout:

import "@/styles/globals.css"
import { Inter as FontSans } from "next/font/google"

const fontSans = FontSans({
subsets: ["latin"],
variable: "--font-sans",
});

export default function RootLayout({ children }) {
return (
<html lang="en" suppressHydrationWarning>
<head />
<body className={`min-h-screen bg-background font-sans antialiased ${fontSans.variable}`}>
{children}
</body>
</html>
);
}

Extend Tailwind CSS Configuration:

const { fontFamily } = require("tailwindcss/defaultTheme");

module.exports = {
darkMode: ["class"],
content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
theme: {
extend: {
fontFamily: {
sans: [`var(--font-sans)`, ...fontFamily.sans],
},
},
},
};

Application Structure

Organize your Next.js application using the following structure for clarity and maintainability:


├── app
│ ├── layout.tsx # Main layout file
│ └── page.tsx # Individual page
├── components
│ ├── ui # UI components like buttons, dialogs, etc.
│ │ ├── alert-dialog.tsx
│ │ ├── button.tsx
│ │ ├── dropdown-menu.tsx
│ │ └── ...
│ ├── main-nav.tsx # Main navigation component
│ ├── page-header.tsx # Header for pages
│ └── ...
├── lib
│ └── utils.ts # Utility functions
├── styles
│ └── globals.css # Global styles
└── (config files like next.config.js, tailwind.config.js, etc.)

Adding Components to Your Project

To add a Button component to your project, use the following command:

npx shadcn-ui@latest add button

Then, integrate it into your application:

import { Button } from "@/components/ui/button"

export default function Home() {
return (
<div>
<Button>Click me</Button>
</div>
);
}

Conclusion

Shadcn-UI provides a flexible and efficient way to build robust web applications with reusable components. By incorporating these components into your Next.js projects, you can significantly reduce development time and focus on creating unique features for your applications. Whether you're building a small project or a large-scale application, Shadcn-UI's approach to component reuse is an invaluable asset in your development toolkit.