Data Display Components

Tables, cards, badges, accordions, avatars, carousels, charts, and utility display components.

Components for presenting structured data and content. Most support the crystallization prop for personality-responsive styling.

Badge

Inline status label with variant and crystallization support.

import { Badge } from '@artasce/crystal-ui';

<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Error</Badge>
<Badge variant="outline">Outline</Badge>

Badge

variant

children

<Badge />

Badge Props (Crystal additions)

Token	Variable	Value	Description
`variant`	`'default' \| 'secondary' \| 'destructive' \| 'outline'`	'default'	Visual style
`crystallization`	`CrystalCrystallization`	—	Override crystallization
`asChild`	`boolean`	false	Merge props onto child

Values update live with theme changes. Click any row to copy the CSS variable.

Uses calc(var(--radius)*0.75) for slightly tighter radius than buttons.

Card (shadcn)

Structured content card with header, content, and footer slots. For Crystal-native cards, see CrystalCard.

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@artasce/crystal-ui';

<Card>
  <CardHeader>
    <CardTitle>Notifications</CardTitle>
    <CardDescription>You have 3 unread messages.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card content here.</p>
  </CardContent>
  <CardFooter>
    <Button>View All</Button>
  </CardFooter>
</Card>

Table

Data table with header, body, footer, and caption.

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@artasce/crystal-ui';

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Diamond</TableCell>
      <TableCell><Badge>Active</Badge></TableCell>
    </TableRow>
  </TableBody>
</Table>

Also exports: TableCaption, TableFooter.

Accordion

Collapsible content sections. Single or multiple mode.

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@artasce/crystal-ui';

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>What is Crystal?</AccordionTrigger>
    <AccordionContent>A two-axis design system with themes and crystallizations.</AccordionContent>
  </AccordionItem>
</Accordion>

Avatar

User avatar with image and fallback initials.

import { Avatar, AvatarImage, AvatarFallback } from '@artasce/crystal-ui';

<Avatar>
  <AvatarImage src="/avatar.jpg" alt="User" />
  <AvatarFallback>AC</AvatarFallback>
</Avatar>

Carousel

Multi-item slider powered by embla-carousel-react.

import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from '@artasce/crystal-ui';

<Carousel>
  <CarouselContent>
    <CarouselItem>Slide 1</CarouselItem>
    <CarouselItem>Slide 2</CarouselItem>
    <CarouselItem>Slide 3</CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Chart

Recharts integration with Crystal theming via ChartConfig.

import { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent } from '@artasce/crystal-ui';
import type { ChartConfig } from '@artasce/crystal-ui';

const config: ChartConfig = {
  views: { label: 'Page Views', color: 'var(--crystal-color-crystal-accent-primary)' },
  clicks: { label: 'Clicks', color: 'var(--crystal-color-crystal-accent-secondary)' },
};

<ChartContainer config={config}>
  <BarChart data={data}>
    <Bar dataKey="views" />
    <ChartTooltip content={<ChartTooltipContent />} />
    <ChartLegend content={<ChartLegendContent />} />
  </BarChart>
</ChartContainer>

Also exports: ChartStyle.

Skeleton

Loading placeholder with pulse animation.

import { Skeleton } from '@artasce/crystal-ui';

<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-12 w-12 rounded-full" />

Collapsible

Expandable section without the accordion chrome.

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@artasce/crystal-ui';

<Collapsible>
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  <CollapsibleContent>Hidden content</CollapsibleContent>
</Collapsible>

Item

Flexible list item with media, content, and action slots. Useful for contact lists, file browsers, or notification feeds.

import { Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions } from '@artasce/crystal-ui';

<Item>
  <ItemMedia><Avatar>...</Avatar></ItemMedia>
  <ItemContent>
    <ItemTitle>John Doe</ItemTitle>
    <ItemDescription>Product Designer</ItemDescription>
  </ItemContent>
  <ItemActions><Button size="sm">View</Button></ItemActions>
</Item>

Also exports: ItemGroup, ItemSeparator, ItemHeader, ItemFooter.

Empty

Empty state placeholder with media, title, and description slots.

import { Empty, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from '@artasce/crystal-ui';

<Empty>
  <EmptyMedia><InboxIcon className="size-12 text-muted-foreground" /></EmptyMedia>
  <EmptyTitle>No messages</EmptyTitle>
  <EmptyDescription>Your inbox is empty.</EmptyDescription>
  <EmptyContent><Button>Compose</Button></EmptyContent>
</Empty>

Utility Components

Kbd

Keyboard shortcut indicator.

import { Kbd } from '@artasce/crystal-ui';

<Kbd>Ctrl</Kbd> + <Kbd>K</Kbd>

Separator

Horizontal or vertical divider line.

import { Separator } from '@artasce/crystal-ui';

<Separator />
<Separator orientation="vertical" className="h-6" />

AspectRatio

Maintains a fixed aspect ratio for child content.

import { AspectRatio } from '@artasce/crystal-ui';

<AspectRatio ratio={16 / 9}>
  <img src="/landscape.jpg" className="object-cover w-full h-full" />
</AspectRatio>

Import All

import {
  Badge,
  Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter,
  Table, TableHeader, TableBody, TableRow, TableHead, TableCell,
  Accordion, AccordionItem, AccordionTrigger, AccordionContent,
  Avatar, AvatarImage, AvatarFallback,
  Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext,
  ChartContainer, ChartTooltip, ChartTooltipContent,
  Skeleton, Collapsible, CollapsibleTrigger, CollapsibleContent,
  Item, ItemContent, ItemTitle, ItemActions,
  Empty, EmptyTitle, EmptyDescription,
  Kbd, Separator, AspectRatio,
} from '@artasce/crystal-ui';

Badge

Badge Props (Crystal additions)

On this page