npm.io
1.0.0 • Published 3d ago

tektokit

Licence
MIT
Version
1.0.0
Deps
2
Size
829 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

tektokit

A modern, framework-agnostic React UI component library

npm version License: MIT PRs Welcome

Documentation · Components · Contributing · License

Overview

tektokit is a production-ready React component library built with modern web standards. It provides 50+ carefully crafted components designed for speed, accessibility, and developer experience.

Key Features

  • 50+ Production-Ready Components - UI elements, layouts, sections, and utilities
  • Framework Agnostic - Works seamlessly with Next.js, Vite, Remix, and more
  • SSR-Safe - Full server-side rendering support out of the box
  • Tailwind CSS Powered - Utility-first styling with full customization
  • Dark Mode Built-in - Automatic dark mode support with theme toggle
  • TypeScript Ready - Full type support for better DX
  • Zero Configuration - Works immediately after installation
  • Accessibility First - WCAG compliant components
  • Lightweight - Tree-shakeable exports, only import what you need

Installation

Install tektokit using your preferred package manager:

# npm
npm install tektokit

# yarn
yarn add tektokit

# pnpm
pnpm add tektokit
Requirements

tektokit requires React 18.0.0 or higher:

npm install react@^18.0.0 react-dom@^18.0.0

Note: tektokit automatically includes react-icons and swiper as dependencies. You don't need to install them separately.

Quick Start

import { Button, Card, Hero1 } from 'tektokit';

function App() {
  return (
    <div>
      <Hero1 
        config={{
          title: "Welcome to tektokit",
          description: "Build beautiful UIs faster",
          primaryCta: { label: "Get Started", href: "/docs" }
        }}
      />
      
      <Card>
        <h2>Hello World</h2>
        <Button variant="solid" color="primary">
          Click me
        </Button>
      </Card>
    </div>
  );
}

Setup

1. Import Styles

Add tektokit styles to your main CSS or entry file:

/* For Tailwind v4 (CSS-based config) */
@import "tektokit/styles.css";

Or for Tailwind v3:

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/tektokit/dist/**/*.{js,jsx}',
  ],
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [],
}
2. Framework-Specific Setup
Next.js (App Router)
// app/layout.jsx
import 'tektokit/styles.css';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}
// app/page.jsx
import { Hero1, Button } from 'tektokit';

export default function Home() {
  return (
    <main>
      <Hero1 config={{ title: "Welcome to tektokit" }} />
      <Button variant="solid" color="primary">Get Started</Button>
    </main>
  );
}
Vite/React
// src/main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import 'tektokit/styles.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
Remix
// app/root.tsx
import styles from 'tektokit/styles.css';

export const links = () => [{ rel: 'stylesheet', href: styles }];

Component Categories

tektokit includes 50+ components organized into five categories:

UI Components (14)

Core building blocks for your interface

Avatar · Badge · Button · Card · Chip · Divider · Image · Logo · Tooltip · UserProfile · Accordion · Carousel · VideoPlayer · VideoSwiper

Layout & Navigation (8)

Navigation and structure components

Breadcrumbs · Drawer · Dropdown · Modal · Navbar · ThemeToggle · ScrollToTop · Sidebar

Feedback (4)

User feedback and state management

EmptyState · ErrorBoundary · ConfirmDialog · Share

Page Sections (14)

Ready-to-use page sections

Hero1-7 (7 variants) · Footer · Features · Testimonials · FAQ · CTA · Stats · Newsletter · Teams · Pricing

Utilities (10+)

Helper components and tools

SocialLinks · JsonLd · Analytics · WhatsAppButton · MarkdownRenderer · CodeBlock · And more...

View Complete Component Documentation

Usage Examples

Basic Component
import { Button, Card } from 'tektokit';

function MyComponent() {
  return (
    <Card shadow="md" padding="lg">
      <h2>Welcome</h2>
      <Button variant="solid" color="primary" onClick={() => alert('Hello!')}>
        Click Me
      </Button>
    </Card>
  );
}
Config-Based Components

Many components use a config-based API for cleaner code:

import { Hero1, Features, Testimonials } from 'tektokit';

const heroConfig = {
  title: "Build Amazing Products",
  description: "Modern UI components for your next project",
  primaryCta: { label: "Get Started", href: "/start" },
  secondaryCta: { label: "Learn More", href: "/docs" }
};

const featuresConfig = {
  heading: "Why Choose tektokit?",
  features: [
    {
      icon: "zap",
      title: "Fast Development",
      description: "Build UIs 10x faster with pre-built components"
    },
    {
      icon: "shield",
      title: "Production Ready",
      description: "Battle-tested components used in production"
    }
  ]
};

function LandingPage() {
  return (
    <>
      <Hero1 config={heroConfig} />
      <Features config={featuresConfig} />
    </>
  );
}
Dark Mode
import { ThemeToggle } from 'tektokit';

// Add theme toggle to your navbar
<ThemeToggle showLabel={true} />

Contributing

We welcome contributions! Here's how you can help:

Ways to Contribute
  • Report bugs - Open an issue describing the bug
  • Suggest features - Share your ideas for new components or improvements
  • Improve docs - Help us make documentation clearer
  • Submit PRs - Fix bugs or add features
  • Star the repo - Show your support!
Development Setup
  1. Fork and clone the repository
git clone https://github.com/YOUR_USERNAME/tektokit.git
cd tektokit
  1. Install dependencies
npm install
  1. Start development mode
npm run dev
  1. Build the library
npm run build
  1. Test your changes locally
# In tektokit directory
npm link

# In your test project
npm link tektokit
Contribution Guidelines
  • Write clear, descriptive commit messages
  • Follow existing code style and conventions
  • Test your changes thoroughly
  • Update documentation for new features
  • Keep PRs focused on a single feature/fix
  • Add examples for new components
Code Style
  • Use functional components with hooks
  • Follow the config-based pattern for complex components
  • Include JSDoc comments for props
  • Write clean, readable code
  • Use meaningful variable names
Pull Request Process
  1. Create a new branch (git checkout -b feature/amazing-feature)
  2. Make your changes
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

Versioning

tektokit follows Semantic Versioning:

  • MAJOR version for incompatible API changes
  • MINOR version for new features (backwards compatible)
  • PATCH version for bug fixes

Browser Support

  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Edge (latest)
  • Mobile browsers (iOS Safari, Chrome Mobile)

Community & Support

License

MIT License - see LICENSE file for details

Acknowledgments

Built using:

Made by Md Shamim Akhter

If you find this library helpful, please consider giving it a star on GitHub!

Keywords

reactuicomponentsdesign-systemtektokitnextjstailwindcarouselvideo-playerseossrui-libraryreact-components