Higher-Level
Compound components built on Crystal primitives for common page patterns
CrystalSectionHeader
Eyebrow + heading + optional description. The standard pattern for section introductions.
Case Studies
Proven Results
Real outcomes from real projects, delivered with precision.
Get in Touch
Let's Build Something Intelligent
Ready to transform your business with AI?
CrystalSteppedList
Numbered stepped list with accent-colored step numbers. Each step shows a zero-padded number, bold title, and muted description.
Primary Accent
Discovery Call
We'll discuss your challenges, goals, and vision.
Technical Assessment
We'll evaluate the right approach and tech stack.
Proposal
Clear scope, timeline, and investment.
Secondary Accent (default)
Design
UI/UX design with Crystal Design System components.
Develop
Build with Next.js, Flutter, and AI integrations.
Deploy
Ship to production with CI/CD pipelines.
Iterate
Continuous improvement based on real user data.
CrystalServiceAccordion
Interactive accordion for services or features. Built on shadcn Accordion with icon, title, summary, and expandable detail.
Multiple mode (type="multiple")
CrystalThemeSelector
Theme switching UI with a compact trigger badge and dropdown. Shows color preview dots for the current theme.
Default
Compact
Inline (no dropdown)
Usage
import {
CrystalSectionHeader,
CrystalSteppedList,
CrystalServiceAccordion,
CrystalThemeSelector,
CrystalGradientText,
} from '@artasce/crystal-ui';
// Section header with gradient text
<CrystalSectionHeader
eyebrow="Our Process"
heading={<>Build <CrystalGradientText>Smarter</CrystalGradientText></>}
description="A proven approach to digital products."
align="center"
/>
// Stepped list
<CrystalSteppedList
items={[
{ title: "Discovery", description: "Understand the problem" },
{ title: "Design", description: "Craft the solution" },
{ title: "Develop", description: "Build and ship" },
]}
/>
// Service accordion
<CrystalServiceAccordion
items={[
{ icon: "◆", title: "AI", summary: "...", detail: "..." },
]}
/>
// Theme selector
<CrystalThemeSelector size="compact" />