OtakuTurks UI

A Vue 3 UI component library.

Installation

# npm
npm install @otakuturks/ui

# yarn
yarn add @otakuturks/ui

# pnpm
pnpm add @otakuturks/ui

Quick Start

Global Registration

import { createApp } from 'vue'
import OtakuturksUI from '@otakuturks/ui'
import '@otakuturks/ui/style.css'

const app = createApp(App)
app.use(OtakuturksUI)
app.mount('#app')

Individual Components

import { OtButton, OtInput, OtCard, OtModal } from '@otakuturks/ui'
import '@otakuturks/ui/style.css'

Components

Form Components

Component	Description
OtButton	Button with multiple variants (primary, secondary, danger, warning, success)
OtInput	Input field with password toggle, adornment, and error states
OtTextarea	Auto-resizable textarea with character counter
OtSelect	Native select dropdown
OtDropdown	Custom select dropdown with keyboard navigation
OtCheckbox	Checkbox with indeterminate state
OtCheckboxGroup	Group of checkboxes
OtRadio	Radio button
OtRadioGroup	Group of radio buttons
OtSwitch	Toggle switch
OtSlider	Range slider
OtRangeSlider	Dual-handle range slider
OtNumberInput	Number input with increment/decrement buttons
OtDateInput	Date picker input
OtTimeInput	Time picker input
OtDateRangeInput	Date range picker
OtFileInput	File upload input
OtColorPicker	Color picker
OtAutocomplete	Autocomplete input with filtering
OtMaskInput	Masked input for phone, credit card, etc.
OtInputGroup	Group inputs with addons
OtFormField	Form field wrapper with label and validation
OtForm	Form wrapper with validation support
OtIconButton	Icon-only button

Layout Components

Component	Description
OtGrid	Responsive grid system
OtCard	Card container with variants (elevated, outlined, filled)
OtDivider	Horizontal/vertical divider
OtCollapse	Collapsible content panel

Navigation Components

Component	Description
OtTabs	Tabs navigation (line and pills variants)
OtTab	Tab content wrapper
OtBreadcrumb	Breadcrumb navigation
OtBreadcrumbItem	Breadcrumb item
OtBreadcrumbTree	Collapsible breadcrumb for deep hierarchies
OtPagination	Pagination controls
OtStepper	Step-by-step navigation
OtWizard	Multi-step form wizard

Overlay Components

Component	Description
OtModal	Modal dialog
OtDrawer	Side drawer
OtTooltip	Tooltip on hover/focus
OtPopover	Popover overlay
OtSearchModal	Search modal with keyboard shortcuts (Ctrl+K)

Feedback Components

Component	Description
OtAlert	Alert messages (info, success, warning, danger)
OtProgress	Progress bar
OtSpinner	Loading spinner
OtSkeleton	Loading skeleton
OtToast	Toast notifications
OtToastContainer	Toast container

Data Display Components

Component	Description
OtTable	Basic table
OtDataTable	Data table with sorting and pagination
OtAvatar	User avatar with initials fallback
OtBadge	Badge/indicator
OtTag	Tag/label
OtChip - Chip with avatar and remove button
OtList	List container
OtListItem	List item
OtTree	Tree view
OtTimeline	Timeline display
OtTimelineItem	Timeline item
OtStatistic	Statistical display
OtRating	Star rating
OtEmptyState	Empty state placeholder
OtCarousel	Image/content carousel
OtImage	Image with lazy loading and fallback
OtAccordion	Accordion container
OtAccordionItem	Accordion item
OtKbd	Keyboard key display
OtSplitButton - Button with dropdown

Icons

Built-in SVG icons:

• IconSearch, IconHome, IconUser, IconBookmark, IconPlay
• IconChevronLeft, IconChevronRight, IconClose
• IconEye, IconEyeOff, IconTrash, IconDirectory
• IconCheck, IconPlus, IconMinus, IconEdit, IconSettings
• IconMenu, IconStar, IconStarOutline

Design System

Colors

/* Primary Colors */
--ot-primary: #377dff;
--ot-danger: #ff715b;
--ot-warning: #ffbe3d;
--ot-success: #2dca8c;
--ot-white: #ffffff;

/* Gray Scale */
--ot-gray-100: #aab0b7;
--ot-gray-200: #858a8f;
--ot-gray-300: #2a2c34;
--ot-gray-400: #1e2029;
--ot-gray-500: #12141d;

Typography

--ot-font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--ot-font-xs: 0.75rem;
--ot-font-sm: 0.875rem;
--ot-font-base: 1rem;
--ot-font-lg: 1.25rem;
--ot-font-xl: 1.5rem;

Spacing

--ot-spacing-xs: 4px;
--ot-spacing-sm: 8px;
--ot-spacing-md: 16px;
--ot-spacing-lg: 24px;
--ot-spacing-xl: 32px;
--ot-spacing-2xl: 48px;

Border Radius

--ot-radius-sm: 4px;
--ot-radius-base: 8.7px;
--ot-radius-lg: 12px;
--ot-radius-xl: 16px;
--ot-radius-full: 999px;

Shadows

--ot-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--ot-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.4);
--ot-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5);

Composables

useToast

import { useToast } from '@otakuturks/ui'

const toast = useToast()

toast.success('Success message', { title: 'Success' })
toast.error('Error message', { title: 'Error' })
toast.warning('Warning message', { title: 'Warning' })
toast.info('Info message', { title: 'Info' })

Development

Setup

# Clone the repository
git clone https://github.com/otakuturks/ui.git

# Install dependencies
yarn install

# Run storybook
yarn storybook

# Build library
yarn build:lib

Scripts

Command	Description
yarn dev	Start development server
yarn storybook	Start storybook for component preview
yarn build	Build library and storybook
yarn build:lib	Build library only
yarn preview	Preview production build

Links

• Storybook

• NPM Package

• GitHub Repository

• See CONTRIBUTING.md for contribution guidelines.

• See CODE_OF_CONDUCT.md for code of conduct.

• See SECURITY.md for security policy.

GPL-3.0 © OtakuTurks