SageUI

Appearance

Getting Started ​

Welcome to SageUI! This guide will help you get up and running with our beautiful component library in just a few minutes.

What is SageUI? ​

SageUI is a comprehensive component library built on top of Tailwind CSS, featuring:

  • Nature-inspired design with beautiful green color palettes
  • Accessibility-first approach following WCAG guidelines
  • Fully customizable with Tailwind CSS utilities
  • Modular architecture - import only what you need
  • Framework agnostic - works with any JavaScript framework
  • TypeScript support with full type definitions

Quick Overview ​

SageUI provides over 50 pre-designed components that you can use immediately or customize to match your brand. Each component is:

  • Accessible by default with proper ARIA attributes and keyboard navigation
  • Mobile-first responsive with consistent behavior across devices
  • Customizable through CSS classes and configuration options
  • Well-documented with live examples and code snippets

Installation Methods ​

Choose the installation method that works best for your project:

Install SageUI as an npm package for the best developer experience:

bash
npm install @seijiv10/sageui

Then import the CSS in your application:

javascript
// In your main JavaScript/TypeScript file
import '@seijiv10/sageui/styles';

Or in your CSS file:

css
@import '@seijiv10/sageui/styles';;

Method 2: CDN ​

For quick prototyping or simple projects, use our CDN:

html
<link 
  href="https://cdn.jsdelivr.net/npm/sageui@latest/dist/sageui.css" 
  rel="stylesheet"
>

Method 3: Tailwind CSS Plugin ​

For maximum customization, use SageUI as a Tailwind CSS plugin:

bash
npm install @seijiv10/sageui tailwindcss

Add to your tailwind.config.js:

javascript
module.exports = {
  content: [
    './src/**/*.{html,js,ts,jsx,tsx}',
    './node_modules/sageui/**/*.{js,ts}'
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('sageui/plugin')
  ],
}

Your First Component ​

Let's create your first SageUI component - a simple button:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First SageUI Component</title>
  <link href="https://cdn.jsdelivr.net/npm/sageui@latest/dist/sageui.css" rel="stylesheet">
</head>
<body class="p-8">
  <h1 class="text-3xl font-bold text-gray-800 mb-6">Welcome to SageUI!</h1>
  
  <!-- Your first SageUI button -->
  <button class="btn btn-primary">
    Click me!
  </button>
  
  <!-- More examples -->
  <div class="mt-8 space-x-4">
    <button class="btn btn-secondary">Secondary</button>
    <button class="btn btn-outline">Outline</button>
    <button class="btn btn-ghost">Ghost</button>
  </div>
</body>
</html>
Result

Building a Simple Card ​

Let's create a more complex component - a user profile card:

html
<div class="card" style="max-width: 400px;">
  <div class="card-body">
    <div class="flex items-center mb-4">
      <div class="avatar mr-4">
        <div class="avatar-image w-16 h-16">
          <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=64&h=64&fit=crop&crop=face&auto=format&q=60" alt="Profile" />
        </div>
      </div>
      <div>
        <h3 class="card-title">John Doe</h3>
        <p class="text-gray-600">Frontend Developer</p>
      </div>
    </div>
    
    <p class="card-text">
      Passionate about creating beautiful, accessible user interfaces 
      with modern web technologies.
    </p>
    
    <div class="card-actions">
      <button class="btn btn-primary btn-sm">Follow</button>
      <button class="btn btn-ghost btn-sm">Message</button>
    </div>
  </div>
</div>

<div class="demo-container">
  <div class="demo-title">Profile Card Result</div>
  <div class="card" style="max-width: 400px;">
    <div class="card-body">
      <div class="flex items-center mb-4">
        <div class="avatar mr-4">
          <div class="avatar-image w-16 h-16">
            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=64&h=64&fit=crop&crop=face&auto=format&q=60" alt="Profile" />
          </div>
        </div>
        <div>
          <h3 class="card-title">John Doe</h3>
          <p class="text-gray-600">Frontend Developer</p>
        </div>
      </div>
      
      <p class="card-text">
        Passionate about creating beautiful, accessible user interfaces 
        with modern web technologies.
      </p>
      
      <div class="card-actions">
        <button class="btn btn-primary btn-sm">Follow</button>
        <button class="btn btn-ghost btn-sm">Message</button>
      </div>
    </div>
  </div>
</div>
Profile

John Doe

Frontend Developer

Passionate about creating beautiful, accessible user interfaces with modern web technologies.

Profile Card Result
Profile

John Doe

Frontend Developer

Passionate about creating beautiful, accessible user interfaces with modern web technologies.

Framework Integration ​

SageUI works seamlessly with all popular frameworks:

React Example ​

jsx
import '@seijiv10/sageui/styles';

function WelcomeCard() {
  const [isFollowing, setIsFollowing] = useState(false)
  
  return (
    <div className="card" style={{ maxWidth: '400px' }}>
      <div className="card-body">
        <h3 className="card-title">Welcome to React + SageUI!</h3>
        <p className="card-text">
          Start building beautiful components with SageUI and React.
        </p>
        <div className="card-actions">
          <button 
            className={`btn ${isFollowing ? 'btn-secondary' : 'btn-primary'}`}
            onClick={() => setIsFollowing(!isFollowing)}
          >
            {isFollowing ? 'Following' : 'Follow'}
          </button>
        </div>
      </div>
    </div>
  )
}

Vue Example ​

vue
<template>
  <div class="card" style="max-width: 400px">
    <div class="card-body">
      <h3 class="card-title">Welcome to Vue + SageUI!</h3>
      <p class="card-text">
        Start building beautiful components with SageUI and Vue.
      </p>
      <div class="card-actions">
        <button 
          :class="`btn ${isFollowing ? 'btn-secondary' : 'btn-primary'}`"
          @click="isFollowing = !isFollowing"
        >
          {{ isFollowing ? 'Following' : 'Follow' }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFollowing: false
    }
  }
}
</script>

<style>
@import '@seijiv10/sageui/styles';
</style>

Understanding the Design System ​

SageUI is built around a consistent design system with these core principles:

Color Palette ​

Our nature-inspired color palette centers around greens and earth tones:

Primary Colors
Sage
Primary
Forest
Secondary
Emerald
Accent
Lime
Highlight

Typography Scale ​

Consistent typography using system fonts:

Typography Scale

Heading 1 (4xl)

Heading 2 (3xl)

Heading 3 (2xl)

Heading 4 (xl)

Body text (base)

Small text (sm)

Spacing System ​

Consistent spacing using Tailwind's spacing scale (0.25rem increments):

Spacing Examples
4 (1rem / 16px)
6 (1.5rem / 24px)
8 (2rem / 32px)

Next Steps ​

Now that you have SageUI set up, here's what you should explore next:

1. Explore Components ​

Browse our comprehensive component library to see all available components with live examples and code snippets.

2. Customization ​

Learn how to customize SageUI to match your brand colors and design requirements.

Getting Help ​

If you run into any issues or have questions:

  • 📚 Documentation: Comprehensive guides and examples
  • 🐛 GitHub Issues: Report bugs or request features
  • 💬 Discord Community: Get help from other developers
  • 📧 Email Support: Direct support for complex issues

Pro Tip

Start small! Pick a few components to get familiar with the system, then gradually expand your usage as you become more comfortable with SageUI's patterns.

Ready to dive deeper? Continue to Installation for detailed setup instructions, or jump straight into the Components to start exploring!

Released under the MIT License.

Copyright © 2024 SageUI