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

UI Components

Core UI components used throughout ignitionstack.pro. All components are built with React 19, TypeScript, and Tailwind CSS.

Button

Versatile button component with multiple variants.

import Button from '@/components/ui/button'
 
// Primary (default)
<Button>Get Started</Button>
 
// Secondary
<Button variant="secondary">Learn More</Button>
 
// Ghost
<Button variant="ghost">Cancel</Button>
 
// Disabled
<Button disabled>Processing...</Button>
 
// With icon
<Button>
  <ArrowRight className="w-4 h-4" />
  Continue
</Button>

TextInput

Styled text input with consistent design.

import TextInput from '@/components/ui/text-input'
 
// Basic usage
<TextInput
  placeholder="Enter your email"
  value={email}
  onChange={(e) => setEmail(e.target.value)}
/>
 
// With label
<label>
  <span className="text-sm text-content-body">Email</span>
  <TextInput placeholder="you@example.com" />
</label>
 
// With error state
<TextInput
  placeholder="Email"
  className="border-red-500"
/>

TextArea

Multi-line text input component.

import TextArea from '@/components/ui/text-area'
 
<TextArea
  placeholder="Write your message..."
  value={message}
  onChange={(e) => setMessage(e.target.value)}
  rows={5}
/>

Accessible modal dialog component.

'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 className="text-content-body">
          Are you sure you want to proceed?
        </p>
        <div className="flex gap-3 mt-6">
          <Button onClick={() => setIsOpen(false)}>
            Confirm
          </Button>
          <Button
            variant="ghost"
            onClick={() => setIsOpen(false)}
          >
            Cancel
          </Button>
        </div>
      </Modal>
    </>
  )
}

BottomSheet

Mobile-friendly bottom drawer component.

'use client'
 
import { useState } from 'react'
import BottomSheet from '@/components/ui/bottomsheet'
 
export default function MobileMenu() {
  const [isOpen, setIsOpen] = useState(false)
 
  return (
    <>
      <button onClick={() => setIsOpen(true)}>
        Open Menu
      </button>
 
      <BottomSheet
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
      >
        <nav className="p-4">
          <a href="/dashboard">Dashboard</a>
          <a href="/settings">Settings</a>
          <a href="/logout">Logout</a>
        </nav>
      </BottomSheet>
    </>
  )
}

BottomSheet automatically handles touch gestures for swipe-to-close on mobile devices.

Skeleton

Loading placeholder component for content loading states.

import { Skeleton, SkeletonText, SkeletonCard } from '@/components/ui/skeleton'
 
// Basic skeleton
<Skeleton className="w-full h-4" />
 
// Text skeleton
<SkeletonText lines={3} />
 
// Card skeleton
<SkeletonCard />
 
// Avatar skeleton
<Skeleton className="w-12 h-12 rounded-full" />

SpotlightSearch

Command palette component activated by Cmd+K / Ctrl+K.

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

Features

SpotlightSearch should only be mounted once at the root level.

Design Tokens

All UI components use consistent design tokens:

Colors

/* Primary backgrounds */
--color-bg-primary: 8 9 12;
--color-bg-secondary: 15 17 24;
 
/* Text */
--color-text-primary: 255 255 255;
--color-content-body: 210 214 222;
 
/* Borders */
--color-border-primary: 26 29 36;
--color-border-secondary: 46 52 64;
 
/* Accent */
--color-accent-orange: 234 88 12;

Surfaces

// Card surface
<div className="bg-surface-card rounded-lg p-4">
  Card content
</div>
 
// Muted surface
<div className="bg-surface-muted rounded-lg p-4">
  Muted content
</div>
 
// Glass effect
<div className="glass-panel p-4">
  Glass panel content
</div>

Gradients

// Text gradient
<h1 className="text-gradient">
  Gradient Heading
</h1>
 
// Background gradient
<div className="bg-gradient-to-r from-[rgb(var(--gradient-primary))] to-[rgb(var(--gradient-secondary))]">
  Gradient background
</div>

Utility Function

The cn() utility merges Tailwind classes safely:

import { cn } from '@/lib/utils'
 
// Merge classes with conditional
<div className={cn(
  "base-class",
  isActive && "active-class",
  className
)}>

Best Practices

  1. Use design tokens - Always use CSS variables for colors
  2. Compose components - Build complex UI from simple primitives
  3. Handle loading states - Use Skeleton components
  4. Accessibility - All components include proper ARIA attributes
  5. Dark mode - Components automatically adapt to theme

Next Steps