Quantia Design System

Design System con Tailwind CSS v4, shadcn/ui, y Atomic Design.

Instalación

npm install mvp-ds

Uso Básico

1. Importar estilos (REQUERIDO)

En tu archivo principal (main.tsx):

// Importar estilos del Design System (CSS ya compilado con Tailwind)
import "mvp-ds/styles";

import ReactDOM from "react-dom/client";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

2. Configurar ThemeProvider

import { ThemeProvider, Button } from "mvp-ds";

function App() {
  return (
    <ThemeProvider 
      defaultMode="dark"
      storageKey="my-app-theme"
    >
      <Button variant="default">Click me</Button>
    </ThemeProvider>
  );
}

Componentes Disponibles

• Button - Botón con variantes (default, destructive, outline, secondary, ghost, link)
• Checkbox - Checkbox con label
• Dialog - Dialog con header, footer y acciones
• ThemeProvider - Provider para manejo de temas
• useTheme - Hook para controlar temas

Ejemplo Completo

// main.tsx
import "mvp-ds/styles";
import { ThemeProvider } from "mvp-ds";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <ThemeProvider defaultMode="dark">
    <App />
  </ThemeProvider>
);

React Compiler

The React Compiler is enabled on this template. See this documentation for more information.

Note: This will impact Vite dev & build performances.

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])