Documentation menu

UI Component Library

A unified set of React components for consistent styling across gemmology.dev. All components are available from @/components/ui.

Button

Primary interaction element with multiple variants and sizes.

Variants

Sizes

States

import { Button } from '@/components/ui';

<Button variant="primary" size="md">Click me</Button>
<Button variant="outline" disabled>Disabled</Button>
<Button loading>Submitting...</Button>

Card

Container component with optional hover effects and subcomponents.

Basic Card

This is a basic card with header and content.

Card content goes here.

Hover Card

This card has hover effects.

Hover over me to see the effect.

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

<Card hover padding="md">
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardContent>Content</CardContent>
  <CardFooter>Footer</CardFooter>
</Card>

// As a link
<Card as="a" href="/page" hover>Clickable card</Card>

Badge

Small labels for categorization, status, and metadata.

Basic Variants

Default Crystal Ruby Sapphire Emerald Amethyst Outline

Crystal System Variants

Cubic Hexagonal Trigonal Tetragonal Orthorhombic Monoclinic Triclinic

Sizes

Small Medium

IconBox

Styled container for icons with color variants.

Variants

Sizes

import { IconBox } from '@/components/ui';

<IconBox variant="crystal" size="md">
  <CrystalIcon />
</IconBox>

DifficultyBadge

Specialized badge for indicating content difficulty levels.

beginner intermediate advanced

import { DifficultyBadge } from '@/components/ui';

<DifficultyBadge level="beginner" />
<DifficultyBadge level="intermediate" size="md" />
<DifficultyBadge level="advanced" />

Container

Layout wrapper with consistent max-width and padding.

size="sm" → max-w-3xl

size="md" → max-w-4xl

size="lg" → max-w-6xl

size="xl" → max-w-7xl (default)

import { Container } from '@/components/ui';

<Container size="xl" padding="md">
  Content with max-w-7xl and medium padding
</Container>

<Container size="sm" padding="lg" as="section">
  Section with max-w-3xl and large padding
</Container>

SectionHeader

Consistent section title and description pattern.

Featured

Example Section

This is a description of the section content.

import { SectionHeader } from '@/components/ui';

<SectionHeader
  title="Section Title"
  description="Optional description"
  badge="Optional Badge"
  align="center"
/>

Link

Styled anchor element with variants and arrow option.

Default Link Primary Link Muted Link

With Arrow External Link

import { Link } from '@/components/ui';

<Link href="/page" variant="primary" withArrow>
  Go to page
</Link>

<Link href="https://example.com" external>
  External site
</Link>

Table

Unified table component with multiple variants.

DataTable

Property	Value	Description
variant	string	Visual style variant
size	sm \| md \| lg	Component size
disabled	boolean	Disable interactions

PropertyTable

Crystal Properties

SystemCubic

Point Groupm3m

Hardness10

import { Table, DataTable, PropertyTable } from '@/components/ui';

// Simple data table
<DataTable
  headers={['Name', 'Type', 'Description']}
  rows={[['prop', 'string', 'A property']]}
/>

// Key-value property table
<PropertyTable
  title="Properties"
  properties={[{ label: 'Key', value: 'Value' }]}
/>

Design Tokens

Core color palette and typography scale.

Crystal Palette

100

200

300

400

500

600

700

800

900

Gem Colors

Ruby

Sapphire

Emerald

Amethyst

Topaz

Usage Guidelines

Best practices for using the component library.

Import from the barrel export

import { Button, Card, Badge } from '@/components/ui';

Use components instead of raw Tailwind

Buttons: Use <Button variant="primary"> not .btn-primary
Cards: Use <Card> not raw border/shadow classes
Badges: Use <Badge variant="crystal"> with the variant prop
Icons: Use <IconBox> not manual flexbox containers
Sections: Use <SectionHeader> for centered titles
Layout: Use <Container> for max-width and padding

Use the cn utility for custom classes

import { cn } from '@/components/ui';
className={cn('base-class', conditional && 'conditional-class', className)}