Shadcn UI Cra

Overview:

The Shadcn UI Create React App Example is a project created by Ahmad Sandid that utilizes the Shadcn UI components and the Create-React-App framework. It provides a guide on how to install and run the project, as well as steps to create it from scratch. The project aims to showcase the capabilities and functionality of the Shadcn UI components.

Features:

• Shadcn UI components: The project utilizes the Shadcn UI components, which provide a set of ready-to-use React components for building user interfaces.
• Create-React-App: The project is built using the Create-React-App framework, which provides a solid foundation for developing React applications.
• Typescript: The project is set up with Typescript, allowing for static typing and improved code quality.
• Tailwind CSS integration: The project includes integration with Tailwind CSS, a utility-first CSS framework, allowing for easy styling and customization.
• Easy component installation: The project provides a command to easily add Shadcn UI components to the project.
• Development server and build scripts: The project includes scripts to run a development server, run tests, and build the application for production.

Installation:

To install and run the Shadcn UI Create React App Example, follow these steps:

1. Initialize the create-react-app project with Typescript:

npx create-react-app shadcn-ui-cra-example --template typescript

2. Install the following dependencies:

npm install shadcn-ui tailwindcss autoprefixer postcss-cli

3. Create a tailwind.config.js file and paste the following:

module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.js',
    './src/**/*.jsx',
    './src/**/*.ts',
    './src/**/*.tsx',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

4. Add the following to src/styles/index.css:

@import '../../node_modules/tailwindcss/base.css';
@import '../../node_modules/tailwindcss/components.css';
@import '../../node_modules/tailwindcss/utilities.css';

body {
  @apply bg-gray-100 text-gray-800 font-sans antialiased;
}

5. Edit your tsconfig.json to look like this:

{
  "compilerOptions": {
    "sourceMap": true,
    "noImplicitAny": true,
    "removeComments": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

6. Make a folder called “lib” and within it a file named “utils.ts”. In the end, its path can be referenced with “@/lib/utils.ts”. In this file, paste the following code:

export const capitalize = (str: string): string => {
  return str.charAt(0).toUpperCase() + str.slice(1);
};

7. To add the first Shadcn UI component, run the following command:

npx shadcn-ui add button

Edit the path command to be “./src/components/ui”.

8. Delete the App.css file and paste the following into your App.tsx:

import React from 'react';
import { Button } from '@/components/ui';

function App() {
  return (
    <div className="flex justify-center items-center h-screen">
      <Button>Hello Shadcn UI</Button>
    </div>
  );
}

export default App;

9. Start the app to view your project:

npm start

Summary:

The Shadcn UI Create React App Example is a demonstration of how to use Shadcn UI components in a Create-React-App project. It provides the necessary installation instructions and code snippets to get started with the project. The integration of Shadcn UI components, Create-React-App framework, and Tailwind CSS allows for easy and efficient development of user interfaces.