ignitionstack.pro v1.0 is out! Read the announcement →
Skip to Content

Components Overview

ignitionstack.pro includes 70+ production-ready components built with React 19, TypeScript, and Tailwind CSS.

Component Categories

UI Components

Basic building blocks for your application:

ComponentDescriptionLocation
ButtonPrimary, secondary, and ghost variantscomponents/ui/button.tsx
TextInputStyled text input with validationcomponents/ui/text-input.tsx
TextAreaMulti-line text inputcomponents/ui/text-area.tsx
ModalAccessible modal dialogcomponents/ui/modal.tsx
BottomSheetMobile-friendly bottom drawercomponents/ui/bottomsheet.tsx
SkeletonLoading placeholdercomponents/ui/skeleton.tsx
SpotlightSearchCommand palette (Cmd+K)components/ui/spotlight-search.tsx

Form Components

Pre-built form utilities:

ComponentDescription
FormErrorError message display
FieldErrorField-level validation errors
SubmitButtonButton with loading state
CreateButtonPre-configured create action button
UpdateButtonPre-configured update action button
DeleteButtonPre-configured delete action button

Landing Page Components

Everything you need for a marketing site:

components/landing-page/
├── Hero              # Main hero section with CTA
├── FeatureGrid       # Feature showcase grid
├── Pricing           # Pricing table with plans
├── FAQ               # Accordion FAQ section
├── About             # About/team section
├── TechStackShowcase # Technology badges
├── ContactSection    # Contact form section
├── ContentHighlights # Content showcase
├── StoreCTA          # E-commerce CTA
├── Header            # Navigation header
└── Footer            # Site footer

AI Chatbot Components

Full AI chatbot UI:

ComponentDescription
ChatContainerMain chat wrapper
ChatMessagesMessage list
ChatInputMessage input with file upload
ChatBubbleMessage bubble (user/assistant)
ProviderSelectorAI provider dropdown
ModelSelectorModel selection
ConversationListConversation history sidebar

Admin Components

Dashboard and management UI:

ComponentDescription
AdminHeaderAdmin navigation
AdminSidebarAdmin sidebar menu
DataTableSortable data tables
StatsCardMetric display cards
ChartsAnalytics visualizations

Usage Examples

Button Component

import Button from '@/components/ui/button'
 
export default function MyComponent() {
  return (
    <div className="flex gap-4">
      <Button variant="primary">Get Started</Button>
      <Button variant="secondary">Learn More</Button>
      <Button variant="ghost">Cancel</Button>
    </div>
  )
}

Form with Validation

'use client'
 
import { useFormField } from '@/hooks'
import { TextInput } from '@/components/ui/text-input'
import { FormError, SubmitButton } from '@/components/ui/form-error'
 
export default function ContactForm() {
  const email = useFormField('', { validator: 'email' })
  const message = useFormField('', { required: true })
 
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!email.isValid || !message.isValid) return
    // Submit form...
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <TextInput
        {...email.inputProps}
        placeholder="your@email.com"
      />
      <FormError error={email.error} />
 
      <TextInput
        {...message.inputProps}
        placeholder="Your message"
      />
      <FormError error={message.error} />
 
      <SubmitButton>Send Message</SubmitButton>
    </form>
  )
}
'use client'
 
import { useState } from 'react'
import Modal from '@/components/ui/modal'
import Button from '@/components/ui/button'
 
export default function ConfirmDialog() {
  const [isOpen, setIsOpen] = useState(false)
 
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>
        Open Modal
      </Button>
 
      <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="Confirm Action"
      >
        <p>Are you sure you want to proceed?</p>
        <div className="flex gap-2 mt-4">
          <Button onClick={() => setIsOpen(false)}>
            Confirm
          </Button>
          <Button variant="ghost" onClick={() => setIsOpen(false)}>
            Cancel
          </Button>
        </div>
      </Modal>
    </>
  )
}

Spotlight Search (Cmd+K)

The spotlight search is globally available. Just press Cmd+K (Mac) or Ctrl+K (Windows/Linux).

// Already included in the root layout
import SpotlightSearch from '@/components/ui/spotlight-search'
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <SpotlightSearch />
      </body>
    </html>
  )
}

Design System

Color Variables

All components use CSS custom properties for theming:

/* Dark theme (default) */
--color-bg-primary: 8 9 12;
--color-bg-secondary: 15 17 24;
--color-text-primary: 255 255 255;
--color-accent-orange: 234 88 12;
 
/* Light theme */
--color-bg-primary: 245 247 250;
--color-text-primary: 15 23 42;

Utility Classes

// Glass panel effect
<div className="glass-panel">...</div>
 
// Gradient text
<h1 className="text-gradient">Heading</h1>
 
// Surface styles
<div className="bg-surface-card">...</div>
<div className="bg-surface-hover">...</div>

Components automatically adapt to light/dark mode via CSS variables and Tailwind’s dark mode classes.

Best Practices

Component Composition

// Compose components for complex UIs
import { Card, CardHeader, CardBody, CardFooter } from '@/components/ui/card'
 
<Card>
  <CardHeader>
    <h3>Card Title</h3>
  </CardHeader>
  <CardBody>
    Content here
  </CardBody>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

Server vs Client Components

Components with interactivity (useState, useEffect, onClick) must be Client Components with 'use client' directive.

// Server Component (default) - for static content
export default function StaticCard({ data }) {
  return <div>{data.title}</div>
}
 
// Client Component - for interactive elements
'use client'
export default function InteractiveCard({ data }) {
  const [expanded, setExpanded] = useState(false)
  return (
    <div onClick={() => setExpanded(!expanded)}>
      {data.title}
    </div>
  )
}

Next Steps