Instruction file imported from onlytafkas/chargingstationsapp (
.github/instructions/ui-components.instructions.md). Copyright stays with the author.
UI Components & Styling
Overview
All UI elements in this application use shadcn/ui components exclusively.
Typography & Fonts
⚠️ CRITICAL: Geist Fonts Configuration
DO NOT MODIFY OR REMOVE the Geist font configuration in app/layout.tsx.
The application uses Geist Sans and Geist Mono fonts which are:
- ✅ Already configured in
app/layout.tsxwithnext/font/google - ✅ Applied globally via CSS variables in
app/globals.css - ✅ Applied to the
<body>element withfont-sansclass - ✅ Available as Tailwind utilities via
font-sansandfont-monoclasses
Required Configuration in layout.tsx:
const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"] });
const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"] });
// Body MUST include: font-sans class + both variable classes
<body className={`${geistSans.variable} ${geistMono.variable} font-sans antialiased`}>Font Usage Guidelines
-
Body Text: The
font-sansclass is automatically applied globally via the layout. Do NOT manually addfont-sansto every component. -
Code/Monospace Text: Use
font-monoclass when displaying code snippets or monospace text. -
Font Variables: The fonts are available as CSS variables:
var(--font-geist-sans)for sans-serifvar(--font-geist-mono)for monospace
What NOT to Do
❌ NEVER remove the Geist font imports from layout.tsx
❌ NEVER remove the font variable classes from the <body> tag
❌ NEVER remove the font-sans class from the <body> tag (this is CRITICAL for displaying Geist fonts)
❌ NEVER replace Geist fonts with other fonts without explicit approval
❌ NEVER add inline font-family styles that override the global fonts
Verification
If fonts appear broken:
- Check that
layout.tsxstill imports Geist and Geist_Mono - Verify the
<body>tag has the font variable classes applied - Ensure
globals.csshas the@theme inlinefont definitions - Confirm Tailwind is compiling the
font-sansandfont-monoutilities
Core Rules
1. Use shadcn/ui Only
- Always use shadcn/ui components for all UI elements
- Never create custom components from scratch
- If a component doesn't exist in shadcn/ui, extend or compose existing shadcn/ui components
2. No Custom Components
- Do not build custom buttons, inputs, cards, dialogs, or other UI primitives
- Leverage the existing shadcn/ui component library in
components/ui/
3. Component Extension
- When additional functionality is needed, wrap or extend shadcn/ui components
- Maintain shadcn/ui styling conventions and patterns
- Use Tailwind CSS for any custom styling
Implementation Guidelines
When working with UI components:
- Check
components/ui/for available shadcn/ui components - Use
npx shadcn@latest add <component>to add new shadcn/ui components - Compose multiple shadcn/ui components to create more complex interfaces
- Follow shadcn/ui's composition patterns and accessibility standards
- Maintain consistent styling with Tailwind CSS utilities