GC Dash Components

A modern, production-ready React component library inspired by Anthropic's Claude and Perplexity's design systems. Built with TypeScript, Emotion CSS-in-JS, and optimized for both Next.js and Vite applications.

✨ Features

• 27 Production-Ready Components - Buttons, Cards, Forms, Grids, and more
• Next.js Compatible - Proper Client/Server Component separation
• TypeScript First - Full type safety with comprehensive type definitions
• Emotion Styling - CSS-in-JS with excellent performance
• Tree-Shakeable - Import only what you need
• Accessible - ARIA compliant with keyboard navigation support
• Responsive - Mobile-first design with adaptive layouts

📦 Installation

npm install @rmanor/gc-dash @emotion/react clsx
# or
yarn add @genc/gc-dash @emotion/react clsx
# or
pnpm add @genc/gc-dash @emotion/react clsx

Peer Dependencies

{
  "react": "^18.0.0",
  "react-dom": "^18.0.0",
  "@emotion/react": "^11.0.0",
  "clsx": "^2.0.0"
}

Optional Dependencies

# For icon support
npm install lucide-react @atlaskit/icon

🚀 Quick Start

Basic Usage

import { GcDashButton, GcDashCard } from '@genc/gc-dash'

function App() {
  return (
    <GcDashCard>
      <h2>Welcome to GC Dash</h2>
      <GcDashButton variant="primary">Get Started</GcDashButton>
    </GcDashCard>
  )
}

Next.js Setup

1. Configure Emotion

// next.config.js
module.exports = {
  compiler: {
    emotion: true
  }
}

2. Import Components

// Client components (interactive)
'use client'
import { GcDashTabs, GcDashDropdown } from '@genc/gc-dash'

// Server components (no 'use client' needed)
import { GcDashButton, GcDashCard } from '@genc/gc-dash'

Vite Setup

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    react({
      jsxImportSource: '@emotion/react',
      babel: {
        plugins: ['@emotion/babel-plugin']
      }
    })
  ]
})

📚 Components

Actions

• GcDashButton - Primary UI button with multiple variants
• GcDashIconButton - Icon-only button for compact UIs
• GcDashAddContentButton - Specialized button for adding content
• GcDashModelButton - AI model selection button

Layout & Surfaces

• GcDashCard - Flexible card container with header, body, footer
• GcDashMetricCard - Display metrics with trends
• GcDashBlankSlate - Empty state component
• GcDashFeatureCard - Showcase features with icons

Forms & Inputs

• GcDashInput - Text input with validation states
• GcDashTextArea - Multi-line text input
• GcDashSelect - Dropdown selection
• GcDashCheckbox - Checkbox input
• GcDashRadio - Radio button input
• GcDashToggle - Toggle switch
• GcDashFormField - Form field wrapper with label and validation
• GcDashDropdown - Advanced dropdown with search

Navigation

• GcDashTabs - Tabbed navigation (underline, pill, segmented variants)
• GcDashHeader - Page header with search and actions
• GcDashNavButtons - Navigation button group
• GcDashPlanChip - Plan/status indicator chip

Data Display

• GcDashVideoGrid - Grid layout for video content
• GcDashCollectionGrid - Grid for collections
• GcDashCreatorGrid - Grid for creator profiles
• GcDashProjectCard - Project display card
• GcDashAvatar - User avatar with status indicators
• GcDashLabel - Status/category labels

Communication

• GcDashChat - Chat interface components
  • GcDashChatThread
  • GcDashChatMessageBubble
  • GcDashChatComposer

Utilities

• GcDashLoadingSpinner - Loading indicator
• GcDashSearchBar - Search input with filters

🎨 Styling & Theming

CSS Variables

The components use CSS variables for theming. Define these in your global styles:

:root {
  /* Colors */
  --color-primary-500: #0b5cff;
  --color-primary-600: #0a52e0;
  --color-primary-700: #0948c7;
  
  --color-text-primary: #172b4d;
  --color-text-secondary: #42526e;
  --color-text-subtle: #5e6c84;
  
  --color-surface: #ffffff;
  --color-surface-raised: #f6f8fb;
  
  --color-error-500: #de350b;
  --color-warning-500: #ff991f;
  --color-success-500: #00875a;
  
  /* Spacing */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-6: 16px;
  --space-8: 24px;
  
  /* Typography */
  --font-family-primary: 'Inter', system-ui, sans-serif;
}

Style Utils

Access design tokens directly:

import { gcDashColor, gcDashSpacing, gcDashShape } from '@genc/gc-dash'

📖 Component Examples

Button Variants

<GcDashButton variant="primary">Primary Action</GcDashButton>
<GcDashButton variant="secondary">Secondary</GcDashButton>
<GcDashButton variant="ghost">Ghost</GcDashButton>
<GcDashButton variant="danger">Delete</GcDashButton>
<GcDashButton variant="link">Link Style</GcDashButton>

Card with All Sections

import {
  GcDashCard,
  GcDashCardHeader,
  GcDashCardTitle,
  GcDashCardSubtitle,
  GcDashCardBody,
  GcDashCardFooter,
  GcDashButton
} from '@genc/gc-dash'

<GcDashCard interactive>
  <GcDashCardHeader>
    <div>
      <GcDashCardTitle>Project Kickoff</GcDashCardTitle>
      <GcDashCardSubtitle>Align on goals and timeline</GcDashCardSubtitle>
    </div>
    <GcDashButton variant="secondary">Edit</GcDashButton>
  </GcDashCardHeader>
  <GcDashCardBody>
    <p>Content goes here...</p>
  </GcDashCardBody>
  <GcDashCardFooter>
    <GcDashButton variant="ghost">Cancel</GcDashButton>
    <GcDashButton variant="primary">Save</GcDashButton>
  </GcDashCardFooter>
</GcDashCard>

Tabs (Client Component)

'use client'
import { GcDashTabs } from '@genc/gc-dash'

<GcDashTabs
  variant="underline"
  tabs={[
    { id: 'overview', label: 'Overview', content: <OverviewPanel /> },
    { id: 'details', label: 'Details', content: <DetailsPanel /> },
    { id: 'settings', label: 'Settings', content: <SettingsPanel /> }
  ]}
/>

Form Example

import {
  GcDashFormField,
  GcDashInput,
  GcDashTextArea,
  GcDashSelect,
  GcDashButton
} from '@genc/gc-dash'

<form>
  <GcDashFormField label="Project Name" required>
    <GcDashInput placeholder="Enter project name" />
  </GcDashFormField>
  
  <GcDashFormField label="Description">
    <GcDashTextArea rows={4} placeholder="Describe your project" />
  </GcDashFormField>
  
  <GcDashFormField label="Category">
    <GcDashSelect
      options={[
        { value: 'design', label: 'Design' },
        { value: 'dev', label: 'Development' },
        { value: 'marketing', label: 'Marketing' }
      ]}
    />
  </GcDashFormField>
  
  <GcDashButton variant="primary" type="submit">
    Create Project
  </GcDashButton>
</form>

🔧 Advanced Usage

Custom Keyboard Navigation

import { useGridKeyboardNavigation } from '@genc/gc-dash/hooks'

const MyGrid = () => {
  const {
    gridRef,
    focusedIndex,
    getItemProps
  } = useGridKeyboardNavigation({
    items: myItems,
    columns: 3,
    onItemActivate: (item) => console.log('Selected:', item)
  })
  
  return (
    <div ref={gridRef}>
      {myItems.map((item, index) => (
        <div key={item.id} {...getItemProps(index)}>
          {item.content}
        </div>
      ))}
    </div>
  )
}

🌐 Browser Support

• Chrome/Edge (last 2 versions)
• Firefox (last 2 versions)
• Safari (last 2 versions)
• iOS Safari (last 2 versions)
• Chrome Android (last 2 versions)

📊 Bundle Size

• Full Library: ~80KB (minified + gzipped)
• Single Component: ~5-15KB (with tree-shaking)
• Core Utilities: ~3KB

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

MIT © GenC Team

🔗 Links

• Documentation
• Storybook
• GitHub
• NPM

💬 Support

• 📧 Email: [email protected]
• 💬 Discord: Join our community
• 🐛 Issues: GitHub Issues

Built with ❤️ by the GenC team