Amalie Components

A beautiful, customizable React component library for quiz games, built on shadcn/ui principles.

Installation

npm install amalie-components

Setup

1. Import the styles

Add the CSS import to your app's entry point:

import "amalie-components/styles.css";

2. Configure Tailwind (optional)

If you want to customize the theme, add CSS variables to your global styles:

:root {
  --amalie-primary: 262 83% 58%;
  --amalie-primary-foreground: 210 40% 98%;
  /* ... other variables */
}

Components

TextInput

A styled text input with label, error states, and icon support.

import { TextInput } from "amalie-components";

<TextInput
  label="Team Name"
  placeholder="Enter your team name"
  error="This field is required"
  leftIcon={<UserIcon />}
/>

CategorySelector

Stylable buttons for selecting quiz categories with title, icon/image, and description.

import { CategorySelector } from "amalie-components";

const categories = [
  { id: "history", title: "History", description: "Past events", icon: "🏛️" },
  { id: "science", title: "Science", description: "Nature & tech", icon: "🔬" },
];

<CategorySelector
  categories={categories}
  value={selected}
  onChange={setSelected}
  multiple={false}
  columns={2}
/>

SelectInput

A searchable select dropdown with option to add new items.

import { SelectInput } from "amalie-components";

<SelectInput
  options={[
    { value: "easy", label: "Easy" },
    { value: "medium", label: "Medium" },
    { value: "hard", label: "Hard" },
  ]}
  value={difficulty}
  onChange={setDifficulty}
  searchable
  allowCreate
  onAddOption={(val) => addNewDifficulty(val)}
/>

PlayerCard

Display player info with DiceBear avatar, name, color, and score.

import { PlayerCard } from "amalie-components";

<PlayerCard
  name="Alice"
  color="#8b5cf6"
  seed="alice123"
  avatarStyle="funEmoji"
  score={1500}
  isActive={true}
  rank={1}
  size="md"
/>

Available avatar styles:

• adventurer, avataaars, bottts, funEmoji, lorelei, micah, notionists, openPeeps, personas, pixelArt, thumbs

SliderInput

A slider with min/max range display and current value.

import { SliderInput } from "amalie-components";

<SliderInput
  label="Number of Questions"
  value={10}
  onChange={setQuestionCount}
  min={5}
  max={50}
  step={5}
  showValue
  showRange
  marks={[
    { value: 10, label: "Quick" },
    { value: 25, label: "Medium" },
    { value: 50, label: "Long" },
  ]}
/>

CallButton

A big, attention-grabbing button for answering questions.

import { CallButton } from "amalie-components";
import { Hand } from "lucide-react";

<CallButton
  variant="default"
  size="xl"
  pulsing
  leftIcon={<Hand />}
  onClick={handleBuzz}
>
  BUZZ IN!
</CallButton>

Variants: default, destructive, success, warning, outline, ghost Sizes: sm, default, lg, xl, icon, icon-lg

Scoreboard

A leaderboard showing players with scores and trophy display for top 3.

import { Scoreboard } from "amalie-components";

<Scoreboard
  players={[
    { id: "1", name: "Alice", score: 1500, color: "#8b5cf6" },
    { id: "2", name: "Bob", score: 1200, color: "#22c55e" },
    { id: "3", name: "Charlie", score: 900, color: "#f59e0b" },
  ]}
  title="Leaderboard"
  showTrophies
  maxDisplay={10}
  sortBy="score"
  sortDirection="desc"
  onPlayerClick={(player) => console.log(player)}
/>

AnswerModal

A responsive modal (drawer on mobile, dialog on desktop) for showing answers.

import { AnswerModal } from "amalie-components";

<AnswerModal
  open={showAnswer}
  onOpenChange={setShowAnswer}
  question="Who painted the Mona Lisa?"
  answer="Leonardo da Vinci"
  description="The Mona Lisa was painted between 1503-1519"
  year="1503-1519"
  image="/mona-lisa.jpg"
  correct={true}
/>

Customization

Theme Variables

Customize the theme by overriding CSS variables:

:root {
  /* Primary colors */
  --amalie-primary: 262 83% 58%;
  --amalie-primary-foreground: 210 40% 98%;
  
  /* Background colors */
  --amalie-background: 0 0% 100%;
  --amalie-foreground: 222.2 84% 4.9%;
  
  /* Border radius */
  --amalie-radius: 0.75rem;
  
  /* Trophy colors */
  --amalie-gold: 45 93% 47%;
  --amalie-silver: 210 14% 66%;
  --amalie-bronze: 30 50% 50%;
}

/* Dark mode */
.dark {
  --amalie-background: 222.2 84% 4.9%;
  --amalie-foreground: 210 40% 98%;
  /* ... other dark mode variables */
}

Custom Rendering

Many components support custom render functions:

<CategorySelector
  categories={categories}
  renderCategory={(category, isSelected) => (
    <div className={isSelected ? "selected" : ""}>
      {category.title}
    </div>
  )}
/>

<Scoreboard
  players={players}
  renderPlayer={(player, rank) => (
    <div>#{rank} - {player.name}</div>
  )}
/>

TypeScript

All components are fully typed. Import types as needed:

import type { 
  Category, 
  Player, 
  SelectOption,
  AvatarStyle 
} from "amalie-components";

License

MIT