Skip to main content

Documentation Index

Fetch the complete documentation index at: https://grantmaster.dev/llms.txt

Use this file to discover all available pages before exploring further.

​
Components & Styling

GrantMaster uses a modern, utility-first styling approach combined with a robust component library.

​
1. The Design System (Tailwind CSS 4)

We use Tailwind CSS 4 for all styling. Design tokens are defined via the @theme block in src/index.css (not a tailwind.config.js file):
  • Primary (primary-*): Brand blue for main actions. Never hardcode blue-*.
  • Neutrals (slate-*): All neutral/gray tones. Never use gray-*.
  • Success (emerald-*): Approval/confirm actions. Never use green-*.
  • Error (rose-*): Delete/reject/destructive actions. Never use red-*.
  • Warning (amber-*): Cautionary states.
  • Muted: Background containers and subtle text.

​
Utility Usage Policy

  • Prefer Composition: Avoid creating large CSS files. Use Tailwind classes directly in TSX.
  • Responsive Design: Always use sm:, md:, lg: prefixes. GrantMaster is “Mobile First”.
  • Dark Mode: All components must support dark: variants. Use dark:bg-{color}-500/10 for subtle tints.

​
2. Component Library (shadcn/ui)

We don’t build basic inputs or buttons from scratch. We use shadcn/ui, which is a collection of re-usable components built on Radix UI.

​
shadcn/ui Primitives (src/components/ui/)

ComponentFileNotes
AlertDialogalert-dialog.tsxConfirmation dialogs
Alertalert.tsxInline alert banners
Badgebadge.tsxNon-status labels
Buttonbutton.tsxdefault, outline, ghost, destructive, success, warning, secondary, link variants. Use isLoading/loadingText props
Cardcard.tsxComposable Card/CardHeader/CardContent/CardFooter
Checkboxcheckbox.tsx
Commandcommand.tsxCommand palette (cmdk)
Dialogdialog.tsxAccessible modals
DropdownMenudropdown-menu.tsxContext menus
Inputinput.tsxText inputs
Labellabel.tsx
Popoverpopover.tsx
Progressprogress.tsxProgress bars
ScrollAreascroll-area.tsxCustom scrollable containers
Selectselect.tsxDropdown selects
Separatorseparator.tsxDividers
Sheetsheet.tsxSide-over panels
Skeletonskeleton.tsxLoading placeholders
Switchswitch.tsxToggle switches
Tabletable.tsxBase table elements
Tabstabs.tsxTab containers
Textareatextarea.tsxMulti-line inputs

​
Custom Components (src/components/ui/)

ComponentFileNotes
AnimatedIconAnimatedIcon.tsxIcon with motion effects
BottomSheetBottomSheet.tsxMobile bottom drawer
BreadcrumbsBreadcrumbs.tsxNavigation breadcrumbs
CardVariantsCardVariants.tsxPreset card styles + StatCard for metrics
CitationListCitationList.tsxAI citation display
ConfidenceBadgeConfidenceBadge.tsxAI confidence indicator
DataStateWrapperDataStateWrapper.tsxLoading/empty/error state handler
EmptyStateEmptyState.tsxZero-data illustrations
ErrorBoundaryErrorBoundary.tsxReact error boundary
FloatingActionButtonFloatingActionButton.tsxFAB for mobile
FormComponentsFormComponents.tsxFormField, FormSection, FormActions, FormGrid
KeyboardShortcutsModalKeyboardShortcutsModal.tsxShortcuts reference
LoadingScreenLoadingScreen.tsxFull-page loading
ModalModal.tsxStandard modal wrapper
PageHeaderPageHeader.tsxStandardized page titles (replaces manual <h1>)
PageLayoutPageLayout.tsxPage content wrapper (mandatory)
PageTabsPageTabs.tsxPage-level tab navigation
PremiumTabsPremiumTabs.tsxStandard section-level tabs (default and card variants)
RouteErrorBoundaryRouteErrorBoundary.tsxRoute-level error handling
ScrollToTopScrollToTop.tsxAuto-scroll on navigation
SearchFilterBarSearchFilterBar.tsxDebounced search + filters
SecondarySidebarSecondarySidebar.tsxLeft-side sub-navigation
SkeletonLoaderSkeletonLoader.tsxSkeleton loading patterns
StaggeredListStaggeredList.tsxAnimated list rendering
StatusBadgeStatusBadge.tsxStatus indicators with mapDomainStatus()
TooltipTooltip.tsxCustom tooltip (use content + side props)
VirtualListVirtualList.tsxVirtualized scrolling (react-window)
WarningBannerWarningBanner.tsxWarning alert banners

​
Data Table (src/components/ui/data-table/)

Standardized table components with sorting, filtering, pagination, and bulk action toolbar. Built on @tanstack/react-table.

​
3. Creating a New Component

Follow this folder structure: 
src/features/my-feature/
├── components/
│   ├── MyComponent.tsx      // Main logic
│   ├── MySubComponent.tsx   // Local children
│   └── index.ts             // Public exports
├── hooks/                   // Local state/logic hooks
└── index.ts                 // Public feature entry

​
Reference Example

See src/components/ui/button.tsx for how we use cva (Class Variance Authority) to manage component states.

​
4. Visual Excellence (Wow Factor)

To maintain a “Premium” feel:
  • Animations: Use motion (npm package motion@^12) for page transitions and modal entries. Note: decorative CSS animations are globally disabled; only functional animations (spinners, shimmer) are preserved.
  • Gradients: Use subtle gradients on dashboard cards (.bg-gradient-card, .bg-gradient-surface).
  • Glassmorphism: Use .glass-surface, .glass-card, .glass-panel, .glass-frosted utility classes for backdrop-blur effects.

​
Maintenance

Update this document when:
  • Adding a new external UI library (e.g., Radix).
  • Changing the primary brand colors.
  • Introducing a new global animation standard.