stp-ui-kit

Smartestprep UI Kit for React apps

A modern React component library with 50+ production-ready components, design tokens, and comprehensive documentation.

Quick Start

Installation

npm install stp-ui-kit

Basic Usage

import { Button, Input, Page } from "stp-ui-kit";
import "stp-ui-kit/styles";

function App() {
  return (
    <Page title="Dashboard">
      <Input label="Email" placeholder="Enter your email" />
      <Button>Submit</Button>
    </Page>
  );
}

Documentation

| Document | Description | |----------|-------------| | Getting Started | Installation, setup, connecting to projects | | Architecture | Project structure, patterns, organization | | Design System | Tokens, spacing, typography, theming | | Components | Full component index by category | | Development | Contributing, local dev, code style | | Migration | Version upgrades, breaking changes | | Best Practices | Patterns, anti-patterns, accessibility |

Component Categories

| Category | Components | Description | |----------|------------|-------------| | Data | ProgressLine, ProgressBarAlternative, Table | Data display and visualization | | Display | Button, Avatar, Typography, Chip, Icon, Dropdown | Visual and interactive elements | | Feedback | Modal, Spinner, Tooltip, Message, AppLoader | Notifications and loading states | | Form | Input, Select, Checkbox, RadioButton, Calendar, TextArea | Form inputs and controls | | Layout | Page, Section, Drawer, BottomBar, TopBar | Page structure and organization | | Navigation | Link, Collapse, NavigationItem | Navigation elements |

Storybook

Interactive component documentation:

npm run storybook

Tech Stack

• React 18/19
• TypeScript
• SCSS with design tokens
• Vite build system

License

MIT