--- name: web_artifacts_builder router_kit: FullStackKit description: Guide for creating complex web artifacts with React, Tailwind, shadcn\/ui. metadata: skillport: category: development tags: [accessibility, api integration, backend, browser apis, client-side, components, css3, debugging, deployment, frameworks, frontend, fullstack, html5, javascript, libraries, node.js, npm, performance optimization, responsive design, seo, state management, testing, typescript, ui\/ux, web artifacts builder, web development] - artifacts --- # 🎨 Web Artifacts Builder > Guide for complex UI artifacts with React\/Tailwind\/shadcn. --- ## 📋 When To Use? | Use | Don't Use | | ------------------ | -------------- | | Multi-component UI | Simple HTML | | State management | Static content | | Routing required | Single page | | shadcn components | Vanilla CSS | --- ## 🔧 Temel Yapı ```tsx import React, { useState } from 'react'; import { Button } from '@\/components\/ui\/button'; import { Card } from '@\/components\/ui\/card'; export default function App() { const [count, setCount] = useState(0); return (