Shadcn Table: Tasks List with TypeScript

In the following lessons, we will fill our "Tasks" page with the full CRUD. Let's start with a table.

Table Component from Shadcn

Let's show the table of tasks. Remember, we had seeded it into the database previously:

React starter kit uses a React+Tailwind Shadcn UI library so you don't need to install it, it comes already pre-configured.

Generally, using Shadcn components is very easy:

1. Install the component with npx
2. Import it on top of your React file
3. Use it inside your React file return ( ) section

Here's the screenshot from the official Shadcn docs for Laravel.

Shadcn has many components:

For this example, we will use Table component, follow its documentation and apply it to our Tasks List page.

Shadcn components are installed with the...