Grit UI: Using the 100-Component Registry

What is Grit UI?

Building UI from scratch is slow. Every project needs hero sections, login forms, pricing tables, dashboards, and navigation — and they all look roughly the same. Grit UI gives you 100 pre-built components that you install, own, and customize.

Grit UI includes 100 components across 5 categories:

• • Marketing (21) — hero sections, feature grids, pricing, testimonials, CTAs, footers
• • Auth (10) — login, register, forgot password, OTP, social login
• • SaaS (30) — dashboards, billing, settings, onboarding, analytics, teams
• • Ecommerce (20) — product cards, cart, checkout, orders, categories
• • Layout (20) — navbars, sidebars, footers, headers, app shells, page layouts

The registry is served by your Grit API at the /r endpoints. Every Grit project includes it automatically.

How the Registry Works

Your Grit API exposes two registry endpoints. The first lists all components. The second returns a specific component with its full source code.

# List all 100 components
GET /r.json
# Returns: array of components with name, description, category

# Get a specific component
GET /r/hero-split.json
# Returns: full component data with embedded TSX source code

Each component JSON contains:

• • name — unique identifier (e.g., "hero-split")
• • description — what the component does
• • category — marketing, auth, saas, ecommerce, or layout
• • dependencies — npm packages the component needs (shadcn/ui primitives, lucide-react)
• • files — the full TSX source code, ready to copy into your project

The format is shadcn-compatible. This means any tool that works with the shadcn registry format (including the official CLI) can install Grit UI components.

Installing Components

Installing a Grit UI component uses the shadcn CLI. One command downloads the component source into your project. You own the code — it's not a dependency you import from node_modules.

# Install a component from your local Grit API
npx shadcn@latest add hero-split --url http://localhost:8080/r

This downloads the hero-split.tsx file into your components directory (typically components/ui/ or wherever your shadcn config points). The file is now part of your project — edit it freely.

Marketing Components (21)

Marketing components are the building blocks of landing pages. Hero sections grab attention. Feature grids explain your product. Pricing tables convert visitors. Testimonials build trust. CTAs drive action.

Key marketing components:

• • hero-split — headline on the left, image on the right. Classic SaaS hero layout.
• • hero-centered — centered headline with CTA buttons below. Clean and focused.
• • features-grid — 3-column grid of feature cards with icons and descriptions.
• • pricing-three-tier — three pricing plans side by side with feature comparison.
• • testimonials-carousel — rotating customer quotes with avatars and company names.

A typical landing page stacks these components top to bottom: hero, features, testimonials, pricing, CTA, footer. Five components, one complete landing page.

// A complete landing page from Grit UI components:
//
// HeroSplit - "Build faster with Grit"
// FeaturesGrid - 6 features with icons
// TestimonialsCarousel - 5 customer quotes
// PricingThreeTier - Free, Pro, Enterprise
// CTABanner - "Start building today"
// FooterLinks - Links, social, copyright

Auth Components (10)

Auth pages are the first thing users see. They need to look polished, work on mobile, and handle edge cases (loading states, error messages, password visibility toggle). Grit UI's auth components handle all of this.

Key auth components:

• • login-card — email/password form with remember me, forgot password link, and social login buttons
• • register-card — name, email, password, confirm password with validation
• • forgot-password — email input with submit and back-to-login link
• • otp-input — 6-digit code input with auto-focus and paste support
• • social-buttons — Google, GitHub, Twitter login buttons styled consistently

SaaS Components (30)

SaaS components power the authenticated app experience. Dashboards, settings pages, billing flows, onboarding wizards, analytics — the screens your paying users interact with daily. This is the largest category with 30 components.

Key SaaS components:

• • dashboard-stats — 4-card grid showing key metrics (users, revenue, growth, active)
• • billing-plans — subscription plan selector with monthly/yearly toggle
• • settings-profile — profile form with avatar upload, name, email, bio
• • onboarding-wizard — multi-step setup flow with progress indicator
• • analytics-chart — line/bar chart component for visualizing data over time

SaaS components often need data from your API. The components render the UI, and you connect them to your React Query hooks for data fetching. The pattern is always the same: fetch data, pass it as props, render the component.

Ecommerce Components (20)

Building an online store? Ecommerce components give you product displays, shopping cart, checkout flow, and order management. These are the most complex components — they handle state management, quantity updates, price calculations, and form validation.

Key ecommerce components:

• • product-card — image, title, price, add-to-cart button. Responsive grid item.
• • cart-drawer — slide-out cart panel with quantity controls and subtotal
• • checkout-form — shipping address, payment info, order summary
• • order-history — table of past orders with status badges and view details
• • category-grid — grid of product categories with images and counts

Layout Components (20)

Layout components define the structure of your app. Navbars, sidebars, footers, and app shells create the container that all other components live inside. Get these right and everything else falls into place.

Key layout components:

• • navbar-main — top navigation bar with logo, nav links, auth buttons, mobile menu
• • sidebar-collapsible — sidebar that collapses to icons on small screens
• • footer-links — multi-column footer with link groups, social icons, copyright
• • app-shell — complete app layout with sidebar, header, and content area
• • page-header — page title with breadcrumb and action buttons

The app-shell component is especially powerful — it combines a sidebar, header, and content area into a single component. Replace your entire app layout with one install.

Customizing Components

The whole point of the copy-paste model is customization. After installing a component, the source code is in your project. Change anything: colors, layout, text, animations, add new props, remove features you don't need.

Common customizations:

• • Colors — swap Tailwind classes to match your brand. Change bg-primary to bg-blue-600
• • Text — replace placeholder copy with your product's real messaging
• • Layout — change from 3-column to 4-column grid, swap left/right positions
• • Props — add new props for dynamic data (prices, feature lists, user info)
• • Remove — delete sections you don't need (social login, testimonials, etc.)

Summary

Here's everything you learned in this course:

• Grit UI is a 100-component registry served by your API at /r endpoints
• Components are shadcn-compatible: install with npx shadcn@latest add --url
• You own the source code — copy-paste model, not dependency model
• Marketing (21): heroes, features, pricing, testimonials, CTAs for landing pages
• Auth (10): login, register, forgot password, OTP, social login forms
• SaaS (30): dashboards, billing, settings, onboarding, analytics for app pages
• Ecommerce (20): product cards, cart, checkout, orders for online stores
• Layout (20): navbars, sidebars, footers, app shells for app structure
• Customize freely: change colors, text, layout, add props, remove sections
• Build complete pages by composing multiple registry components together