LibreTexts IconDavis Design System

Architecture

The Davis Design System is built as a monorepo with three distinct packages, each serving a specific purpose. Understanding this architecture will help you choose the right package(s) for your project.

Package Structure

@libretexts/davis-core

The foundation of the design system — Framework-agnostic design tokens, CSS variables, and Tailwind configuration.

What's included:

  • Design tokens (colors, typography, spacing, layout)
  • CSS custom properties
  • Tailwind CSS preset
  • Base styles and reset

Use this package when:

  • You only need design tokens and styles
  • You're building custom components
  • You're using a framework other than React or Vue
  • You want maximum flexibility and minimal dependencies

Installation: See Tokens Only Installation

@libretexts/davis-react

React component library — Pre-built, accessible React components that implement the Davis design system.

What's included:

  • All of @libretexts/davis-core (installed as dependency)
  • React 18+ components
  • TypeScript definitions
  • Headless UI integration
  • Accessible by default

Use this package when:

  • You're building a React application
  • You want pre-built, accessible components
  • You need consistent UI patterns
  • You're using Next.js, Remix, or other React frameworks

Installation: See React Installation

@libretexts/davis-vue

Vue component library — Pre-built, accessible Vue components that implement the Davis design system.

What's included:

  • All of @libretexts/davis-core (installed as dependency)
  • Vue 3+ components
  • TypeScript definitions
  • Headless UI Vue integration
  • Accessible by default

Use this package when:

  • You're building a Vue application
  • You want pre-built, accessible components
  • You need consistent UI patterns
  • You're using Nuxt or other Vue frameworks

Coming Soon

Vue components are currently in development. This documentation will be updated when the component library is available. You can use @libretexts/davis-core for design tokens in the meantime.

Installation: See Vue Installation

Decision Tree

Not sure which package to use? Follow this decision tree:

Common Scenarios

Scenario 1: New React project

  • Install @libretexts/davis-react
  • You automatically get all design tokens and components
  • No need to install davis-core separately

Scenario 2: Custom component library

  • Install @libretexts/davis-core
  • Build your own components using the design tokens
  • Full control over implementation

Scenario 3: Multi-framework project

  • Install @libretexts/davis-core in your shared package
  • Optionally add davis-react or davis-vue in framework-specific packages
  • Share design tokens across all implementations

Scenario 4: Existing project with design system

  • Install @libretexts/davis-core for tokens only
  • Gradually adopt components by installing davis-react or davis-vue
  • See Existing Projects guide

Package Dependencies

The component libraries depend on the core package:

This means:

  • Installing davis-react or davis-vue automatically includes davis-core
  • You never need to install davis-core separately when using a component library
  • Updates to davis-core are coordinated with component library releases

Next Steps

Now that you understand the package structure:

  1. Choose your package using the decision tree above
  2. Follow the installation guide for your chosen package:
  3. Explore Foundation to learn about design tokens: