Component Library

A living style guide showcasing all components, templates, and design patterns used throughout the Bad Apples Tattoo Emporium website.

Navigation Menu

shadcn/ui Navigation Menu
Used in the main site navigation. Responsive and accessible.

Buttons

shadcn/ui Button Variants

Cards

Fine Line Tattoos

Delicate, minimalist fine line tattoos crafted with precision.

Artist: Izzy

Portrait Realism

Photorealistic portrait tattoos that capture every detail.

Artist: Squid

Form Components

Input & Textarea

Accordion

shadcn/ui Accordion
Used in the Journal FAQ section

Badges

shadcn/ui Badge
Used for tags and labels, especially in Artist profiles
DefaultSecondaryDestructiveOutline

Artist Profile Template

Custom Component: ArtistProfile
Reusable template component used on the Artists page
E
Example Artist
RealismPortraitsBlack & Grey

This is an example of the Artist Profile component used throughout the Artists page. It includes name, specialty badges, bio, and a gallery placeholder.

Gallery

Image 1
Image 2
Image 3
Image 4
Image 5
Image 6

Blog Card Component

Custom Component: BlogCard
New blog card component with elegant design, hover effects, and dark mode support. Located at: /components/ui/blog-cards.tsx
Complete Tattoo Aftercare Guide
Jan 15 2024
Learn the essential steps to ensure your new tattoo heals perfectly and maintains its vibrant appearance for years to come.
Choosing Your First Tattoo
Jan 8 2024
Everything you need to know before getting your first tattoo, from design selection to placement considerations.
Popular Tattoo Styles Explained
Jan 1 2024
A comprehensive guide to different tattoo styles, from traditional to watercolour, and everything in between.

Colour Palette

Design System Colours
shadcn/ui colour system with CSS variables

Primary

Secondary

Muted

Accent

Destructive

Border

Card

Background

Typography

Text Styles

Heading 1

Used for page titles

Heading 2

Used for section titles

Heading 3

Used for subsection titles

Body text - Regular paragraph text used throughout the site.

Small text - Used for descriptions and metadata.

This library is maintained as a reference for all components used in the Bad Apples Tattoo Emporium website.