styling-with-shadcn

Name: styling-with-shadcn
Author: mjunaidca

29installs11forks

How to install styling-with-shadcn?

mjunaidca/mjs-agent-skills/styling-with-shadcn

$npx -y skills add mjunaidca/mjs-agent-skills --skill styling-with-shadcn

Installs into the current project.

Summary

Build beautiful, accessible UIs with shadcn/ui components in Next.js. Use when creating forms, dialogs, tables, sidebars, or any UI components. Covers installation, component patterns, react-hook-form + Zod validation, and dark mode setup. NOT when building non-React applications

Files · 1

View on GitHub

SKILL.md

1	# shadcn/ui
2
3	Build beautiful, accessible UIs with copy-paste components built on Radix UI and Tailwind CSS.
4
5	## Quick Start
6
7	```bash
8	# Initialize shadcn/ui in your Next.js project
9	npx shadcn@latest init
10
11	# Add components as needed
12	npx shadcn@latest add button form dialog table sidebar
13	```
14
15	## Common Component Install
16
17	```bash
18	npx shadcn@latest add button card form input label dialog \
19	table badge sidebar dropdown-menu avatar separator \
20	select textarea tabs toast sonner
21	```
22
23	---
24
25	## Core Patterns
26
27	### 1. Button Variants
28
29	```tsx
30	import { Button } from "@/components/ui/button"
31
32	<Button variant="default">Primary</Button>
33	<Button variant="secondary">Secondary</Button>
34	<Button variant="destructive">Delete</Button>
35	<Button variant="outline">Outline</Button>
36	<Button variant="ghost">Ghost</Button>
37
38	// Sizes: sm, default, lg, icon
39	<Button size="icon"><Plus /></Button>
40
41	// Loading state
42	<Button disabled>
43	<Loader2 className="mr-2 h-4 w-4 animate-spin" />
44	Loading...
45	</Button>
46
47	// As Next.js Link
48	<Button asChild>
49	<Link href="/dashboard">Go to Dashboard</Link>
50	</Button>
51	```
52
53	### 2. Forms with react-hook-form + Zod
54
55	```tsx
56	"use client"
57	import { zodResolver } from "@hookform/resolvers/zod"
58	import { useForm } from "react-hook-form"
59	import { z } from "zod"
60	import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
61
62	const schema = z.object({
63	title: z.string().min(1, "Required"),
64	priority: z.enum(["low", "medium", "high"]),
65	})
66
67	export function TaskForm({ onSubmit }) {
68	const form = useForm({
69	resolver: zodResolver(schema),
70	defaultValues: { title: "", priority: "medium" },
71	})
72
73	return (
74	<Form {...form}>
75	<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
76	<FormField
77	control={form.control}
78	name="title"
79	render={({ field }) => (
80	<FormItem>
81	<FormLabel>Title</FormLabel>
82	<FormControl>
83	<Input {...field} />
84	</FormControl>
85	<FormMessage />
86	</FormItem>
87	)}
88	/>
89	<Button type="submit">Submit</Button>
90	</form>
91	</Form>
92	)
93	}
94	```
95
96	See [references/component-examples.md](references/component-examples.md) for complete form with Select, Textarea.
97
98	### 3. Dialog / Modal
99
100	```tsx
101	import {
102	Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger
103	} from "@/components/ui/dialog"
104
105	<Dialog>
106	<DialogTrigger asChild>
107	<Button>Create Task</Button>
108	</DialogTrigger>
109	<DialogContent className="sm:max-w-[425px]">
110	<DialogHeader>
111	<DialogTitle>Create New Task</DialogTitle>
112	<DialogDescription>Add a new task to your project.</DialogDescription>
113	</DialogHeader>
114	<TaskForm onSubmit={handleSubmit} />
115	</DialogContent>
116	</Dialog>
117
118	// Controlled dialog
119	const [open, setOpen] = useState(false)
120	<Dialog open={open} onOpenChange={setOpen}>...</Dialog>
121	```
122
123	### 4. Alert Dialog (Confirmation)
124
125	```tsx
126	import {
127	AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
128	AlertDialogDescription, AlertDialogFooter, AlertDialogHeader,
129	AlertDialogTitle, AlertDialogTrigger
130	} from "@/components/ui/alert-dialog"
131
132	<AlertDialog>
133	<AlertDialogTrigger asChild>
134	<Button variant="destructive">Delete</Button>
135	</AlertDialogTrigger>
136	<AlertDialogContent>
137	<AlertDialogHeader>
138	<AlertDialogTitle>Are you sure?</AlertDialogTitle>
139	<AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
140	</AlertDialogHeader>
141	<AlertDialogFooter>
142	<AlertDialogCancel>Cancel</AlertDialogCancel>
143	<AlertDialogAction onClick={handleDelete}>Delete</AlertDialogAction>
144	</AlertDialogFooter>
145	</AlertDialogContent>
146	</AlertDialog>
147	```
148
149	### 5. Data Table (TanStack)
150
151	```tsx
152	import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"
153	import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
154
155	const columns: ColumnDef<Task>[] = [
156	{ accessorKey: "title", header: "Title" },
157	{
158	accessorKey: "status",
159	header: "Status",
160	cell: ({ row }) => <Badge>{row.getValue("status")}</Badge>,
161	},
162	]
163
164	const table = useReactTable({
165	data,
166	columns,
167	getCoreRowModel: getCoreRowModel(),
168	})
169	```
170
171	See [references/component-examples.md](references/component-examples.md) for full DataTable with sorting/pagination.
172
173	### 6. Card Component
174
175	```tsx
176	import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
177
178	<Card>
179	<CardHeader>
180	<CardTitle>{task.title}</CardT

People who liked this also viewed

6 picks

Type

styling-with-shadcn

29installs11forks

View on GitHub

How to install styling-with-shadcn?

mjunaidca/mjs-agent-skills/styling-with-shadcn

$npx -y skills add mjunaidca/mjs-agent-skills --skill styling-with-shadcn

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# shadcn/ui
2
3	Build beautiful, accessible UIs with copy-paste components built on Radix UI and Tailwind CSS.
4
5	## Quick Start
6
7	```bash
8	# Initialize shadcn/ui in your Next.js project
9	npx shadcn@latest init
10
11	# Add components as needed
12	npx shadcn@latest add button form dialog table sidebar
13	```
14
15	## Common Component Install
16
17	```bash
18	npx shadcn@latest add button card form input label dialog \
19	table badge sidebar dropdown-menu avatar separator \
20	select textarea tabs toast sonner
21	```
22
23	---
24
25	## Core Patterns
26
27	### 1. Button Variants
28
29	```tsx
30	import { Button } from "@/components/ui/button"
31
32	<Button variant="default">Primary</Button>
33	<Button variant="secondary">Secondary</Button>
34	<Button variant="destructive">Delete</Button>
35	<Button variant="outline">Outline</Button>
36	<Button variant="ghost">Ghost</Button>
37
38	// Sizes: sm, default, lg, icon
39	<Button size="icon"><Plus /></Button>
40
41	// Loading state
42	<Button disabled>
43	<Loader2 className="mr-2 h-4 w-4 animate-spin" />
44	Loading...
45	</Button>
46
47	// As Next.js Link
48	<Button asChild>
49	<Link href="/dashboard">Go to Dashboard</Link>
50	</Button>
51	```
52
53	### 2. Forms with react-hook-form + Zod
54
55	```tsx
56	"use client"
57	import { zodResolver } from "@hookform/resolvers/zod"
58	import { useForm } from "react-hook-form"
59	import { z } from "zod"
60	import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
61
62	const schema = z.object({
63	title: z.string().min(1, "Required"),
64	priority: z.enum(["low", "medium", "high"]),
65	})
66
67	export function TaskForm({ onSubmit }) {
68	const form = useForm({
69	resolver: zodResolver(schema),
70	defaultValues: { title: "", priority: "medium" },
71	})
72
73	return (
74	<Form {...form}>
75	<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
76	<FormField
77	control={form.control}
78	name="title"
79	render={({ field }) => (
80	<FormItem>
81	<FormLabel>Title</FormLabel>
82	<FormControl>
83	<Input {...field} />
84	</FormControl>
85	<FormMessage />
86	</FormItem>
87	)}
88	/>
89	<Button type="submit">Submit</Button>
90	</form>
91	</Form>
92	)
93	}
94	```
95
96	See [references/component-examples.md](references/component-examples.md) for complete form with Select, Textarea.
97
98	### 3. Dialog / Modal
99
100	```tsx
101	import {
102	Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger
103	} from "@/components/ui/dialog"
104
105	<Dialog>
106	<DialogTrigger asChild>
107	<Button>Create Task</Button>
108	</DialogTrigger>
109	<DialogContent className="sm:max-w-[425px]">
110	<DialogHeader>
111	<DialogTitle>Create New Task</DialogTitle>
112	<DialogDescription>Add a new task to your project.</DialogDescription>
113	</DialogHeader>
114	<TaskForm onSubmit={handleSubmit} />
115	</DialogContent>
116	</Dialog>
117
118	// Controlled dialog
119	const [open, setOpen] = useState(false)
120	<Dialog open={open} onOpenChange={setOpen}>...</Dialog>
121	```
122
123	### 4. Alert Dialog (Confirmation)
124
125	```tsx
126	import {
127	AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
128	AlertDialogDescription, AlertDialogFooter, AlertDialogHeader,
129	AlertDialogTitle, AlertDialogTrigger
130	} from "@/components/ui/alert-dialog"
131
132	<AlertDialog>
133	<AlertDialogTrigger asChild>
134	<Button variant="destructive">Delete</Button>
135	</AlertDialogTrigger>
136	<AlertDialogContent>
137	<AlertDialogHeader>
138	<AlertDialogTitle>Are you sure?</AlertDialogTitle>
139	<AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
140	</AlertDialogHeader>
141	<AlertDialogFooter>
142	<AlertDialogCancel>Cancel</AlertDialogCancel>
143	<AlertDialogAction onClick={handleDelete}>Delete</AlertDialogAction>
144	</AlertDialogFooter>
145	</AlertDialogContent>
146	</AlertDialog>
147	```
148
149	### 5. Data Table (TanStack)
150
151	```tsx
152	import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"
153	import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
154
155	const columns: ColumnDef<Task>[] = [
156	{ accessorKey: "title", header: "Title" },
157	{
158	accessorKey: "status",
159	header: "Status",
160	cell: ({ row }) => <Badge>{row.getValue("status")}</Badge>,
161	},
162	]
163
164	const table = useReactTable({
165	data,
166	columns,
167	getCoreRowModel: getCoreRowModel(),
168	})
169	```
170
171	See [references/component-examples.md](references/component-examples.md) for full DataTable with sorting/pagination.
172
173	### 6. Card Component
174
175	```tsx
176	import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
177
178	<Card>
179	<CardHeader>
180	<CardTitle>{task.title}</CardT

People who liked this also viewed

6 picks

Type