DOCSEARCHbyAlgolia
Submit Docs

Naive UI

repository·main·Indexed 11 days ago

https://github.com/tusen-ai/naive-ui

A fast, fairly complete, and highly customizable Vue 3 component library built with TypeScript. It features over 90 tree-shakable components, a type-safe theme system that requires no CSS preprocessors, and high-performance data components with virtual lists by default.

Tokens
245.1K
Snippets
810
Records
1.5K
Agent score
94%

What's inside Naive UI

  1. Overview of Naive UI

    main

    Naive UI is a Vue 3 component library designed for speed and developer experience. Key features include:

    • Comprehensive Component Set: Over 90 components available, all supporting tree-shaking to minimize bundle size.
    • Type-Safe Theming: An advanced theme system built with TypeScript. You can customize the look by providing a style override object without needing Less, Sass, CSS variables, or Webpack loaders.
    • TypeScript Native: Written entirely in TypeScript for seamless integration with TypeScript projects.
    • Zero CSS Imports: Components work out-of-the-box without requiring manual CSS imports.
    • Performance Optimized: Includes support for virtual lists in high-density components like select, tree, transfer, table, and cascader to ensure high performance.

  2. Overview of Naive UI features

    main

    Naive UI is a Vue 3 component library designed with the following characteristics:

    • Fairly Complete: Over 90 components available, all of which are tree-shakable.
    • Theme Customizable: Features an advanced, type-safe theme system built with TypeScript. Customization is achieved by providing a theme overrides object in JavaScript, requiring no LESS/Sass/CSS variables or special webpack loaders.
    • TypeScript Native: Written entirely in TypeScript for seamless integration. Components do not require manual CSS imports.
    • Fast Performance: Optimized for speed; data components utilize virtual lists by default.

  3. Use the Badge component

    main

    The Badge component is used to display a small status indicator or count over an element. It supports various types (success, error, etc.), custom colors, and different display modes like a dot or a loading state.

    // Example usage patterns available in demos:
// basic, type, processing, show-zero, overflow, manual, custom-content, color, raw, rtl-debug, offset

  6. Use the Space component for layout spacing

    main

    The Space component is used to manage spacing between child elements.

    Note: If you do not have specific compatibility requirements for the CSS gap property, it is recommended to use Flex instead of Space.

    Common usage patterns include:

    • Basic horizontal layout (default)
    • Vertical layout using the vertical prop
    • Controlling alignment and justification of items
    • Handling wrapping behavior
    <template>
  <n-space>
    <n-button>Button 1</n-button>
    <n-button>Button 2</n-button>
  </n-space>
</template>

  8. Explore Naive UI community resources and templates

    main

    Naive UI focuses on providing high-quality UI components that follow a unified design specification. To complement the component library, the community has developed various high-quality resources, including admin templates, data visualization platforms, and specialized tools.

    Key categories of community resources include:

    • Admin Templates: Various mid-to-large scale management system templates (e.g., Naive UI Admin, Soybean Admin, Rengar Admin, Vue Naive Admin, Vue Bag Admin, Nova admin, Lithe Admin, Vue Simple Template).
    • Specialized Frameworks & Tools:
      • GoView: A low-code platform for data visualization.
      • Celeris Web: A Monorepo-based framework with OpenAI integration.
      • chatgpt-web: A ChatGPT demonstration web interface.
      • pro-naive-ui: An extension of Naive UI with additional encapsulated features.
      • vue3-dynamic-form: A dynamic form designer.
      • astral-3d-editor: A 3D scene construction tool using ThreeJS.
      • it-tools: A collection of practical online tools.
      • DVHA Pro: A headless mid-to-large scale frontend development framework with built-in asynchronous capabilities.

  11. Explore Third-Party Naive UI Resources

    main

    Naive UI focuses on providing high-quality UI components with unified design specifications. To complement the core library, the community has developed various third-party resources, including admin templates, data visualization tools, and specialized frameworks.

    Common use cases for these resources include:

    • Enterprise/Admin Templates: Solutions like Naive UI Admin, Soybean Admin, Rengar Admin, Vue Naive Admin, Vue Bag Admin, Nova admin, and Lithe Admin provide out-of-the-box UI structures for backend management systems.
    • Specialized Tools: GoView for data visualization, astral-3d-editor for 3D scene building, and it-tools for practical online utilities.
    • Extended Components: pro-naive-ui offers secondary encapsulation with extended functions, and vue3-dynamic-form provides a dynamic form designer.
    • Full-stack/AI Integrations: chatgpt-web (ChatGPT demo) and Celeris Web (integrates OpenAI capabilities).

  12. Countdown Component Overview and Demos

    main

    The Countdown component provides a timer that counts down from a specified duration. It supports different levels of precision (seconds, milliseconds, etc.) and allows for custom rendering of the time display via a render function.

    Available demo implementations include:

    • basic.vue: A standard countdown usage.
    • precision.vue: Demonstrates different precision settings.
    • render.vue: Shows how to use the render prop for custom UI.
    • reset.vue: Demonstrates resetting the timer.
    • finish-debug.vue: Debugging the completion state.