TimoScheuermann/Timos-Components

A library of high-quality ready to use VueJS components that will help you speed up your development workflow.

Components

A Vue Component Library of high-quality ready to use components that will help you speed up your development workflow.

Demos

• FitnessHub
• Timos Icons (Icon Library)
• TC Components (Docs)
• Timos Newsroom
• Gastro Assistant
• Sport Kamasutra
• Investing Collectors

Available Components

Avatar, Badge, Button, Card, Checkbox, Divider, Header, Headline, Hero, Image, Input, Link, List, Modal, Navbar, Progress, Quote, Revealer, Scroll Up, Segments, Select, Slider, Spinner, Steps, Switch, Tabbar, Table, Textarea, Tooltip

Layouts

Flow, Grid, Sidebar, Modal

Fundamentals

Default Tags, Colors, Icons, Auto Background,

Installation

TC Components is a framework of UI components based on Vuejs which means that vuejs has to be in your project so that TC Components can do the magic.

NPM

You can install TC Components through npm with the command:

npm i tccomponents_vue
// or
yarn add tccomponents_vue

Import in your project

To use TC Components in your vuejs project, add this code:

// main.ts or main.js
import Vue from 'vue';

import * as TCComponents from 'tccomponents_vue';
import 'tccomponents_vue/lib/tccomponents_vue.css';

for (const component in TCComponents) {
  Vue.component(component, TCComponents[component]);
}

If you only want specific components do this:

// main.ts or main.js
import Vue from 'vue';

import 'tccomponents_vue/lib/tccomponents_vue.css';
import { tcButton, tcTable, tcAvatar } from 'tccomponents_vue';

Vue.component('tc-button', tcButton);
Vue.component('tc-table', tcTable);
Vue.component('tc-avatar', tcAvatar);

Component Designer

TC Component features a designer to easily create the mockup for any component. Specifying attributes is as simple as filling out a form.

Component Designer