All Projects → yuanzhaohao → dashkit-ui

yuanzhaohao / dashkit-ui

Licence: other
UI Components built on React.

Programming Languages

typescript
32286 projects
SCSS
7915 projects
javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to dashkit-ui

Daisyui
⭐️ ⭐️ ⭐️ ⭐️ ⭐️  Tailwind Components
Stars: ✭ 382 (+2147.06%)
Mutual labels:  ui-design, ui-components, ui-library
Chakra Ui
⚡️ Simple, Modular & Accessible UI Components for your React Applications
Stars: ✭ 22,745 (+133694.12%)
Mutual labels:  react-components, ui-components, ui-library
mint-ui
Design System | React UI components for web
Stars: ✭ 17 (+0%)
Mutual labels:  ui-design, react-components, ui-library
Base
React-UI-Kit - frontend library with ReactJS components
Stars: ✭ 18 (+5.88%)
Mutual labels:  ui-design, react-components, ui-components
Flamesui
A css-based web components.
Stars: ✭ 133 (+682.35%)
Mutual labels:  ui-design, ui-components
open design system
Open Source Design System using Sketch. It's early days of my project.
Stars: ✭ 22 (+29.41%)
Mutual labels:  ui-design, ui-components
Citrus.avalonia
Modern styles for Avalonia controls.
Stars: ✭ 161 (+847.06%)
Mutual labels:  ui-design, ui-components
Jetquotes
🔖 A Quotes Application built to Demonstrate the Jetpack Compose UI
Stars: ✭ 179 (+952.94%)
Mutual labels:  ui-design, ui-components
Realtaiizor
C# WinForm UI/UX Component Library
Stars: ✭ 109 (+541.18%)
Mutual labels:  ui-design, ui-library
Linearprogressbar
Simple progress bar for iOS
Stars: ✭ 166 (+876.47%)
Mutual labels:  ui-design, ui-components
Underexpress
A free, responsive, ready to use website ui kit, built with bootstrap 4.
Stars: ✭ 205 (+1105.88%)
Mutual labels:  ui-design, ui-components
Bulma.io-axure
AxureRP Library with Bulma.io components
Stars: ✭ 90 (+429.41%)
Mutual labels:  ui-design, ui-components
Atom Design
🍬 The mobile side UI-library base on Vue.js
Stars: ✭ 120 (+605.88%)
Mutual labels:  ui-design, ui-components
Collectionviewslantedlayout
A CollectionView Layout displaying a slanted cells
Stars: ✭ 2,029 (+11835.29%)
Mutual labels:  ui-design, ui-components
React Virgin
The react-native UI Kit you've been looking for.
Stars: ✭ 1,523 (+8858.82%)
Mutual labels:  ui-design, ui-components
Light dark toggle
An awesome flutter app which artistically animates light and dark mode 😍
Stars: ✭ 175 (+929.41%)
Mutual labels:  ui-design, ui-components
Metroset Ui
Windows Forms Metro Skin Style, Make The Applications With Metro Styles. see more https://n-a-r-w-i-n.github.io/MetroSet-UI/
Stars: ✭ 228 (+1241.18%)
Mutual labels:  ui-design, ui-components
Element React
Element UI
Stars: ✭ 2,690 (+15723.53%)
Mutual labels:  ui-design, react-components
mijin
Tailwind CSS UI components build for Vue.js / Nuxt.js
Stars: ✭ 168 (+888.24%)
Mutual labels:  ui-components, ui-library
Datingapp
Dating UI kit is used for online meet up with girls and boys . The screen contains more than 30 icons and most of all required elements required to design an application like this. The XML and JAVA files contains comments at each and every point for easy understanding. Everything was made with a detail oriented style and followed by today's web trends. Clean coded & Layers are well-organized, carefully named, and grouped.
Stars: ✭ 97 (+470.59%)
Mutual labels:  ui-design, ui-components

Downloads Version License

Dashkit UI

UI Components built on React.

Docs

View docs here

Requirements

React >= 16.0.0

Installation

yarn add dashkit-ui
// or
npm install dashkit-ui

CDN

<link rel="stylesheet" href="https://unpkg.com/dashkit-ui/dist/dashkit.css" />
<script crossorigin src="https://unpkg.com/dashkit-ui/dist/dashkit.min.js"></script>

Usage

1. Import on demand

Use babel-plugin-import to import components on demand.

# Install plugin
npm i babel-plugin-import -D

// set babel config in .babelrc or babel-loader
// Note: Don't set libraryDirectory if you are using webpack 1.
{
  "plugins": [
    ["import", {
      "libraryName": "dashkit-ui",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// For users who use babel7, that can be configured in babel.config.js
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'dashkit-ui',
      libraryDirectory: 'es',
      style: function(stylePath) {
        return `${stylePath}/style.scss`;
      }
    }, 'dashkit-ui']
  ]
};

// Then you can import components from dashkit-ui
import { Button } from 'dashkit-ui'

If you are using TypeScript,please use ts-import-plugin instead

2. Manually import

import Button from 'dashkit-ui/lib/button';
import 'dashkit-ui/lib/button/style.css';

3. Import all components

import React from 'react';
import Dashkit from 'dashkit-ui';
import 'dashkit-ui/lib/style/index.css';

You can also view the quickstart page for more details.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].