Spexop Design System - VSCode Extension

IntelliSense, snippets, and autocomplete for the Spexop Design System.

Features

Component Snippets

Quickly insert Spexop components with code snippets:

• spx-button - Button component
• spx-card - Card with Header, Body, Footer
• spx-input - TextInput component
• spx-grid - Grid layout
• spx-stack - Stack layout
• spx-icon - Icon component
• And many more...

IntelliSense

Component Props

Get intelligent autocomplete for component props with descriptions:

<Button variant="primary" size="md">

Auto-completes variant and size with descriptions from component types.

Icon Names

Autocomplete for all Spexop icons:

<Icon name="home" />

Shows 30+ commonly used icons with categories.

Theme Tokens

CSS variable autocomplete for theme tokens:

.my-class {
  color: var(--theme-primary);
  padding: var(--theme-spacing-4);
}

Supports color, spacing, typography, radius, shadow, and border tokens.

Snippets

Components

Layout Primitives

Utility Hooks

Installation

Install from the VSCode Marketplace:

1. Open VSCode
2. Go to Extensions (Cmd+Shift+X / Ctrl+Shift+X)
3. Search for "Spexop Design System"
4. Click Install

Usage

Using Snippets

Type a snippet prefix (e.g., spx-button) and press Tab to insert the snippet.

Using IntelliSense

The extension automatically provides IntelliSense for:

• Component props when typing <ComponentName prop="|"
• Icon names when typing <Icon name="|"
• CSS variables in CSS files

Examples

Button

import { Button } from '@spexop/react';

<Button variant="primary" size="md">
  Click me
</Button>

Card

import { Card, CardHeader, CardBody, CardFooter } from '@spexop/react';

<Card variant="outlined">
  <CardHeader title="My Card" />
  <CardBody>
    Card content here
  </CardBody>
  <CardFooter>
    Footer actions
  </CardFooter>
</Card>

Grid Layout

import { Grid, GridItem } from '@spexop/react';

<Grid columns={3} gap={16}>
  <GridItem>Column 1</GridItem>
  <GridItem>Column 2</GridItem>
  <GridItem>Column 3</GridItem>
</Grid>

Toast Notifications

import { useToastUtil } from '@spexop/react';

const { toast, renderToasts } = useToastUtil();

toast.success('Operation completed!');
toast.error('Something went wrong');

return (
  <div>
    {renderToasts()}
  </div>
);

Theme Setup

import { generateCSS, techPreset } from '@spexop/theme';
import { useEffect } from 'react';
import { useThemeUtil } from '@spexop/react';

function App() {
  useEffect(() => {
    const css = generateCSS(techPreset);
    const style = document.createElement('style');
    style.textContent = css;
    document.head.appendChild(style);
  }, []);
  
  const { resolvedMode, setMode } = useThemeUtil({ defaultMode: 'auto' });
  
  return <YourComponents />;
}

Requirements

• VSCode 1.80.0 or higher
• TypeScript or JavaScript React files

Resources

• Spexop Documentation
• GitHub Repository
• Component Library

Support

For issues, questions, or contributions, please visit:

• GitHub Issues
• Spexop Community

License

MIT License

Changelog

See CHANGELOG.md for version history.