Input
Text inputs with built-in focus ring, placeholder styling, and proper accessibility attributes.
import { Input } from "@viewrefine/ui";
<Input placeholder="Default input..." />
<Input placeholder="Disabled input..." disabled />
<Input type="email" placeholder="email@example.com" />
Badge
Compact status indicators for labels, tags, and counters.
Stable
TypeScript
Beta
Deprecated
import { Badge } from "@viewrefine/ui";
<Badge color="green">Stable</Badge>
<Badge color="blue">TypeScript</Badge>
<Badge color="orange">Beta</Badge>
<Badge color="red">Deprecated</Badge>
Card
Flexible content containers with header, body, and action areas.
Component Card
A flexible content container with built-in padding and border styling for grouping related elements.
import { Card } from "@viewrefine/ui";
<Card>
<Card.Header>Component Card</Card.Header>
<Card.Body>A flexible content container...</Card.Body>
<Card.Footer>
<Button>Learn More</Button>
</Card.Footer>
</Card>
Alert
Contextual feedback messages for user actions and system status.
Component refined successfully.
Design tokens not found. Using defaults.
Failed to parse input. Check your file format.
import { Alert } from "@viewrefine/ui";
<Alert type="success">Component refined successfully.</Alert>
<Alert type="warning">Design tokens not found.</Alert>
<Alert type="error">Failed to parse input.</Alert>
Tabs
Tabbed navigation for switching between content panels.
Tab content panel. Switch between Preview, Code, and Props views.
import { Tabs, TabPanel } from "@viewrefine/ui";
<Tabs defaultValue="preview">
<Tabs.List>
<Tabs.Trigger value="preview">Preview</Tabs.Trigger>
<Tabs.Trigger value="code">Code</Tabs.Trigger>
</Tabs.List>
<TabPanel value="preview">...</TabPanel>
</Tabs>