Tile UI React
Source code

Examples

Profile Settings

An account settings panel using the same composition rules as product forms.

Profile settings

Update the details your teammates and collaborators see first.

import { Card, CardHeader, CardTitle, CardDescription, CardContent, Input, Label, CardFooter, Button } from '@tile-ui/react';

export default function ProfileSettingsDemo() {
	return (
		<Card>
			<CardHeader>

Install

pnpm dlx shadcn@latest add @tile-ui/card @tile-ui/label @tile-ui/input @tile-ui/button
  • card
  • label
  • input
  • button

Why this example exists

It shows how the primitives scale from a simple field to a richer settings surface, mixing labeled inputs with a standalone Label-driven field and footer actions.

PreviousNewsletter CardNextuseCopyToClipboard