A customizable component library for quiz games, built on shadcn/ui
npm install amalie-componentsA beautiful, customizable React component library for quiz games, built on shadcn/ui principles.
``bash`
npm install amalie-components
Add the CSS import to your app's entry point:
`tsx`
import "amalie-components/styles.css";
If you want to customize the theme, add CSS variables to your global styles:
`css`
:root {
--amalie-primary: 262 83% 58%;
--amalie-primary-foreground: 210 40% 98%;
/ ... other variables /
}
A styled text input with label, error states, and icon support.
`tsx
import { TextInput } from "amalie-components";
placeholder="Enter your team name"
error="This field is required"
leftIcon={
/>
`
Stylable buttons for selecting quiz categories with title, icon/image, and description.
`tsx
import { CategorySelector } from "amalie-components";
const categories = [
{ id: "history", title: "History", description: "Past events", icon: "🏛️" },
{ id: "science", title: "Science", description: "Nature & tech", icon: "🔬" },
];
value={selected}
onChange={setSelected}
multiple={false}
columns={2}
/>
`
A searchable select dropdown with option to add new items.
`tsx
import { SelectInput } from "amalie-components";
{ value: "easy", label: "Easy" },
{ value: "medium", label: "Medium" },
{ value: "hard", label: "Hard" },
]}
value={difficulty}
onChange={setDifficulty}
searchable
allowCreate
onAddOption={(val) => addNewDifficulty(val)}
/>
`
Display player info with DiceBear avatar, name, color, and score.
`tsx
import { PlayerCard } from "amalie-components";
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
A slider with min/max range display and current value.
`tsx
import { SliderInput } from "amalie-components";
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" },
]}
/>
`
A big, attention-grabbing button for answering questions.
`tsx
import { CallButton } from "amalie-components";
import { Hand } from "lucide-react";
size="xl"
pulsing
leftIcon={
onClick={handleBuzz}
>
BUZZ IN!
`
Variants: default, destructive, success, warning, outline, ghost
Sizes: , default, lg, xl, icon, icon-lg
A leaderboard showing players with scores and trophy display for top 3.
`tsx
import { Scoreboard } from "amalie-components";
{ 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)}
/>
`
A responsive modal (drawer on mobile, dialog on desktop) for showing answers.
`tsx
import { AnswerModal } from "amalie-components";
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}
/>
`
Customize the theme by overriding CSS variables:
`css
: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 /
}
`
Many components support custom render functions:
`tsx
renderCategory={(category, isSelected) => (
{category.title}
)}
/>
renderPlayer={(player, rank) => (
TypeScript
All components are fully typed. Import types as needed:
tsx
import type {
Category,
Player,
SelectOption,
AvatarStyle
} from "amalie-components";
``MIT