diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 0bd1cc3f..cf1fcef2 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -24,7 +24,7 @@ jobs: node-version: ${{ matrix.node-version }} # yarn.lock is gitignored in this repo, so there is no lockfile to pin # against or to key a cache on — install resolves from package.json. - - run: yarn install + - run: yarn install --ignore-engines - run: yarn lib:build - run: yarn lib:test @@ -40,5 +40,5 @@ jobs: - uses: actions/setup-node@v4 with: node-version: 22.x - - run: yarn install + - run: yarn install --ignore-engines - run: yarn lint diff --git a/.gitignore b/.gitignore index 70f24f47..778d24ec 100644 --- a/.gitignore +++ b/.gitignore @@ -2,7 +2,6 @@ coverage/ dist/ node_modules/ -public/ yarn.lock # IDEs and editors @@ -30,4 +29,5 @@ Thumbs.db *.swp *.vi *.zip -*~ \ No newline at end of file +*~ +.gstack/ diff --git a/CLAUDE.md b/CLAUDE.md index 33a8fd20..79fec0c2 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -12,7 +12,7 @@ This is a **Lerna monorepo** with the following key packages: - `packages/coreui-react/` - Main React components library (TypeScript) - `packages/coreui-icons-react/` - Icon components for React - `packages/coreui-react-chartjs/` - Chart.js integration for React -- `packages/docs/` - Gatsby-based documentation site +- `packages/docs/` - Astro-based documentation site ## Development Commands diff --git a/eslint.config.mjs b/eslint.config.mjs index 0da538d2..dce0d6a8 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -4,6 +4,7 @@ import eslintPluginUnicorn from 'eslint-plugin-unicorn' import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended' import eslintPluginReact from 'eslint-plugin-react' import eslintPluginReactHooks from 'eslint-plugin-react-hooks' +import eslintPluginUnusedImports from 'eslint-plugin-unused-imports' import globals from 'globals' import typescriptEslint from 'typescript-eslint' @@ -19,6 +20,7 @@ export default typescriptEslint.config( ], plugins: { 'react-hooks': eslintPluginReactHooks, + 'unused-imports': eslintPluginUnusedImports, }, files: ['packages/**/src/**/*.{js,ts,tsx}'], languageOptions: { @@ -43,6 +45,12 @@ export default typescriptEslint.config( }, rules: { ...eslintPluginReactHooks.configs.recommended.rules, + '@typescript-eslint/no-unused-vars': 'off', + 'unused-imports/no-unused-imports': 'error', + 'unused-imports/no-unused-vars': [ + 'error', + { vars: 'all', varsIgnorePattern: '^_', args: 'after-used', argsIgnorePattern: '^_' }, + ], 'no-console': 'off', 'no-debugger': 'off', // the library compiles with the classic JSX transform (tsconfig "jsx": "react"), @@ -103,7 +111,12 @@ export default typescriptEslint.config( { files: ['packages/docs/**'], rules: { + '@typescript-eslint/no-explicit-any': 'off', '@typescript-eslint/no-var-requires': 'off', + 'react/no-unescaped-entities': 'off', + 'react-hooks/refs': 'off', + 'react-hooks/set-state-in-effect': 'off', + 'unicorn/consistent-function-scoping': 'off', 'unicorn/prefer-module': 'off', }, }, diff --git a/package.json b/package.json index 3d05a0b3..00faf2ff 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "charts:test": "lerna run --scope \"@coreui/react-chartjs\" test --stream", "charts:test:update": "lerna run --scope \"@coreui/react-chartjs\" test:update --stream", "docs:api": "lerna run --scope \"@coreui/react-docs\" api --stream", - "docs:dev": "lerna run --scope \"@coreui/react-docs\" develop --stream", + "docs:dev": "lerna run --scope \"@coreui/react-docs\" dev --stream", "docs:build": "lerna run --scope \"@coreui/react-docs\" build --stream", "docs:clean": "lerna run --scope \"@coreui/react-docs\" clean", "icons:build": "lerna run --scope \"@coreui/icons-react\" build --stream", @@ -22,25 +22,18 @@ "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update" }, "devDependencies": { - "@typescript-eslint/parser": "^8.61.0", + "@typescript-eslint/parser": "^8.62.0", "eslint": "^9.39.4", "eslint-config-prettier": "^10.1.8", "eslint-plugin-prettier": "^5.5.6", "eslint-plugin-react": "^7.37.5", "eslint-plugin-react-hooks": "^7.1.1", "eslint-plugin-unicorn": "^62.0.0", + "eslint-plugin-unused-imports": "^4.4.1", "globals": "^16.5.0", "lerna": "^9.0.7", "npm-run-all": "^4.1.5", - "prettier": "^3.8.4", - "typescript-eslint": "^8.61.0" - }, - "overrides": { - "gatsby-remark-external-links": { - "unist-util-find": "1.0.2" - } - }, - "resolutions": { - "**/gatsby-remark-external-links/unist-util-find": "1.0.2" + "prettier": "^3.9.1", + "typescript-eslint": "^8.62.0" } } diff --git a/packages/coreui-react/package.json b/packages/coreui-react/package.json index 1db27653..22e522d4 100644 --- a/packages/coreui-react/package.json +++ b/packages/coreui-react/package.json @@ -64,7 +64,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-transition-group": "^4.4.5", - "rollup": "^4.62.0", + "rollup": "^4.62.2", "ts-jest": "^29.4.11", "tslib": "^2.8.1", "typescript": "^5.9.3" diff --git a/packages/coreui-react/rollup.config.mjs b/packages/coreui-react/rollup.config.mjs index 1b55718e..91959225 100644 --- a/packages/coreui-react/rollup.config.mjs +++ b/packages/coreui-react/rollup.config.mjs @@ -21,7 +21,7 @@ const plugins = [ }, }), commonjs({ - include: ['../../node_modules/**'], + include: [/node_modules/], }), ] diff --git a/packages/docs/.gitignore b/packages/docs/.gitignore new file mode 100644 index 00000000..ddce69b6 --- /dev/null +++ b/packages/docs/.gitignore @@ -0,0 +1,3 @@ +node_modules/ +dist/ +.astro/ diff --git a/packages/docs/api.config.mjs b/packages/docs/api.config.mjs new file mode 100644 index 00000000..7ffe5558 --- /dev/null +++ b/packages/docs/api.config.mjs @@ -0,0 +1,16 @@ +// Components to document. The @coreui/astro-docs-api-generator CLI (`yarn api`) runs the +// React extractor (react-docgen-typescript) and writes one .api.json per component +// into outDir — the shared ApiData shape the engine's renders. createApiConfig +// scans each root for source components (`C*.tsx`, minus declarations/specs/tests). +import { createApiConfig } from '@coreui/astro-docs-api-generator/config' + +export default createApiConfig({ + framework: 'react', + configUrl: import.meta.url, + importPackage: '@coreui/react', + roots: [ + '../coreui-react/src/components', + '../coreui-react-chartjs/src', + '../coreui-icons-react/src', + ], +}) diff --git a/packages/docs/astro.config.mjs b/packages/docs/astro.config.mjs new file mode 100644 index 00000000..3414ba1a --- /dev/null +++ b/packages/docs/astro.config.mjs @@ -0,0 +1,45 @@ +import { defineConfig } from 'astro/config' +import react from '@astrojs/react' +import mdx from '@astrojs/mdx' +import { coreuiDocs } from '@coreui/astro-docs/integration' +import { fileURLToPath } from 'node:url' +import { createRequire } from 'node:module' + +const require = createRequire(import.meta.url) + +// Live-src: point @coreui/react and its icon/chart submodules at their source in this +// repo. The icon data set (@coreui/icons) and chart.js stay published deps. +const reactSrc = fileURLToPath(new URL('../coreui-react/src/index.ts', import.meta.url)) +const iconsReactSrc = fileURLToPath(new URL('../coreui-icons-react/src/index.ts', import.meta.url)) +const reactChartjsSrc = fileURLToPath(new URL('../coreui-react-chartjs/src/index.ts', import.meta.url)) +// @coreui/chartjs ships CJS `main` + a separate esm build; point imports at the esm +// so the named `customTooltips` export resolves under SSR. +const chartjsEsm = require.resolve('@coreui/chartjs/dist/js/coreui-chartjs.esm.js') +// Depth-independent imports for example + generated API data, so docs pages can +// move freely without rewriting relative paths. +const examples = fileURLToPath(new URL('./src/examples', import.meta.url)) +const api = fileURLToPath(new URL('./src/api', import.meta.url)) + +export default defineConfig({ + // Publish URL (site + base) is config-driven: coreuiDocs() reads `seo.url` from + // src/data/config.yml and sets Astro's `site` + `base` from it, so the versioned + // (…/react/docs/5.x) and current (…/react/docs) builds differ by one config value. + // coreuiDocs() detects the edition + wires styling; it returns an array (incl. + // global component auto-import), so spread it — and place it before mdx(). + integrations: [react(), ...coreuiDocs(), mdx()], + vite: { + resolve: { + // Array form: the icons-react `/src/index` subpath import must match before the + // bare `@coreui/icons-react` entry. + alias: [ + { find: '@coreui/icons-react/src/index', replacement: iconsReactSrc }, + { find: '@coreui/icons-react', replacement: iconsReactSrc }, + { find: '@coreui/react-chartjs', replacement: reactChartjsSrc }, + { find: '@coreui/chartjs', replacement: chartjsEsm }, + { find: '@coreui/react', replacement: reactSrc }, + { find: '@examples', replacement: examples }, + { find: '@api', replacement: api }, + ], + }, + }, +}) diff --git a/packages/docs/build/api.mjs b/packages/docs/build/api.mjs deleted file mode 100644 index 41eee41b..00000000 --- a/packages/docs/build/api.mjs +++ /dev/null @@ -1,382 +0,0 @@ -#!/usr/bin/env node - -'use strict' - -import { globby } from 'globby' -import { writeFile, mkdir } from 'node:fs/promises' -import path from 'node:path' -import { fileURLToPath } from 'node:url' -import { parse } from 'react-docgen-typescript' -import showdown from 'showdown' - -/** - * Derive __dirname in ESM - */ -const __filename = fileURLToPath(import.meta.url) -const __dirname = path.dirname(__filename) -const converter = new showdown.Converter({ simpleLineBreaks: true }) - -/** - * Glob patterns to locate .tsx files for documentation. - */ -const GLOB_PATTERNS = [ - '**/src/**/*.tsx', - '../node_modules/@coreui/icons-react/src/**/*.tsx', - '../node_modules/@coreui/react-chartjs/src/**/*.tsx', -] - -/** - * Options for globby to control file matching behavior. - */ -const GLOBBY_OPTIONS = { - absolute: true, - cwd: path.join(__dirname, '..', '..'), - gitignore: false, - ignore: ['**/docs/**', '**/__tests__/**'], -} - -/** - * Excluded files list (currently unused). - */ -const EXCLUDED_FILES = [] // Currently unused, but can be utilized if needed - -/** - * Options for react-docgen-typescript parser. - */ -const DOCGEN_OPTIONS = { - shouldIncludePropTagMap: true, -} - -/** - * List of pro components that require special handling. - */ -const PRO_COMPONENTS = [ - 'CCalendar', - 'CDatePicker', - 'CDateRangePicker', - 'CFormMask', - 'CLoadingButton', - 'CMultiSelect', - 'CRating', - 'CRangeSlider', - 'CRating', - 'CSmartPagination', - 'CSmartTable', - 'CTimePicker', - 'CVirtualScroller', -] - -/** - * Text replacements for certain components. - */ -const TEXT_REPLACEMENTS = { - CDatePicker: { - description: [{ 'React Calendar': 'React Date Picker' }], - example: [{ CCalendar: 'CDatePicker' }], - }, - CDateRangePicker: { - description: [{ 'React Calendar': 'React Date Range Picker' }], - example: [{ CCalendar: 'CDateRangePicker' }], - }, - CFormInput: { - example: [{ CFormControlValidation: 'CFormInput' }, { CFormControlWrapper: 'CFormInput' }], - }, - CFormTextarea: { - example: [ - { CFormControlValidation: 'CFormTextarea' }, - { CFormControlWrapper: 'CFormTextarea' }, - ], - }, -} - -/** - * Escapes special characters in text to prevent Markdown rendering issues. - * - * @param {string} text - The text to escape. - * @returns {string} - The escaped text. - */ -const escInsideCode = (s) => - s - .replaceAll(/\\/g, '\\\\') - .replaceAll(/`/g, '\\`') - .replaceAll(/\$\{/g, '\\${') - .replaceAll(/[{}]/g, (m) => '\\' + m) - -const escapeMarkdown = (text) => { - if (typeof text !== 'string') return text - - let out = text - - // 1) przypadek template literal: `... `...`` - out = out.replace(/`([\s\S]*?)``/g, (_, raw) => { - const safe = escInsideCode(raw) - return `{\`${safe}\`}` - }) - - // 2) przypadek listowych wartości: `...` przed przecinkiem albo końcem - out = out.replace(/`([^`]+?)`(?=\s*,|\s*$)/g, '{`$1`}') - - return out -} - -/** - * Generates the relative filename based on the file path. - * - * @param {string} file - The absolute file path. - * @returns {string} - The relative filename. - */ -const getRelativeFilename = (file) => { - let relativePath = file.includes('node_modules') - ? file.split('node_modules/@coreui/')[1] - : path.relative(GLOBBY_OPTIONS.cwd, file).replace('coreui-', '') - - // Remove '-pro' from the filename if not a pro component - const isPro = PRO_COMPONENTS.some((component) => file.includes(component)) - if (!isPro) { - relativePath = relativePath.replace('-pro', '') - } - - return relativePath -} - -/** - * Splits the input string by the '|' character, but only when the '|' is outside of any curly braces {} and parentheses (). - * - * @param {string} input - The string to be split. - * @returns {string[]} An array of split parts, trimmed of whitespace. - * @throws {Error} Throws an error if there are unmatched braces or parentheses in the input. - */ -const splitOutsideBracesAndParentheses = (input) => { - if (input.endsWith('...')) { - return [input] - } - - const parts = [] - let currentPart = '' - let braceDepth = 0 - let parenthesisDepth = 0 - - for (const char of input) { - switch (char) { - case '{': { - braceDepth++ - break - } - case '}': { - braceDepth-- - if (braceDepth < 0) { - throw new Error('Unmatched closing curly brace detected.') - } - break - } - case '(': { - parenthesisDepth++ - break - } - case ')': { - parenthesisDepth-- - if (parenthesisDepth < 0) { - throw new Error('Unmatched closing parenthesis detected.') - } - break - } - case '|': { - // Split only if not inside any braces or parentheses - if (braceDepth === 0 && parenthesisDepth === 0 && currentPart.trim()) { - parts.push(currentPart.trim()) - currentPart = '' - continue - } - break - } - default: { - break - } - } - currentPart += char - } - - if (braceDepth !== 0) { - throw new Error('Unmatched opening curly brace detected.') - } - if (parenthesisDepth !== 0) { - throw new Error('Unmatched opening parenthesis detected.') - } - - if (currentPart.trim()) { - parts.push(currentPart.trim()) - } - - return parts -} - -/** - * Replaces specified text within component documentation. - * - * @param {string} componenName - The name of the component. - * @param {string} keyName - The key of the text replacement (e.g., 'description', 'example'). - * @param {string} text - The text to be replaced. - * @returns {string} The replaced text. - */ -const replaceText = (componenName, keyName, text) => { - const keyNames = Object.keys(TEXT_REPLACEMENTS) - - if (keyNames.includes(componenName) && TEXT_REPLACEMENTS[componenName][keyName]) { - const replacements = TEXT_REPLACEMENTS[componenName][keyName] - for (const replacement of replacements) { - for (const [key, value] of Object.entries(replacement)) { - if (text && key && value) { - return text.replaceAll(key, value) - } - } - } - } else { - return text - } -} - -/** - * Creates an MDX file with the component's API documentation. - * - * @param {string} file - The absolute path to the component file. - * @param {object} component - The component info extracted by react-docgen-typescript. - */ -const createMdx = async (file, component) => { - if (!component) return - - const filename = path.basename(file, '.tsx') - const relativeFilename = getRelativeFilename(file) - - let content = `\n\`\`\`jsx\n` - const importPathParts = relativeFilename.split('/') - if (importPathParts.length > 1) { - content += `import { ${component.displayName} } from '@coreui/${importPathParts[0]}'\n` - } - content += `// or\n` - content += `import ${component.displayName} from '@coreui/${relativeFilename.replace('.tsx', '')}'\n` - content += `\`\`\`\n\n` - - const filteredProps = Object.entries(component.props) - .filter(([_, value]) => { - if (!value.parent?.fileName) return true - return ( - !value.parent.fileName.includes('@types/react/index.d.ts') && - !value.parent.fileName.includes('@types/react/ts5.0/index.d.ts') - ) - }) - .sort(([a], [b]) => a.localeCompare(b)) - - for (const [index, [propName, propInfo]] of filteredProps.entries()) { - if (index === 0) { - content += `
\n` - content += ` \n` - content += ` \n` - content += ` \n` - content += ` \n` - content += ` \n` - content += ` \n` - content += ` \n` - content += ` \n` - content += ` \n` - } - - // Skip props marked to be ignored - if (propInfo.tags?.ignore === '') { - continue - } - - const displayName = propInfo.name || '' - const since = propInfo.tags?.since - ? `${propInfo.tags.since}+` - : '' - const deprecated = propInfo.tags?.deprecated - ? `Deprecated ${propInfo.tags.deprecated}` - : '' - const description = propInfo.description - ? replaceText(component.displayName, 'description', propInfo.description).replace(/\n(?![\n-])/g, ' ').replace(/\n\n/g, '\n') - : '-' - const type = propInfo.type - ? propInfo.type.name.includes('ReactElement') - ? 'ReactElement' - : propInfo.type.name - : '' - const defaultValue = propInfo.defaultValue ? `\`${propInfo.defaultValue.value}\`` : '-' - const example = propInfo.tags?.example - ? replaceText(component.displayName, 'example', propInfo.tags.example) - : false - - // Format types as inline code - const types = splitOutsideBracesAndParentheses(type) - .map((_type) => `\`${_type.trim().replaceAll('"', "'")}\``) - .join(', ') - - const id = `${component.displayName.toLowerCase()}-${propName.replaceAll(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()}` - const anchor = `#` - - content += ` \n` - content += ` \n` - content += ` \n` - content += ` \n` - content += ` \n` - content += ` \n` - content += ` \n` - content += ` \n` - } - - content += ` \n` - content += `
PropertyDefaultType
${displayName}${anchor}${since}${deprecated}${escapeMarkdown(defaultValue)}${escapeMarkdown(types)}
\n` - content += ` ${converter - .makeHtml(description) - .replaceAll(/(.*?)<\/code>/g, '{`$1`}') - .replaceAll(/{`<(.*?)>`}<\/code>/g, '{`<$1>`}')}\n` - - if (example) { - content += ` \n` - } - - content += `
\n` - content += `
\n` - - const outputDir = path.join('content', 'api') - const outputPath = path.join(outputDir, `${filename}.api.mdx`) - - try { - await mkdir(outputDir, { recursive: true }) - await writeFile(outputPath, content, { encoding: 'utf8' }) - console.log(`File created: ${filename}.api.mdx`) - } catch (error) { - console.error(`Failed to write file ${outputPath}:`, error) - } -} - -/** - * Main execution function. - */ -const main = async () => { - try { - const files = await globby(GLOB_PATTERNS, GLOBBY_OPTIONS) - - for (const file of files) { - console.log(`Processing file: ${file}`) - let components - try { - components = parse(file, DOCGEN_OPTIONS) - } catch (parseError) { - console.error(`Failed to parse ${file}:`, parseError) - continue // Skip to the next file - } - - if (components && components.length > 0) { - for (const component of components) { - await createMdx(file, component) // Sequentially create MDX files - } - } - } - } catch (error) { - console.error('An error occurred:', error) - process.exit(1) - } -} - -// Execute the main function -main() diff --git a/packages/docs/content/api/CAccordion.api.mdx b/packages/docs/content/api/CAccordion.api.mdx deleted file mode 100644 index 296cb12a..00000000 --- a/packages/docs/content/api/CAccordion.api.mdx +++ /dev/null @@ -1,60 +0,0 @@ - -```jsx -import { CAccordion } from '@coreui/react' -// or -import CAccordion from '@coreui/react/src/components/accordion/CAccordion' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
activeItemKey#-{`string`}, {`number`}
-

The active item key.

-
alwaysOpen#{`false`}{`boolean`}
-

Make accordion items stay open when another item is opened

-
className#-{`string`}
-

A string of all className you want applied to the base component.

-
flush#-{`boolean`}
-

Removes the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.

-
-
diff --git a/packages/docs/content/api/CAccordionBody.api.mdx b/packages/docs/content/api/CAccordionBody.api.mdx deleted file mode 100644 index fa507a2f..00000000 --- a/packages/docs/content/api/CAccordionBody.api.mdx +++ /dev/null @@ -1,30 +0,0 @@ - -```jsx -import { CAccordionBody } from '@coreui/react' -// or -import CAccordionBody from '@coreui/react/src/components/accordion/CAccordionBody' -``` - -
- - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
-
diff --git a/packages/docs/content/api/CAccordionButton.api.mdx b/packages/docs/content/api/CAccordionButton.api.mdx deleted file mode 100644 index 67fb1438..00000000 --- a/packages/docs/content/api/CAccordionButton.api.mdx +++ /dev/null @@ -1,30 +0,0 @@ - -```jsx -import { CAccordionButton } from '@coreui/react' -// or -import CAccordionButton from '@coreui/react/src/components/accordion/CAccordionButton' -``` - -
- - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
-
diff --git a/packages/docs/content/api/CAccordionHeader.api.mdx b/packages/docs/content/api/CAccordionHeader.api.mdx deleted file mode 100644 index e3ea183f..00000000 --- a/packages/docs/content/api/CAccordionHeader.api.mdx +++ /dev/null @@ -1,30 +0,0 @@ - -```jsx -import { CAccordionHeader } from '@coreui/react' -// or -import CAccordionHeader from '@coreui/react/src/components/accordion/CAccordionHeader' -``` - -
- - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
-
diff --git a/packages/docs/content/api/CAccordionItem.api.mdx b/packages/docs/content/api/CAccordionItem.api.mdx deleted file mode 100644 index 8691cb6b..00000000 --- a/packages/docs/content/api/CAccordionItem.api.mdx +++ /dev/null @@ -1,50 +0,0 @@ - -```jsx -import { CAccordionItem } from '@coreui/react' -// or -import CAccordionItem from '@coreui/react/src/components/accordion/CAccordionItem' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
id#-{`string`}
-

The id global attribute defines an identifier (ID) that must be unique in the whole document.

-
itemKey#-{`string`}, {`number`}
-

Item key.

-
-
diff --git a/packages/docs/content/api/CAlert.api.mdx b/packages/docs/content/api/CAlert.api.mdx deleted file mode 100644 index 3fc61b0f..00000000 --- a/packages/docs/content/api/CAlert.api.mdx +++ /dev/null @@ -1,80 +0,0 @@ - -```jsx -import { CAlert } from '@coreui/react' -// or -import CAlert from '@coreui/react/src/components/alert/CAlert' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the component.

-
color#{`primary`}{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
-

Sets the color context of the component to one of CoreUI’s themed colors.

-
dismissible#-{`boolean`}
-

Optionally add a close button to alert and allow it to self dismiss.

-
onClose#-{`() => void`}
-

Callback fired when the component requests to be closed.

-
variant#-{`string`}
-

Set the alert variant to a solid.

-
visible#{`true`}{`boolean`}
-

Toggle the visibility of component.

-
-
diff --git a/packages/docs/content/api/CAlertHeading.api.mdx b/packages/docs/content/api/CAlertHeading.api.mdx deleted file mode 100644 index 833fb283..00000000 --- a/packages/docs/content/api/CAlertHeading.api.mdx +++ /dev/null @@ -1,40 +0,0 @@ - -```jsx -import { CAlertHeading } from '@coreui/react' -// or -import CAlertHeading from '@coreui/react/src/components/alert/CAlertHeading' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
as#{`h4`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'h4')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the base component.

-
-
diff --git a/packages/docs/content/api/CAlertLink.api.mdx b/packages/docs/content/api/CAlertLink.api.mdx deleted file mode 100644 index 8130ef08..00000000 --- a/packages/docs/content/api/CAlertLink.api.mdx +++ /dev/null @@ -1,30 +0,0 @@ - -```jsx -import { CAlertLink } from '@coreui/react' -// or -import CAlertLink from '@coreui/react/src/components/alert/CAlertLink' -``` - -
- - - - - - - - - - - - - - - - - - -
PropertyDefaultType
-

A string of all className you want applied to the base component.

-
-
diff --git a/packages/docs/content/api/CAvatar.api.mdx b/packages/docs/content/api/CAvatar.api.mdx deleted file mode 100644 index 3b2746fb..00000000 --- a/packages/docs/content/api/CAvatar.api.mdx +++ /dev/null @@ -1,90 +0,0 @@ - -```jsx -import { CAvatar } from '@coreui/react' -// or -import CAvatar from '@coreui/react/src/components/avatar/CAvatar' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the component.

-
color#-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
-

Sets the color context of the component to one of CoreUI’s themed colors.

-
shape#-{`'rounded'`}, {`'rounded-top'`}, {`'rounded-end'`}, {`'rounded-bottom'`}, {`'rounded-start'`}, {`'rounded-circle'`}, {`'rounded-pill'`}, {`'rounded-0'`}, {`'rounded-1'`}, {`'rounded-2'`}, {`'rounded-3'`}, {`string`}
-

Select the shape of the component.

-
size#-{`string`}
-

Size the component small, large, or extra large.

-
src#-{`string`}
-

The src attribute for the img element.

-
status#-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
-

Sets the color context of the status indicator to one of CoreUI’s themed colors.

-
textColor#-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`'primary-emphasis'`}, {`'secondary-emphasis'`}, {`'success-emphasis'`}, {`'danger-emphasis'`}, {`'warning-emphasis'`}, {`'info-emphasis'`}, {`'light-emphasis'`}, {`'body'`}, {`'body-emphasis'`}, {`'body-secondary'`}, {`'body-tertiary'`}, {`'black'`}, {`'black-50'`}, {`'white'`}, {`'white-50'`}, {`string`}
-

Sets the text color of the component to one of CoreUI’s themed colors.

-
-
diff --git a/packages/docs/content/api/CBackdrop.api.mdx b/packages/docs/content/api/CBackdrop.api.mdx deleted file mode 100644 index 570bae5a..00000000 --- a/packages/docs/content/api/CBackdrop.api.mdx +++ /dev/null @@ -1,40 +0,0 @@ - -```jsx -import { CBackdrop } from '@coreui/react' -// or -import CBackdrop from '@coreui/react/src/components/backdrop/CBackdrop' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#{`modal-backdrop`}{`string`}
-

A string of all className you want applied to the base component.

-
visible#-{`boolean`}
-

Toggle the visibility of modal component.

-
-
diff --git a/packages/docs/content/api/CBadge.api.mdx b/packages/docs/content/api/CBadge.api.mdx deleted file mode 100644 index d68482be..00000000 --- a/packages/docs/content/api/CBadge.api.mdx +++ /dev/null @@ -1,100 +0,0 @@ - -```jsx -import { CBadge } from '@coreui/react' -// or -import CBadge from '@coreui/react/src/components/badge/CBadge' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
as#{`span`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'span')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the component.

-
color#-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
-

Sets the color context of the component to one of CoreUI’s themed colors.

-
position#-{`'top-start'`}, {`'top-end'`}, {`'bottom-end'`}, {`'bottom-start'`}
-

Position badge in one of the corners of a link or button.

-
shape#-{`'rounded'`}, {`'rounded-top'`}, {`'rounded-end'`}, {`'rounded-bottom'`}, {`'rounded-start'`}, {`'rounded-circle'`}, {`'rounded-pill'`}, {`'rounded-0'`}, {`'rounded-1'`}, {`'rounded-2'`}, {`'rounded-3'`}, {`string`}
-

Select the shape of the component.

-
size#-{`'sm'`}
-

Size the component small.

-
textBgColor#5.0.0+-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
-

Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.

-
textColor#-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`'primary-emphasis'`}, {`'secondary-emphasis'`}, {`'success-emphasis'`}, {`'danger-emphasis'`}, {`'warning-emphasis'`}, {`'info-emphasis'`}, {`'light-emphasis'`}, {`'body'`}, {`'body-emphasis'`}, {`'body-secondary'`}, {`'body-tertiary'`}, {`'black'`}, {`'black-50'`}, {`'white'`}, {`'white-50'`}, {`string`}
-

Sets the text color of the component to one of CoreUI’s themed colors.

-
-
diff --git a/packages/docs/content/api/CBreadcrumb.api.mdx b/packages/docs/content/api/CBreadcrumb.api.mdx deleted file mode 100644 index e423b7c4..00000000 --- a/packages/docs/content/api/CBreadcrumb.api.mdx +++ /dev/null @@ -1,30 +0,0 @@ - -```jsx -import { CBreadcrumb } from '@coreui/react' -// or -import CBreadcrumb from '@coreui/react/src/components/breadcrumb/CBreadcrumb' -``` - -
- - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the component.

-
-
diff --git a/packages/docs/content/api/CBreadcrumbItem.api.mdx b/packages/docs/content/api/CBreadcrumbItem.api.mdx deleted file mode 100644 index bedfd7eb..00000000 --- a/packages/docs/content/api/CBreadcrumbItem.api.mdx +++ /dev/null @@ -1,60 +0,0 @@ - -```jsx -import { CBreadcrumbItem } from '@coreui/react' -// or -import CBreadcrumbItem from '@coreui/react/src/components/breadcrumb/CBreadcrumbItem' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
active#-{`boolean`}
-

Toggle the active state for the component.

-
as#5.4.0+-{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'li')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the base component.

-
href#-{`string`}
-

The {`href`} attribute for the inner {``} component.

-
-
diff --git a/packages/docs/content/api/CButton.api.mdx b/packages/docs/content/api/CButton.api.mdx deleted file mode 100644 index 94fc2053..00000000 --- a/packages/docs/content/api/CButton.api.mdx +++ /dev/null @@ -1,130 +0,0 @@ - -```jsx -import { CButton } from '@coreui/react' -// or -import CButton from '@coreui/react/src/components/button/CButton' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
active#-{`boolean`}
-

Toggle the active state for the component.

-
as#{`button`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'button')`}, {`(ElementType & 'cite')`}, {`(ElementType & 'data')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the base component.

-
color#-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
-

Sets the color context of the component to one of CoreUI’s themed colors.

-
disabled#-{`boolean`}
-

Toggle the disabled state for the component.

-
href#-{`string`}
-

The href attribute specifies the URL of the page the link goes to.

-
role#-{`string`}
-

The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers.

-
shape#-{`'rounded'`}, {`'rounded-top'`}, {`'rounded-end'`}, {`'rounded-bottom'`}, {`'rounded-start'`}, {`'rounded-circle'`}, {`'rounded-pill'`}, {`'rounded-0'`}, {`'rounded-1'`}, {`'rounded-2'`}, {`'rounded-3'`}, {`string`}
-

Select the shape of the component.

-
size#-{`'sm'`}, {`'lg'`}
-

Size the component small or large.

-
type#{`button`}{`'button'`}, {`'submit'`}, {`'reset'`}
-

Specifies the type of button. Always specify the type attribute for the {`

variant#-{`'outline'`}, {`'ghost'`}
-

Set the button variant to an outlined button or a ghost button.

-
-
diff --git a/packages/docs/content/api/CButtonGroup.api.mdx b/packages/docs/content/api/CButtonGroup.api.mdx deleted file mode 100644 index fa96bcc3..00000000 --- a/packages/docs/content/api/CButtonGroup.api.mdx +++ /dev/null @@ -1,50 +0,0 @@ - -```jsx -import { CButtonGroup } from '@coreui/react' -// or -import CButtonGroup from '@coreui/react/src/components/button-group/CButtonGroup' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
size#-{`'sm'`}, {`'lg'`}
-

Size the component small or large.

-
vertical#-{`boolean`}
-

Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.

-
-
diff --git a/packages/docs/content/api/CButtonToolbar.api.mdx b/packages/docs/content/api/CButtonToolbar.api.mdx deleted file mode 100644 index 2bfb6c0d..00000000 --- a/packages/docs/content/api/CButtonToolbar.api.mdx +++ /dev/null @@ -1,30 +0,0 @@ - -```jsx -import { CButtonToolbar } from '@coreui/react' -// or -import CButtonToolbar from '@coreui/react/src/components/button-group/CButtonToolbar' -``` - -
- - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
-
diff --git a/packages/docs/content/api/CCallout.api.mdx b/packages/docs/content/api/CCallout.api.mdx deleted file mode 100644 index 63e8222e..00000000 --- a/packages/docs/content/api/CCallout.api.mdx +++ /dev/null @@ -1,40 +0,0 @@ - -```jsx -import { CCallout } from '@coreui/react' -// or -import CCallout from '@coreui/react/src/components/callout/CCallout' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
color#-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
-

Sets the color context of the component to one of CoreUI’s themed colors.

-
-
diff --git a/packages/docs/content/api/CCard.api.mdx b/packages/docs/content/api/CCard.api.mdx deleted file mode 100644 index 3f342cc4..00000000 --- a/packages/docs/content/api/CCard.api.mdx +++ /dev/null @@ -1,60 +0,0 @@ - -```jsx -import { CCard } from '@coreui/react' -// or -import CCard from '@coreui/react/src/components/card/CCard' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
color#-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
-

Sets the color context of the component to one of CoreUI’s themed colors.

-
textBgColor#5.0.0+-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
-

Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.

-
textColor#-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`'primary-emphasis'`}, {`'secondary-emphasis'`}, {`'success-emphasis'`}, {`'danger-emphasis'`}, {`'warning-emphasis'`}, {`'info-emphasis'`}, {`'light-emphasis'`}, {`'body'`}, {`'body-emphasis'`}, {`'body-secondary'`}, {`'body-tertiary'`}, {`'black'`}, {`'black-50'`}, {`'white'`}, {`'white-50'`}, {`string`}
-

Sets the text color context of the component to one of CoreUI’s themed colors.

-
-
diff --git a/packages/docs/content/api/CCardBody.api.mdx b/packages/docs/content/api/CCardBody.api.mdx deleted file mode 100644 index c5c0ee2d..00000000 --- a/packages/docs/content/api/CCardBody.api.mdx +++ /dev/null @@ -1,30 +0,0 @@ - -```jsx -import { CCardBody } from '@coreui/react' -// or -import CCardBody from '@coreui/react/src/components/card/CCardBody' -``` - -
- - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
-
diff --git a/packages/docs/content/api/CCardFooter.api.mdx b/packages/docs/content/api/CCardFooter.api.mdx deleted file mode 100644 index 8a1b7124..00000000 --- a/packages/docs/content/api/CCardFooter.api.mdx +++ /dev/null @@ -1,30 +0,0 @@ - -```jsx -import { CCardFooter } from '@coreui/react' -// or -import CCardFooter from '@coreui/react/src/components/card/CCardFooter' -``` - -
- - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
-
diff --git a/packages/docs/content/api/CCardGroup.api.mdx b/packages/docs/content/api/CCardGroup.api.mdx deleted file mode 100644 index 9c71e8cb..00000000 --- a/packages/docs/content/api/CCardGroup.api.mdx +++ /dev/null @@ -1,30 +0,0 @@ - -```jsx -import { CCardGroup } from '@coreui/react' -// or -import CCardGroup from '@coreui/react/src/components/card/CCardGroup' -``` - -
- - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
-
diff --git a/packages/docs/content/api/CCardHeader.api.mdx b/packages/docs/content/api/CCardHeader.api.mdx deleted file mode 100644 index d08c9d55..00000000 --- a/packages/docs/content/api/CCardHeader.api.mdx +++ /dev/null @@ -1,40 +0,0 @@ - -```jsx -import { CCardHeader } from '@coreui/react' -// or -import CCardHeader from '@coreui/react/src/components/card/CCardHeader' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
as#{`div`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'div')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the base component.

-
-
diff --git a/packages/docs/content/api/CCardImage.api.mdx b/packages/docs/content/api/CCardImage.api.mdx deleted file mode 100644 index 8720dcc8..00000000 --- a/packages/docs/content/api/CCardImage.api.mdx +++ /dev/null @@ -1,50 +0,0 @@ - -```jsx -import { CCardImage } from '@coreui/react' -// or -import CCardImage from '@coreui/react/src/components/card/CCardImage' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
as#{`img`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'img')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the base component.

-
orientation#-{`'top'`}, {`'bottom'`}
-

Optionally orientate the image to the top, bottom, or make it overlaid across the card.

-
-
diff --git a/packages/docs/content/api/CCardImageOverlay.api.mdx b/packages/docs/content/api/CCardImageOverlay.api.mdx deleted file mode 100644 index 779ea0b9..00000000 --- a/packages/docs/content/api/CCardImageOverlay.api.mdx +++ /dev/null @@ -1,30 +0,0 @@ - -```jsx -import { CCardImageOverlay } from '@coreui/react' -// or -import CCardImageOverlay from '@coreui/react/src/components/card/CCardImageOverlay' -``` - -
- - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
-
diff --git a/packages/docs/content/api/CCardLink.api.mdx b/packages/docs/content/api/CCardLink.api.mdx deleted file mode 100644 index 38164730..00000000 --- a/packages/docs/content/api/CCardLink.api.mdx +++ /dev/null @@ -1,40 +0,0 @@ - -```jsx -import { CCardLink } from '@coreui/react' -// or -import CCardLink from '@coreui/react/src/components/card/CCardLink' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
-

A string of all className you want applied to the base component.

-
-

The href attribute specifies the URL of the page the link goes to.

-
-
diff --git a/packages/docs/content/api/CCardSubtitle.api.mdx b/packages/docs/content/api/CCardSubtitle.api.mdx deleted file mode 100644 index 9bc00752..00000000 --- a/packages/docs/content/api/CCardSubtitle.api.mdx +++ /dev/null @@ -1,40 +0,0 @@ - -```jsx -import { CCardSubtitle } from '@coreui/react' -// or -import CCardSubtitle from '@coreui/react/src/components/card/CCardSubtitle' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
as#{`h6`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'h6')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the component.

-
-
diff --git a/packages/docs/content/api/CCardText.api.mdx b/packages/docs/content/api/CCardText.api.mdx deleted file mode 100644 index 4bcda1ab..00000000 --- a/packages/docs/content/api/CCardText.api.mdx +++ /dev/null @@ -1,40 +0,0 @@ - -```jsx -import { CCardText } from '@coreui/react' -// or -import CCardText from '@coreui/react/src/components/card/CCardText' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
as#{`p`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'p')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the component.

-
-
diff --git a/packages/docs/content/api/CCardTitle.api.mdx b/packages/docs/content/api/CCardTitle.api.mdx deleted file mode 100644 index ed493ae4..00000000 --- a/packages/docs/content/api/CCardTitle.api.mdx +++ /dev/null @@ -1,40 +0,0 @@ - -```jsx -import { CCardTitle } from '@coreui/react' -// or -import CCardTitle from '@coreui/react/src/components/card/CCardTitle' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
as#{`h5`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'h5')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the component.

-
-
diff --git a/packages/docs/content/api/CCarousel.api.mdx b/packages/docs/content/api/CCarousel.api.mdx deleted file mode 100644 index 067f171a..00000000 --- a/packages/docs/content/api/CCarousel.api.mdx +++ /dev/null @@ -1,140 +0,0 @@ - -```jsx -import { CCarousel } from '@coreui/react' -// or -import CCarousel from '@coreui/react/src/components/carousel/CCarousel' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
activeIndex#{`0`}{`number`}
-

index of the active item.

-
className#-{`string`}
-

A string of all className you want applied to the base component.

-
controls#-{`boolean`}
-

Adding in the previous and next controls.

-
dark#-{`boolean`}
-

Add darker controls, indicators, and captions.

-
indicators#-{`boolean`}
-

Adding indicators at the bottom of the carousel for each item.

-
interval#{`5000`}{`number`}, {`boolean`}
-

The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.

-
onSlid#-{`(active: number, direction: string) => void`}
-

Callback fired when a slide transition end.

-
onSlide#-{`(active: number, direction: string) => void`}
-

Callback fired when a slide transition starts.

-
pause#{`hover`}{`boolean`}, {`'hover'`}
-

If set to 'hover', pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it.

-
touch#4.5.0+{`true`}{`boolean`}
-

Set whether the carousel should support left/right swipe interactions on touchscreen devices.

-
transition#-{`'slide'`}, {`'crossfade'`}
-

Set type of the transition.

-
wrap#{`true`}{`boolean`}
-

Set whether the carousel should cycle continuously or have hard stops.

-
-
diff --git a/packages/docs/content/api/CCarouselCaption.api.mdx b/packages/docs/content/api/CCarouselCaption.api.mdx deleted file mode 100644 index 155f973a..00000000 --- a/packages/docs/content/api/CCarouselCaption.api.mdx +++ /dev/null @@ -1,30 +0,0 @@ - -```jsx -import { CCarouselCaption } from '@coreui/react' -// or -import CCarouselCaption from '@coreui/react/src/components/carousel/CCarouselCaption' -``` - -
- - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
-
diff --git a/packages/docs/content/api/CCarouselItem.api.mdx b/packages/docs/content/api/CCarouselItem.api.mdx deleted file mode 100644 index eedb86a1..00000000 --- a/packages/docs/content/api/CCarouselItem.api.mdx +++ /dev/null @@ -1,40 +0,0 @@ - -```jsx -import { CCarouselItem } from '@coreui/react' -// or -import CCarouselItem from '@coreui/react/src/components/carousel/CCarouselItem' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
interval#{`false`}{`number`}, {`boolean`}
-

The amount of time to delay between automatically cycling an item.

-
-
diff --git a/packages/docs/content/api/CChart.api.mdx b/packages/docs/content/api/CChart.api.mdx deleted file mode 100644 index 7065326e..00000000 --- a/packages/docs/content/api/CChart.api.mdx +++ /dev/null @@ -1,170 +0,0 @@ - -```jsx -import { CChart } from '@coreui/react-chartjs' -// or -import CChart from '@coreui/react-chartjs/src/CChart' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
customTooltips#{`true`}{`boolean`}
-

Enables custom html based tooltips instead of standard tooltips.

-
data#-{`ChartData`}, {`((canvas: HTMLCanvasElement) => ChartData<...>)`}
-

The data object that is passed into the Chart.js chart (more info).

-
fallbackContent#-{`ReactNode`}
-

A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions.

-
getDatasetAtEvent#-{`(dataset: InteractionItem[], event: MouseEvent) => void`}
-

Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.

-
getElementAtEvent#-{`(element: InteractionItem[], event: MouseEvent) => void`}
-

Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.

-
getElementsAtEvent#-{`(elements: InteractionItem[], event: MouseEvent) => void`}
-

Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.

-
height#{`150`}{`number`}
-

Height attribute applied to the rendered canvas.

-
id#-{`string`}
-

ID attribute applied to the rendered canvas.

-
options#-{`_DeepPartialObject & ElementChartOptions & PluginChartOptions<...> & DatasetChartOptions<...> & ScaleChartOptions<...>>`}
-

The options object that is passed into the Chart.js chart.

-
plugins#{`[]`}{`Plugin[]`}
-

The plugins array that is passed into the Chart.js chart (more info)

-
redraw#{`false`}{`boolean`}
-

If true, will tear down and redraw chart on all updates.

-
type#{`bar`}{`{'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}`}
-

Chart.js chart type.

-
width#{`300`}{`number`}
-

Width attribute applied to the rendered canvas.

-
wrapper#{`true`}{`boolean`}
-

Put the chart into the wrapper div element.

-
-
diff --git a/packages/docs/content/api/CCharts.api.mdx b/packages/docs/content/api/CCharts.api.mdx deleted file mode 100644 index 9ee78ee2..00000000 --- a/packages/docs/content/api/CCharts.api.mdx +++ /dev/null @@ -1,160 +0,0 @@ - -```jsx -import { CChartScatter } from '@coreui/react-chartjs' -// or -import CChartScatter from '@coreui/react-chartjs/src/CCharts' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
customTooltips#{`true`}{`boolean`}
-

Enables custom html based tooltips instead of standard tooltips.

-
data#-{`ChartData`}, {`((canvas: HTMLCanvasElement) => ChartData<...>)`}
-

The data object that is passed into the Chart.js chart (more info).

-
fallbackContent#-{`ReactNode`}
-

A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions.

-
getDatasetAtEvent#-{`(dataset: InteractionItem[], event: MouseEvent) => void`}
-

Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.

-
getElementAtEvent#-{`(element: InteractionItem[], event: MouseEvent) => void`}
-

Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.

-
getElementsAtEvent#-{`(elements: InteractionItem[], event: MouseEvent) => void`}
-

Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.

-
height#{`150`}{`number`}
-

Height attribute applied to the rendered canvas.

-
id#-{`string`}
-

ID attribute applied to the rendered canvas.

-
options#-{`_DeepPartialObject & ElementChartOptions & PluginChartOptions<...> & DatasetChartOptions<...> & ScaleChartOptions<...>>`}
-

The options object that is passed into the Chart.js chart.

-
plugins#-{`Plugin[]`}
-

The plugins array that is passed into the Chart.js chart (more info)

-
redraw#{`false`}{`boolean`}
-

If true, will tear down and redraw chart on all updates.

-
width#{`300`}{`number`}
-

Width attribute applied to the rendered canvas.

-
wrapper#{`true`}{`boolean`}
-

Put the chart into the wrapper div element.

-
-
diff --git a/packages/docs/content/api/CChip.api.mdx b/packages/docs/content/api/CChip.api.mdx deleted file mode 100644 index 1a9d2021..00000000 --- a/packages/docs/content/api/CChip.api.mdx +++ /dev/null @@ -1,220 +0,0 @@ - -```jsx -import { CChip } from '@coreui/react' -// or -import CChip from '@coreui/react/src/components/chip/CChip' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
active#-{`boolean`}
-

Toggles the active state of the React Chip component for non-selectable usage.

-
ariaRemoveLabel#{`Remove`}{`string`}
-

Provides an accessible label for the remove button in the React Chip component.

-
as#{`span`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'span')`}, {`(ElementType & 'filter')`}, {`(ElementType & 'slot')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Specifies the root element or custom component used by the React Chip component.

-
className#-{`string`}
-

Adds custom classes to the React Chip root element.

-
clickable#-{`boolean`}
-

Enables interactive hover styling and pointer cursor for the React Chip component.

-
color#-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
-

Sets the contextual color of the React Chip component using CoreUI theme colors.

-
disabled#-{`boolean`}
-

Disables the React Chip component and removes interactive behavior.

-
filter#-{`boolean`}
-

Turns the React Chip component into a filter chip. A filter chip is selectable and shows a leading check icon while selected.

-
onDeselect#-{`(event: MouseEvent | KeyboardEvent) => void`}
-

Callback fired when the React Chip component becomes deselected.

-
onRemove#-{`(event: KeyboardEvent | MouseEvent) => void`}
-

Callback fired when the React Chip component requests removal by button click or keyboard action.

-
onSelect#-{`(event: MouseEvent | KeyboardEvent) => void`}
-

Callback fired when the React Chip component becomes selected.

-
onSelectedChange#-{`(selected: boolean, event: MouseEvent | KeyboardEvent) => void`}
-

Callback fired when the selected state of the React Chip component changes.

-
removable#-{`boolean`}
-

Displays a remove button inside the React Chip component.

-
removeIcon#-{`ReactNode`}
-

Replaces the default remove icon with a custom icon node in the React Chip component.

-
selectable#-{`boolean`}
-

Enables selectable behavior and keyboard toggle support for the React Chip component.

-
selected#-{`boolean`}
-

Controls the selected state of a selectable React Chip component.

-
selectedIcon#-{`ReactNode`}
-

Replaces the default selected icon shown by a filter React Chip component with a custom icon node.

-
size#-{`'sm'`}, {`'lg'`}
-

Sets the size of the React Chip component to small or large.

-
value#-{`string`}
-

Sets the value associated with the React Chip component, used by {`CChipSet`} to track selection.

-
variant#-{`'outline'`}
-

Sets the visual variant of the React Chip component to outline style.

-
-
diff --git a/packages/docs/content/api/CChipInput.api.mdx b/packages/docs/content/api/CChipInput.api.mdx deleted file mode 100644 index a039bfda..00000000 --- a/packages/docs/content/api/CChipInput.api.mdx +++ /dev/null @@ -1,260 +0,0 @@ - -```jsx -import { CChipInput } from '@coreui/react' -// or -import CChipInput from '@coreui/react/src/components/form/CChipInput' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
children#-{`ReactNode`}
-

Declarative {`CChip`} children used as the initial chips. Their values seed the uncontrolled value when {`defaultValue`} is not provided (parity with the vanilla Chip Input).

-
chipClassName#-{`ChipClassName`}
-

Adds custom classes to chips rendered by the React Chip Input component. Accepts a static className or a resolver function based on chip value.

-
className#-{`string`}
-

Adds custom classes to the React Chip Input component root element.

-
createOnBlur#{`true`}{`boolean`}
-

Creates a new chip when the React Chip Input component loses focus with a pending value.

-
defaultValue#{`[]`}{`string[]`}
-

Sets the initial uncontrolled values rendered by the React Chip Input component.

-
disabled#-{`boolean`}
-

Disables the React Chip Input component and prevents adding, removing, or selecting chips.

-
filter#-{`boolean`}
-

Renders the chips as filter chips, each showing a leading check icon while selected. Implies {`selectable`}.

-
id#-{`string`}
-

Sets the {`id`} of the internal text input rendered by the React Chip Input component.

-
label#-{`ReactNode`}
-

Renders an inline label inside the React Chip Input component container.

-
maxChips#{`null`}{`number`}
-

Sets the maximum number of chips that can be created in the React Chip Input component.

-
name#-{`string`}
-

Sets the name of the hidden input used by the React Chip Input component for form submission.

-
onAdd#-{`(value: string) => void`}
-

Callback fired when the React Chip Input component adds a new chip.

-
onChange#-{`(values: string[]) => void`}
-

Callback fired when the value list of the React Chip Input component changes.

-
onInput#-{`(value: string) => void`}
-

Callback fired when the internal text input value changes in the React Chip Input component.

-
onRemove#-{`(value: string) => void`}
-

Callback fired when the React Chip Input component removes a chip.

-
onSelect#-{`(selected: string[]) => void`}
-

Callback fired when the selected chip values change in the React Chip Input component.

-
placeholder#``{`string`}
-

Sets placeholder text for the internal input of the React Chip Input component.

-
readOnly#-{`boolean`}
-

Makes the React Chip Input component readonly while keeping values visible.

-
removable#{`true`}{`boolean`}
-

Displays remove buttons on chips managed by the React Chip Input component.

-
selectable#-{`boolean`}
-

Enables chip selection behavior in the React Chip Input component.

-
selectionMode#-{`'single'`}, {`'multiple'`}
-

Sets how many chips can be selected at once in the React Chip Input component.

-
separator#{`,`}{`string`}
-

Sets the separator character used to create chips while typing or pasting in the React Chip Input component.

-
size#-{`'sm'`}, {`'lg'`}
-

Sets the size of the React Chip Input component to small or large.

-
value#-{`string[]`}
-

Controls the values rendered by the React Chip Input component.

-
-
diff --git a/packages/docs/content/api/CChipSet.api.mdx b/packages/docs/content/api/CChipSet.api.mdx deleted file mode 100644 index 3f2f418f..00000000 --- a/packages/docs/content/api/CChipSet.api.mdx +++ /dev/null @@ -1,180 +0,0 @@ - -```jsx -import { CChipSet } from '@coreui/react' -// or -import CChipSet from '@coreui/react/src/components/chip-set/CChipSet' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
ariaRemoveLabel#-{`string`}
-

Provides an accessible label for the remove button of every chip rendered by the React Chip Set component.

-
as#{`div`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'div')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Specifies the root element or custom component used by the React Chip Set component.

-
chips#-{`(string | CChipSetItem)[]`}
-

Renders chips from data instead of children. Each item is a string or an object with a {`value`}, an optional {`label`}, and any {`CChip`} props. Children are used when this is omitted.

-
className#-{`string`}
-

Adds custom classes to the React Chip Set root element.

-
defaultChips#-{`(string | CChipSetItem)[]`}
-

Sets the initial uncontrolled chips. In this mode the React Chip Set component owns the list and removes chips itself; use {`chips`} (with {`onRemove`}) for a controlled list.

-
defaultSelected#-{`string[]`}
-

Sets the initial uncontrolled selection of the React Chip Set component.

-
disabled#-{`boolean`}
-

Disables every chip rendered by the React Chip Set component.

-
filter#-{`boolean`}
-

Turns the chips into filter chips, each showing a leading check icon while selected.

-
onRemove#-{`(value: string) => void`}
-

Callback fired when a chip requests removal. The chips are controlled by their rendered children, so remove the chip from your data in response.

-
onSelect#-{`(selected: string[]) => void`}
-

Callback fired when the selected chip values of the React Chip Set component change.

-
removable#-{`boolean`}
-

Displays a remove button on every chip rendered by the React Chip Set component.

-
removeIcon#-{`ReactNode`}
-

Replaces the default remove icon on every chip with a custom icon node.

-
selectable#-{`boolean`}
-

Enables selection behavior for the chips rendered by the React Chip Set component.

-
selected#-{`string[]`}
-

Controls the selected chip values of the React Chip Set component.

-
selectedIcon#-{`ReactNode`}
-

Replaces the default selected icon shown by filter chips with a custom icon node.

-
selectionMode#-{`'single'`}, {`'multiple'`}
-

Sets how many chips can be selected at once in the React Chip Set component.

-
-
diff --git a/packages/docs/content/api/CCloseButton.api.mdx b/packages/docs/content/api/CCloseButton.api.mdx deleted file mode 100644 index 5e87320d..00000000 --- a/packages/docs/content/api/CCloseButton.api.mdx +++ /dev/null @@ -1,60 +0,0 @@ - -```jsx -import { CCloseButton } from '@coreui/react' -// or -import CCloseButton from '@coreui/react/src/components/close-button/CCloseButton' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
dark#-{`boolean`}
-

Invert the default color.

-
disabled#-{`boolean`}
-

Toggle the disabled state for the component.

-
white#Deprecated 5.0.0-{`boolean`}
-

Change the default color to white.

-
-
diff --git a/packages/docs/content/api/CCol.api.mdx b/packages/docs/content/api/CCol.api.mdx deleted file mode 100644 index a4158913..00000000 --- a/packages/docs/content/api/CCol.api.mdx +++ /dev/null @@ -1,90 +0,0 @@ - -```jsx -import { CCol } from '@coreui/react' -// or -import CCol from '@coreui/react/src/components/grid/CCol' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
lg#-{`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}
-

The number of columns/offset/order on large devices (<1200px).

-
md#-{`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}
-

The number of columns/offset/order on medium devices (<992px).

-
sm#-{`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}
-

The number of columns/offset/order on small devices (<768px).

-
xl#-{`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}
-

The number of columns/offset/order on X-Large devices (<1400px).

-
xs#-{`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}
-

The number of columns/offset/order on extra small devices (<576px).

-
xxl#-{`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}
-

The number of columns/offset/order on XX-Large devices (≥1400px).

-
-
diff --git a/packages/docs/content/api/CCollapse.api.mdx b/packages/docs/content/api/CCollapse.api.mdx deleted file mode 100644 index c2943464..00000000 --- a/packages/docs/content/api/CCollapse.api.mdx +++ /dev/null @@ -1,70 +0,0 @@ - -```jsx -import { CCollapse } from '@coreui/react' -// or -import CCollapse from '@coreui/react/src/components/collapse/CCollapse' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
horizontal#-{`boolean`}
-

Set horizontal collapsing to transition the width instead of height.

-
onHide#-{`() => void`}
-

Callback fired when the component requests to be hidden.

-
onShow#-{`() => void`}
-

Callback fired when the component requests to be shown.

-
visible#-{`boolean`}
-

Toggle the visibility of component.

-
-
diff --git a/packages/docs/content/api/CConditionalPortal.api.mdx b/packages/docs/content/api/CConditionalPortal.api.mdx deleted file mode 100644 index 9afb8ca0..00000000 --- a/packages/docs/content/api/CConditionalPortal.api.mdx +++ /dev/null @@ -1,40 +0,0 @@ - -```jsx -import { CConditionalPortal } from '@coreui/react' -// or -import CConditionalPortal from '@coreui/react/src/components/conditional-portal/CConditionalPortal' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
container#4.11.0+-{`DocumentFragment`}, {`Element`}, {`(() => DocumentFragment | Element)`}
-

An HTML element or function that returns a single element, with {`document.body`} as the default.

-
portal#-{`boolean`}
-

Render some children into a different part of the DOM

-
-
diff --git a/packages/docs/content/api/CContainer.api.mdx b/packages/docs/content/api/CContainer.api.mdx deleted file mode 100644 index 86ab71f8..00000000 --- a/packages/docs/content/api/CContainer.api.mdx +++ /dev/null @@ -1,90 +0,0 @@ - -```jsx -import { CContainer } from '@coreui/react' -// or -import CContainer from '@coreui/react/src/components/grid/CContainer' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
fluid#-{`boolean`}
-

Set container 100% wide, spanning the entire width of the viewport.

-
lg#-{`boolean`}
-

Set container 100% wide until large breakpoint.

-
md#-{`boolean`}
-

Set container 100% wide until medium breakpoint.

-
sm#-{`boolean`}
-

Set container 100% wide until small breakpoint.

-
xl#-{`boolean`}
-

Set container 100% wide until X-large breakpoint.

-
xxl#-{`boolean`}
-

Set container 100% wide until XX-large breakpoint.

-
-
diff --git a/packages/docs/content/api/CDropdown.api.mdx b/packages/docs/content/api/CDropdown.api.mdx deleted file mode 100644 index 6ac25fee..00000000 --- a/packages/docs/content/api/CDropdown.api.mdx +++ /dev/null @@ -1,249 +0,0 @@ - -```jsx -import { CDropdown } from '@coreui/react' -// or -import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
alignment#-{`'start'`}, {`'end'`}, {`{ xs: 'start' | 'end' }`}, {`{ sm: 'start' | 'end' }`}, {`{ md: 'start' | 'end' }`}, {`{ lg: 'start' | 'end' }`}, {`{ xl: 'start' | 'end'}`}, {`{ xxl: 'start' | 'end'}`}
-

Specifies the alignment of the React Dropdown Menu within this React Dropdown.

- - Toggle dropdown - - Action - Another Action - -`} /> -
as#{`div`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'div')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Determines the root node component (native HTML element or a custom React component) for the React Dropdown.

-
autoClose#{`true`}{`boolean`}, {`'inside'`}, {`'outside'`}
-

Configures automatic closing behavior for the React Dropdown:

-
    -
  • {`true`} - Close on clicks inside or outside of the React Dropdown Menu.
    • -
  • {`false`} - Disable auto-close; manually call {`hide`} or {`toggle`} (also not closed by {`Escape`}).
    • -
  • {`'inside'`} - Close only when clicking inside the React Dropdown Menu.
    • -
  • {`'outside'`} - Close only when clicking outside the React Dropdown Menu.
    • -
- `} /> -
className#-{`string`}
-

Adds custom classes to the React Dropdown root element.

-
container#4.11.0+-{`Element`}, {`DocumentFragment`}, {`(() => Element | DocumentFragment)`}
-

Appends the React Dropdown Menu to a specific element. You can pass an HTML element or a function returning an element. Defaults to {`document.body`}.

- `} /> -
dark#-{`boolean`}
-

Applies a darker color scheme to the React Dropdown Menu, often used within dark navbars.

-
direction#-{`'center'`}, {`'dropup'`}, {`'dropup-center'`}, {`'dropend'`}, {`'dropstart'`}
-

Specifies the direction of the React Dropdown.

-
offset#{`[0, 2]`}{`[number, number]`}
-

Defines x and y offsets ([x, y]) for the React Dropdown Menu relative to its target.

- - ... -`} /> -
onHide#4.9.0+-{`() => void`}
-

Callback fired right before the React Dropdown becomes hidden.

-
onShow#-{`() => void`}
-

Callback fired immediately after the React Dropdown is displayed.

-
placement#{`bottom-start`}{`'auto'`}, {`'auto-start'`}, {`'auto-end'`}, {`'top-end'`}, {`'top'`}, {`'top-start'`}, {`'bottom-end'`}, {`'bottom'`}, {`'bottom-start'`}, {`'right-start'`}, {`'right'`}, {`'right-end'`}, {`'left-start'`}, {`'left'`}, {`'left-end'`}
-

Determines the placement of the React Dropdown Menu after Popper.js modifiers.

-
popper#{`true`}{`boolean`}
-

Enables or disables dynamic positioning via Popper.js for the React Dropdown Menu.

-
popperConfig#5.5.0+-{`Partial`}, {`((defaultPopperConfig: Partial) => Partial)`}
-

Provides a custom Popper.js configuration or a function that returns a modified Popper.js configuration for advanced positioning of the React Dropdown Menu. Read more

- ...`} /> -
portal#4.8.0+{`false`}{`boolean`}
-

Renders the React Dropdown Menu using a React Portal, allowing it to escape the DOM hierarchy for improved positioning.

-
reference#5.9.0+{`toggle`}{`HTMLElement`}, {`'parent'`}, {`'toggle'`}, {`RefObject`}
-

Sets the reference element for positioning the React Dropdown Menu.

-
    -
  • {`toggle`} - The React Dropdown Toggle button (default).
    • -
  • {`parent`} - The React Dropdown wrapper element.
    • -
  • {`HTMLElement`} - A custom HTML element.
    • -
  • {`React.RefObject`} - A custom reference element.
    • -
- - Toggle dropdown - - Action - Another Action - -`} /> -
variant#{`dropdown`}{`'btn-group'`}, {`'dropdown'`}, {`'input-group'`}, {`'nav-item'`}
-

Defines the visual variant of the React Dropdown

-
visible#{`false`}{`boolean`}
-

Controls the visibility of the React Dropdown Menu:

-
    -
  • {`true`} - Visible
    • -
  • {`false`} - Hidden
    • -
- - ... -`} /> -
-
diff --git a/packages/docs/content/api/CDropdownDivider.api.mdx b/packages/docs/content/api/CDropdownDivider.api.mdx deleted file mode 100644 index 35021a7c..00000000 --- a/packages/docs/content/api/CDropdownDivider.api.mdx +++ /dev/null @@ -1,30 +0,0 @@ - -```jsx -import { CDropdownDivider } from '@coreui/react' -// or -import CDropdownDivider from '@coreui/react/src/components/dropdown/CDropdownDivider' -``` - -
- - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the component.

-
-
diff --git a/packages/docs/content/api/CDropdownHeader.api.mdx b/packages/docs/content/api/CDropdownHeader.api.mdx deleted file mode 100644 index c44e8ac8..00000000 --- a/packages/docs/content/api/CDropdownHeader.api.mdx +++ /dev/null @@ -1,40 +0,0 @@ - -```jsx -import { CDropdownHeader } from '@coreui/react' -// or -import CDropdownHeader from '@coreui/react/src/components/dropdown/CDropdownHeader' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
as#{`h6`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'h6')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the component.

-
-
diff --git a/packages/docs/content/api/CDropdownItem.api.mdx b/packages/docs/content/api/CDropdownItem.api.mdx deleted file mode 100644 index e81357b0..00000000 --- a/packages/docs/content/api/CDropdownItem.api.mdx +++ /dev/null @@ -1,70 +0,0 @@ - -```jsx -import { CDropdownItem } from '@coreui/react' -// or -import CDropdownItem from '@coreui/react/src/components/dropdown/CDropdownItem' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
active#-{`boolean`}
-

Toggle the active state for the component.

-
as#{`a`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'a')`}, {`(ElementType & 'cite')`}, {`(ElementType & 'data')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the component.

-
disabled#-{`boolean`}
-

Toggle the disabled state for the component.

-
href#-{`string`}
-

The href attribute specifies the URL of the page the link goes to.

-
-
diff --git a/packages/docs/content/api/CDropdownItemPlain.api.mdx b/packages/docs/content/api/CDropdownItemPlain.api.mdx deleted file mode 100644 index be30143b..00000000 --- a/packages/docs/content/api/CDropdownItemPlain.api.mdx +++ /dev/null @@ -1,40 +0,0 @@ - -```jsx -import { CDropdownItemPlain } from '@coreui/react' -// or -import CDropdownItemPlain from '@coreui/react/src/components/dropdown/CDropdownItemPlain' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
as#{`span`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'span')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the component.

-
-
diff --git a/packages/docs/content/api/CDropdownMenu.api.mdx b/packages/docs/content/api/CDropdownMenu.api.mdx deleted file mode 100644 index ebb4203a..00000000 --- a/packages/docs/content/api/CDropdownMenu.api.mdx +++ /dev/null @@ -1,40 +0,0 @@ - -```jsx -import { CDropdownMenu } from '@coreui/react' -// or -import CDropdownMenu from '@coreui/react/src/components/dropdown/CDropdownMenu' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
as#{`ul`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'ul')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the base component.

-
-
diff --git a/packages/docs/content/api/CDropdownToggle.api.mdx b/packages/docs/content/api/CDropdownToggle.api.mdx deleted file mode 100644 index cd56fb6f..00000000 --- a/packages/docs/content/api/CDropdownToggle.api.mdx +++ /dev/null @@ -1,180 +0,0 @@ - -```jsx -import { CDropdownToggle } from '@coreui/react' -// or -import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownToggle' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
active#-{`boolean`}
-

Toggle the active state for the component.

-
as#-{`ElementType`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
caret#{`true`}{`boolean`}
-

Enables pseudo element caret on toggler.

-
className#-{`string`}
-

A string of all className you want applied to the base component.

-
color#-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
-

Sets the color context of the component to one of CoreUI’s themed colors.

-
custom#-{`boolean`}
-

Create a custom toggler which accepts any content.

-
disabled#-{`boolean`}
-

Toggle the disabled state for the component.

-
href#-{`string`}
-

The href attribute specifies the URL of the page the link goes to.

-
-

If a dropdown {`variant`} is set to {`nav-item`} then render the toggler as a link instead of a button.

-
role#-{`string`}
-

The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers.

-
shape#-{`'rounded'`}, {`'rounded-top'`}, {`'rounded-end'`}, {`'rounded-bottom'`}, {`'rounded-start'`}, {`'rounded-circle'`}, {`'rounded-pill'`}, {`'rounded-0'`}, {`'rounded-1'`}, {`'rounded-2'`}, {`'rounded-3'`}, {`string`}
-

Select the shape of the component.

-
size#-{`'sm'`}, {`'lg'`}
-

Size the component small or large.

-
split#-{`boolean`}
-

Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of {`.dropdown-toggle-split`} className for proper spacing around the dropdown caret.

-
splitLabel#5.9.0+{`Toggle Dropdown`}{`string`}
-

Screen reader label for split button dropdown toggle.

-
trigger#{`click`}{`'hover'`}, {`'focus'`}, {`'click'`}
-

Sets which event handlers you'd like provided to your toggle prop. You can specify one trigger or an array of them.

-
variant#-{`'outline'`}, {`'ghost'`}
-

Set the button variant to an outlined button or a ghost button.

-
-
diff --git a/packages/docs/content/api/CFocusTrap.api.mdx b/packages/docs/content/api/CFocusTrap.api.mdx deleted file mode 100644 index 9293b7ff..00000000 --- a/packages/docs/content/api/CFocusTrap.api.mdx +++ /dev/null @@ -1,98 +0,0 @@ - -```jsx -import { CFocusTrap } from '@coreui/react' -// or -import CFocusTrap from '@coreui/react/src/components/focus-trap/CFocusTrap' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
active#{`true`}{`boolean`}
-

Controls whether the focus trap is active or inactive. When {`true`}, focus will be trapped within the child element. When {`false`}, normal focus behavior is restored.

-
additionalContainer#-{`RefObject`}
-

Additional container elements to include in the focus trap. Useful for floating elements like tooltips or popovers that are rendered outside the main container but should be part of the trap.

-
children#-{`ReactElement`}
-

Single React element that renders a DOM node and forwards refs properly. The focus trap will be applied to this element and all its focusable descendants.
- Requirements:

-
    -
  • Must be a single ReactElement (not an array or fragment)
    • -
  • Must forward the ref to a DOM element
    • -
  • Should contain focusable elements for proper trap behavior
    • -
-
focusFirstElement#{`false`}{`boolean`}
-

Controls whether to focus the first selectable element or the container itself. When {`true`}, focuses the first tabbable element within the container. When {`false`}, focuses the container element directly.
- This is useful for containers that should receive focus themselves, such as scrollable regions or custom interactive components.

-
onActivate#-{`() => void`}
-

Callback function invoked when the focus trap becomes active. Useful for triggering additional accessibility announcements or analytics.

-
onDeactivate#-{`() => void`}
-

Callback function invoked when the focus trap is deactivated. Can be used for cleanup, analytics, or triggering state changes.

-
restoreFocus#{`true`}{`boolean`}
-

Automatically restores focus to the previously focused element when the trap is deactivated. This is crucial for accessibility as it maintains the user's place in the document when returning from modal dialogs or overlay components.
- Recommended to be {`true`} for modal dialogs and popover components.

-
-
diff --git a/packages/docs/content/api/CFooter.api.mdx b/packages/docs/content/api/CFooter.api.mdx deleted file mode 100644 index a163a037..00000000 --- a/packages/docs/content/api/CFooter.api.mdx +++ /dev/null @@ -1,40 +0,0 @@ - -```jsx -import { CFooter } from '@coreui/react' -// or -import CFooter from '@coreui/react/src/components/footer/CFooter' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
position#-{`'fixed'`}, {`'sticky'`}
-

Place footer in non-static positions.

-
-
diff --git a/packages/docs/content/api/CForm.api.mdx b/packages/docs/content/api/CForm.api.mdx deleted file mode 100644 index f5ad1ef4..00000000 --- a/packages/docs/content/api/CForm.api.mdx +++ /dev/null @@ -1,40 +0,0 @@ - -```jsx -import { CForm } from '@coreui/react' -// or -import CForm from '@coreui/react/src/components/form/CForm' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the component.

-
validated#-{`boolean`}
-

Mark a form as validated. If you set it {`true`}, all validation styles will be applied to the forms component.

-
-
diff --git a/packages/docs/content/api/CFormCheck.api.mdx b/packages/docs/content/api/CFormCheck.api.mdx deleted file mode 100644 index 04c01d5b..00000000 --- a/packages/docs/content/api/CFormCheck.api.mdx +++ /dev/null @@ -1,180 +0,0 @@ - -```jsx -import { CFormCheck } from '@coreui/react' -// or -import CFormCheck from '@coreui/react/src/components/form/CFormCheck' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
button#-{`ButtonObject`}
-

Create button-like checkboxes and radio buttons.

-
className#-{`string`}
-

A string of all className you want applied to the component.

-
feedback#4.2.0+-{`ReactNode`}
-

Provide valuable, actionable feedback.

-
feedbackInvalid#4.2.0+-{`ReactNode`}
-

Provide valuable, actionable feedback.

-
feedbackValid#4.2.0+-{`ReactNode`}
-

Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.

-
floatingLabel#4.2.0+-{`ReactNode`}
-

Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.

-
hitArea#-{`'full'`}
-

Sets hit area to the full area of the component.

-
id#-{`string`}
-

The id global attribute defines an identifier (ID) that must be unique in the whole document.

-
indeterminate#-{`boolean`}
-

Input Checkbox indeterminate Property.

-
inline#-{`boolean`}
-

Group checkboxes or radios on the same horizontal row.

-
invalid#-{`boolean`}
-

Set component validation state to invalid.

-
label#-{`ReactNode`}
-

The element represents a caption for a component.

-
reverse#-{`boolean`}
-

Put checkboxes or radios on the opposite side.

-
tooltipFeedback#4.2.0+-{`boolean`}
-

Display validation feedback in a styled tooltip.

-
type#{`checkbox`}{`'checkbox'`}, {`'radio'`}
-

Specifies the type of component.

-
valid#-{`boolean`}
-

Set component validation state to valid.

-
-
diff --git a/packages/docs/content/api/CFormControlValidation.api.mdx b/packages/docs/content/api/CFormControlValidation.api.mdx deleted file mode 100644 index a664895d..00000000 --- a/packages/docs/content/api/CFormControlValidation.api.mdx +++ /dev/null @@ -1,90 +0,0 @@ - -```jsx -import { CFormControlValidation } from '@coreui/react' -// or -import CFormControlValidation from '@coreui/react/src/components/form/CFormControlValidation' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
feedback#4.2.0+-{`ReactNode`}
-

Provide valuable, actionable feedback.

-
feedbackInvalid#4.2.0+-{`ReactNode`}
-

Provide valuable, actionable feedback.

-
feedbackValid#4.2.0+-{`ReactNode`}
-

Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.

-
floatingLabel#4.2.0+-{`ReactNode`}
-

Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.

-
invalid#-{`boolean`}
-

Set component validation state to invalid.

-
tooltipFeedback#4.2.0+-{`boolean`}
-

Display validation feedback in a styled tooltip.

-
valid#-{`boolean`}
-

Set component validation state to valid.

-
-
diff --git a/packages/docs/content/api/CFormControlWrapper.api.mdx b/packages/docs/content/api/CFormControlWrapper.api.mdx deleted file mode 100644 index 6169bf48..00000000 --- a/packages/docs/content/api/CFormControlWrapper.api.mdx +++ /dev/null @@ -1,120 +0,0 @@ - -```jsx -import { CFormControlWrapper } from '@coreui/react' -// or -import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlWrapper' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
feedback#4.2.0+-{`ReactNode`}
-

Provide valuable, actionable feedback.

-
feedbackInvalid#4.2.0+-{`ReactNode`}
-

Provide valuable, actionable feedback.

-
feedbackValid#4.2.0+-{`ReactNode`}
-

Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.

-
floatingClassName#4.5.0+-{`string`}
-

A string of all className you want applied to the floating label wrapper.

-
floatingLabel#4.2.0+-{`ReactNode`}
-

Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.

-
invalid#-{`boolean`}
-

Set component validation state to invalid.

-
label#4.2.0+-{`ReactNode`}
-

Add a caption for a component.

-
text#4.2.0+-{`ReactNode`}
-

Add helper text to the component.

-
tooltipFeedback#4.2.0+-{`boolean`}
-

Display validation feedback in a styled tooltip.

-
valid#-{`boolean`}
-

Set component validation state to valid.

-
-
diff --git a/packages/docs/content/api/CFormFeedback.api.mdx b/packages/docs/content/api/CFormFeedback.api.mdx deleted file mode 100644 index 4b3ac0ce..00000000 --- a/packages/docs/content/api/CFormFeedback.api.mdx +++ /dev/null @@ -1,70 +0,0 @@ - -```jsx -import { CFormFeedback } from '@coreui/react' -// or -import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
as#{`div`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'div')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the component.

-
invalid#-{`boolean`}
-

Method called immediately after the {`value`} prop changes.

-
tooltip#-{`boolean`}
-

If your form layout allows it, you can display validation feedback in a styled tooltip.

-
valid#-{`boolean`}
-

Set component validation state to valid.

-
-
diff --git a/packages/docs/content/api/CFormFloating.api.mdx b/packages/docs/content/api/CFormFloating.api.mdx deleted file mode 100644 index 4fb9bbc1..00000000 --- a/packages/docs/content/api/CFormFloating.api.mdx +++ /dev/null @@ -1,30 +0,0 @@ - -```jsx -import { CFormFloating } from '@coreui/react' -// or -import CFormFloating from '@coreui/react/src/components/form/CFormFloating' -``` - -
- - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the component.

-
-
diff --git a/packages/docs/content/api/CFormInput.api.mdx b/packages/docs/content/api/CFormInput.api.mdx deleted file mode 100644 index ee9fa62a..00000000 --- a/packages/docs/content/api/CFormInput.api.mdx +++ /dev/null @@ -1,210 +0,0 @@ - -```jsx -import { CFormInput } from '@coreui/react' -// or -import CFormInput from '@coreui/react/src/components/form/CFormInput' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the component.

-
delay#{`false`}{`number`}, {`boolean`}
-

Delay onChange event while typing. If set to true onChange event will be delayed 500ms, you can also provide the number of milliseconds you want to delay the onChange event.

-
disabled#-{`boolean`}
-

Toggle the disabled state for the component.

-
feedback#4.2.0+-{`ReactNode`}
-

Provide valuable, actionable feedback.

-
feedbackInvalid#4.2.0+-{`ReactNode`}
-

Provide valuable, actionable feedback.

-
feedbackValid#4.2.0+-{`ReactNode`}
-

Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.

-
floatingClassName#4.5.0+-{`string`}
-

A string of all className you want applied to the floating label wrapper.

-
floatingLabel#4.2.0+-{`ReactNode`}
-

Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.

-
invalid#-{`boolean`}
-

Set component validation state to invalid.

-
label#4.2.0+-{`ReactNode`}
-

Add a caption for a component.

-
onChange#-{`ChangeEventHandler`}
-

Method called immediately after the {`value`} prop changes.

-
plainText#-{`boolean`}
-

Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side {`readonly`}.

-
readOnly#-{`boolean`}
-

Toggle the readonly state for the component.

-
size#-{`'sm'`}, {`'lg'`}
-

Size the component small or large.

-
text#4.2.0+-{`ReactNode`}
-

Add helper text to the component.

-
tooltipFeedback#4.2.0+-{`boolean`}
-

Display validation feedback in a styled tooltip.

-
type#{`text`}{`string`}
-

Specifies the type of component.

-
valid#-{`boolean`}
-

Set component validation state to valid.

-
value#-{`string`}, {`number`}, {`string[]`}
-

The {`value`} attribute of component.

-
-
diff --git a/packages/docs/content/api/CFormLabel.api.mdx b/packages/docs/content/api/CFormLabel.api.mdx deleted file mode 100644 index ab70a347..00000000 --- a/packages/docs/content/api/CFormLabel.api.mdx +++ /dev/null @@ -1,40 +0,0 @@ - -```jsx -import { CFormLabel } from '@coreui/react' -// or -import CFormLabel from '@coreui/react/src/components/form/CFormLabel' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the component.

-
customClassName#-{`string`}
-

A string of all className you want to be applied to the component, and override standard className value.

-
-
diff --git a/packages/docs/content/api/CFormRange.api.mdx b/packages/docs/content/api/CFormRange.api.mdx deleted file mode 100644 index e160f9f1..00000000 --- a/packages/docs/content/api/CFormRange.api.mdx +++ /dev/null @@ -1,110 +0,0 @@ - -```jsx -import { CFormRange } from '@coreui/react' -// or -import CFormRange from '@coreui/react/src/components/form/CFormRange' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the component.

-
disabled#-{`boolean`}
-

Toggle the disabled state for the component.

-
label#4.2.0+-{`ReactNode`}
-

Add a caption for a component.

-
max#-{`number`}
-

Specifies the maximum value for the component.

-
min#-{`number`}
-

Specifies the minimum value for the component.

-
onChange#-{`ChangeEventHandler`}
-

Method called immediately after the {`value`} prop changes.

-
readOnly#-{`boolean`}
-

Toggle the readonly state for the component.

-
step#-{`number`}
-

Specifies the interval between legal numbers in the component.

-
value#-{`string`}, {`number`}, {`string[]`}
-

The {`value`} attribute of component.

-
-
diff --git a/packages/docs/content/api/CFormSelect.api.mdx b/packages/docs/content/api/CFormSelect.api.mdx deleted file mode 100644 index eb72b03e..00000000 --- a/packages/docs/content/api/CFormSelect.api.mdx +++ /dev/null @@ -1,184 +0,0 @@ - -```jsx -import { CFormSelect } from '@coreui/react' -// or -import CFormSelect from '@coreui/react/src/components/form/CFormSelect' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the component.

-
feedback#4.2.0+-{`ReactNode`}
-

Provide valuable, actionable feedback.

-
feedbackInvalid#4.2.0+-{`ReactNode`}
-

Provide valuable, actionable feedback.

-
feedbackValid#4.2.0+-{`ReactNode`}
-

Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.

-
floatingClassName#4.5.0+-{`string`}
-

A string of all className you want applied to the floating label wrapper.

-
floatingLabel#4.2.0+-{`ReactNode`}
-

Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.

-
htmlSize#-{`number`}
-

Specifies the number of visible options in a drop-down list.

-
invalid#-{`boolean`}
-

Set component validation state to invalid.

-
label#4.2.0+-{`ReactNode`}
-

Add a caption for a component.

-
onChange#-{`ChangeEventHandler`}
-

Method called immediately after the {`value`} prop changes.

-
options#-{`Option[]`}, {`string[]`}
-

Options list of the select component. Available keys: {`label`}, {`value`}, {`disabled`}. Examples:

-
    -
  • {`options={[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]}`}
    • -
  • {`options={['js', 'html']}`}
    • -
-
size#-{`'sm'`}, {`'lg'`}
-

Size the component small or large.

-
text#4.2.0+-{`ReactNode`}
-

Add helper text to the component.

-
tooltipFeedback#4.2.0+-{`boolean`}
-

Display validation feedback in a styled tooltip.

-
valid#-{`boolean`}
-

Set component validation state to valid.

-
value#-{`string`}, {`number`}, {`string[]`}
-

The {`value`} attribute of component.

-
-
diff --git a/packages/docs/content/api/CFormSwitch.api.mdx b/packages/docs/content/api/CFormSwitch.api.mdx deleted file mode 100644 index a53296f0..00000000 --- a/packages/docs/content/api/CFormSwitch.api.mdx +++ /dev/null @@ -1,100 +0,0 @@ - -```jsx -import { CFormSwitch } from '@coreui/react' -// or -import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the component.

-
id#-{`string`}
-

The id global attribute defines an identifier (ID) that must be unique in the whole document.

-
invalid#-{`boolean`}
-

Set component validation state to invalid.

-
label#-{`ReactNode`}
-

The element represents a caption for a component.

-
reverse#-{`boolean`}
-

Put switch on the opposite side.

-
size#-{`'lg'`}, {`'xl'`}
-

Size the component large or extra large. Works only with {`switch`}.

-
type#{`checkbox`}{`'checkbox'`}, {`'radio'`}
-

Specifies the type of component.

-
valid#-{`boolean`}
-

Set component validation state to valid.

-
-
diff --git a/packages/docs/content/api/CFormText.api.mdx b/packages/docs/content/api/CFormText.api.mdx deleted file mode 100644 index 632deb5c..00000000 --- a/packages/docs/content/api/CFormText.api.mdx +++ /dev/null @@ -1,40 +0,0 @@ - -```jsx -import { CFormText } from '@coreui/react' -// or -import CFormText from '@coreui/react/src/components/form/CFormText' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
as#{`div`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'div')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the component.

-
-
diff --git a/packages/docs/content/api/CFormTextarea.api.mdx b/packages/docs/content/api/CFormTextarea.api.mdx deleted file mode 100644 index 8bcefc00..00000000 --- a/packages/docs/content/api/CFormTextarea.api.mdx +++ /dev/null @@ -1,180 +0,0 @@ - -```jsx -import { CFormTextarea } from '@coreui/react' -// or -import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the component.

-
disabled#-{`boolean`}
-

Toggle the disabled state for the component.

-
feedback#4.2.0+-{`ReactNode`}
-

Provide valuable, actionable feedback.

-
feedbackInvalid#4.2.0+-{`ReactNode`}
-

Provide valuable, actionable feedback.

-
feedbackValid#4.2.0+-{`ReactNode`}
-

Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.

-
floatingClassName#4.5.0+-{`string`}
-

A string of all className you want applied to the floating label wrapper.

-
floatingLabel#4.2.0+-{`ReactNode`}
-

Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.

-
invalid#-{`boolean`}
-

Set component validation state to invalid.

-
label#4.2.0+-{`ReactNode`}
-

Add a caption for a component.

-
onChange#-{`ChangeEventHandler`}
-

Method called immediately after the {`value`} prop changes.

-
plainText#-{`boolean`}
-

Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side {`readonly`}.

-
readOnly#-{`boolean`}
-

Toggle the readonly state for the component.

-
text#4.2.0+-{`ReactNode`}
-

Add helper text to the component.

-
tooltipFeedback#4.2.0+-{`boolean`}
-

Display validation feedback in a styled tooltip.

-
valid#-{`boolean`}
-

Set component validation state to valid.

-
value#-{`string`}, {`number`}, {`string[]`}
-

The {`value`} attribute of component.

-
-
diff --git a/packages/docs/content/api/CHeader.api.mdx b/packages/docs/content/api/CHeader.api.mdx deleted file mode 100644 index 44632878..00000000 --- a/packages/docs/content/api/CHeader.api.mdx +++ /dev/null @@ -1,50 +0,0 @@ - -```jsx -import { CHeader } from '@coreui/react' -// or -import CHeader from '@coreui/react/src/components/header/CHeader' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the component.

-
container#-{`boolean`}, {`'sm'`}, {`'md'`}, {`'lg'`}, {`'xl'`}, {`'xxl'`}, {`'fluid'`}
-

Defines optional container wrapping children elements.

-
position#-{`'fixed'`}, {`'sticky'`}
-

Place header in non-static positions.

-
-
diff --git a/packages/docs/content/api/CHeaderBrand.api.mdx b/packages/docs/content/api/CHeaderBrand.api.mdx deleted file mode 100644 index ea824139..00000000 --- a/packages/docs/content/api/CHeaderBrand.api.mdx +++ /dev/null @@ -1,40 +0,0 @@ - -```jsx -import { CHeaderBrand } from '@coreui/react' -// or -import CHeaderBrand from '@coreui/react/src/components/header/CHeaderBrand' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
as#{`a`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'a')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the component.

-
-
diff --git a/packages/docs/content/api/CHeaderDivider.api.mdx b/packages/docs/content/api/CHeaderDivider.api.mdx deleted file mode 100644 index 1af7b1d8..00000000 --- a/packages/docs/content/api/CHeaderDivider.api.mdx +++ /dev/null @@ -1,30 +0,0 @@ - -```jsx -import { CHeaderDivider } from '@coreui/react' -// or -import CHeaderDivider from '@coreui/react/src/components/header/CHeaderDivider' -``` - -
- - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the component.

-
-
diff --git a/packages/docs/content/api/CHeaderNav.api.mdx b/packages/docs/content/api/CHeaderNav.api.mdx deleted file mode 100644 index ab6adfbc..00000000 --- a/packages/docs/content/api/CHeaderNav.api.mdx +++ /dev/null @@ -1,40 +0,0 @@ - -```jsx -import { CHeaderNav } from '@coreui/react' -// or -import CHeaderNav from '@coreui/react/src/components/header/CHeaderNav' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
as#{`ul`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'ul')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the component.

-
-
diff --git a/packages/docs/content/api/CHeaderText.api.mdx b/packages/docs/content/api/CHeaderText.api.mdx deleted file mode 100644 index dab08603..00000000 --- a/packages/docs/content/api/CHeaderText.api.mdx +++ /dev/null @@ -1,30 +0,0 @@ - -```jsx -import { CHeaderText } from '@coreui/react' -// or -import CHeaderText from '@coreui/react/src/components/header/CHeaderText' -``` - -
- - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
-
diff --git a/packages/docs/content/api/CHeaderToggler.api.mdx b/packages/docs/content/api/CHeaderToggler.api.mdx deleted file mode 100644 index 0f15f26b..00000000 --- a/packages/docs/content/api/CHeaderToggler.api.mdx +++ /dev/null @@ -1,30 +0,0 @@ - -```jsx -import { CHeaderToggler } from '@coreui/react' -// or -import CHeaderToggler from '@coreui/react/src/components/header/CHeaderToggler' -``` - -
- - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
-
diff --git a/packages/docs/content/api/CIcon.api.mdx b/packages/docs/content/api/CIcon.api.mdx deleted file mode 100644 index 0e5e3056..00000000 --- a/packages/docs/content/api/CIcon.api.mdx +++ /dev/null @@ -1,130 +0,0 @@ - -```jsx -import { CIcon } from '@coreui/icons-react' -// or -import CIcon from '@coreui/icons-react/src/CIcon' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the component.

-
content#Deprecated 3.0-{`string`}, {`string[]`}
-

Use {`icon={...}`} instead of

-
customClassName#-{`string`}, {`string[]`}
-

Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.

-
height#-{`number`}
-

The height attribute defines the vertical length of an icon.

-
icon#-{`string`}, {`string[]`}
-

Name of the icon placed in React object or SVG content.

-
name#Deprecated 3.0-{`string`}
-

Use {`icon="..."`} instead of

-
size#-{`'custom'`}, {`'custom-size'`}, {`'sm'`}, {`'lg'`}, {`'xl'`}, {`'xxl'`}, {`'3xl'`}, {`'4xl'`}, {`'5xl'`}, {`'6xl'`}, {`'7xl'`}, {`'8xl'`}, {`'9xl'`}
-

Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl…9xl', 'custom', 'custom-size'.

-
title#-{`string`}
-

Title tag content.

-
use#-{`string`}
-

If defined component will be rendered using 'use' tag.

-
viewBox#-{`string`}
-

The viewBox attribute defines the position and dimension of an SVG viewport.

-
width#-{`number`}
-

The width attribute defines the horizontal length of an icon.

-
-
diff --git a/packages/docs/content/api/CIconSvg.api.mdx b/packages/docs/content/api/CIconSvg.api.mdx deleted file mode 100644 index 808446ad..00000000 --- a/packages/docs/content/api/CIconSvg.api.mdx +++ /dev/null @@ -1,80 +0,0 @@ - -```jsx -import { CIconSvg } from '@coreui/icons-react' -// or -import CIconSvg from '@coreui/icons-react/src/CIconSvg' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the component.

-
customClassName#-{`string`}, {`string[]`}
-

Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.

-
height#-{`number`}
-

The height attribute defines the vertical length of an icon.

-
size#-{`'custom'`}, {`'custom-size'`}, {`'sm'`}, {`'lg'`}, {`'xl'`}, {`'xxl'`}, {`'3xl'`}, {`'4xl'`}, {`'5xl'`}, {`'6xl'`}, {`'7xl'`}, {`'8xl'`}, {`'9xl'`}
-

Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl…9xl', 'custom', 'custom-size'.

-
title#-{`string`}
-

Title tag content.

-
width#-{`number`}
-

The width attribute defines the horizontal length of an icon.

-
-
diff --git a/packages/docs/content/api/CImage.api.mdx b/packages/docs/content/api/CImage.api.mdx deleted file mode 100644 index de5157c7..00000000 --- a/packages/docs/content/api/CImage.api.mdx +++ /dev/null @@ -1,70 +0,0 @@ - -```jsx -import { CImage } from '@coreui/react' -// or -import CImage from '@coreui/react/src/components/image/CImage' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
align#-{`'start'`}, {`'center'`}, {`'end'`}
-

Set the horizontal aligment.

-
className#-{`string`}
-

A string of all className you want applied to the component.

-
fluid#-{`boolean`}
-

Make image responsive.

-
rounded#-{`boolean`}
-

Make image rounded.

-
thumbnail#-{`boolean`}
-

Give an image a rounded 1px border appearance.

-
-
diff --git a/packages/docs/content/api/CInputGroup.api.mdx b/packages/docs/content/api/CInputGroup.api.mdx deleted file mode 100644 index ed37df4f..00000000 --- a/packages/docs/content/api/CInputGroup.api.mdx +++ /dev/null @@ -1,40 +0,0 @@ - -```jsx -import { CInputGroup } from '@coreui/react' -// or -import CInputGroup from '@coreui/react/src/components/form/CInputGroup' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the component.

-
size#-{`'sm'`}, {`'lg'`}
-

Size the component small or large.

-
-
diff --git a/packages/docs/content/api/CInputGroupText.api.mdx b/packages/docs/content/api/CInputGroupText.api.mdx deleted file mode 100644 index e0e19802..00000000 --- a/packages/docs/content/api/CInputGroupText.api.mdx +++ /dev/null @@ -1,40 +0,0 @@ - -```jsx -import { CInputGroupText } from '@coreui/react' -// or -import CInputGroupText from '@coreui/react/src/components/form/CInputGroupText' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
as#{`span`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'span')`}, {`(ElementType & 'form')`}, {`(ElementType & 'slot')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the component.

-
-
diff --git a/packages/docs/content/api/CLink.api.mdx b/packages/docs/content/api/CLink.api.mdx deleted file mode 100644 index d05443d1..00000000 --- a/packages/docs/content/api/CLink.api.mdx +++ /dev/null @@ -1,70 +0,0 @@ - -```jsx -import { CLink } from '@coreui/react' -// or -import CLink from '@coreui/react/src/components/link/CLink' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
-

Toggle the active state for the component.

-
-

Component used for the root node. Either a string to use a HTML element or a component.

-
-

A string of all className you want applied to the component.

-
-

Toggle the disabled state for the component.

-
-

The href attribute specifies the URL of the page the link goes to.

-
-
diff --git a/packages/docs/content/api/CListGroup.api.mdx b/packages/docs/content/api/CListGroup.api.mdx deleted file mode 100644 index c5ed6d5f..00000000 --- a/packages/docs/content/api/CListGroup.api.mdx +++ /dev/null @@ -1,60 +0,0 @@ - -```jsx -import { CListGroup } from '@coreui/react' -// or -import CListGroup from '@coreui/react/src/components/list-group/CListGroup' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
as#{`ul`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'ul')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the component.

-
flush#-{`boolean`}
-

Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., {``}).

-
layout#-{`'horizontal'`}, {`'horizontal-sm'`}, {`'horizontal-md'`}, {`'horizontal-lg'`}, {`'horizontal-xl'`}, {`'horizontal-xxl'`}
-

Specify a layout type.

-
-
diff --git a/packages/docs/content/api/CListGroupItem.api.mdx b/packages/docs/content/api/CListGroupItem.api.mdx deleted file mode 100644 index 19ca9ed3..00000000 --- a/packages/docs/content/api/CListGroupItem.api.mdx +++ /dev/null @@ -1,70 +0,0 @@ - -```jsx -import { CListGroupItem } from '@coreui/react' -// or -import CListGroupItem from '@coreui/react/src/components/list-group/CListGroupItem' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
active#-{`boolean`}
-

Toggle the active state for the component.

-
as#{`li`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'li')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the component.

-
color#-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
-

Sets the color context of the component to one of CoreUI’s themed colors.

-
disabled#-{`boolean`}
-

Toggle the disabled state for the component.

-
-
diff --git a/packages/docs/content/api/CModal.api.mdx b/packages/docs/content/api/CModal.api.mdx deleted file mode 100644 index a8e467cd..00000000 --- a/packages/docs/content/api/CModal.api.mdx +++ /dev/null @@ -1,180 +0,0 @@ - -```jsx -import { CModal } from '@coreui/react' -// or -import CModal from '@coreui/react/src/components/modal/CModal' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
alignment#-{`'top'`}, {`'center'`}
-

Align the modal in the center or top of the screen.

-
backdrop#{`true`}{`boolean`}, {`'static'`}
-

Apply a backdrop on body while modal is open.

-
className#-{`string`}
-

A string of all className you want applied to the base component.

-
container#5.3.0+-{`Element`}, {`DocumentFragment`}, {`(() => Element | DocumentFragment)`}
-

Appends the react modal to a specific element. You can pass an HTML element or function that returns a single element. By default {`document.body`}.

-
focus#4.10.0+{`true`}{`boolean`}
-

Puts the focus on the modal when shown.

-
fullscreen#-{`boolean`}, {`'sm'`}, {`'md'`}, {`'lg'`}, {`'xl'`}, {`'xxl'`}
-

Set modal to covers the entire user viewport.

-
keyboard#{`true`}{`boolean`}
-

Closes the modal when escape key is pressed.

-
onClose#-{`() => void`}
-

Callback fired when the component requests to be closed.

-
onClosePrevented#-{`() => void`}
-

Callback fired when the component requests to be closed.

-
onShow#-{`() => void`}
-

Callback fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option set to false.

-
portal#{`true`}{`boolean`}
-

Generates modal using createPortal.

-
scrollable#-{`boolean`}
-

Create a scrollable modal that allows scrolling the modal body.

-
size#-{`'sm'`}, {`'lg'`}, {`'xl'`}
-

Size the component small, large, or extra large.

-
transition#{`true`}{`boolean`}
-

Remove animation to create modal that simply appear rather than fade in to view.

-
unmountOnClose#{`true`}{`boolean`}
-

By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.

-
visible#-{`boolean`}
-

Toggle the visibility of modal component.

-
-
diff --git a/packages/docs/content/api/CModalBody.api.mdx b/packages/docs/content/api/CModalBody.api.mdx deleted file mode 100644 index 6f12c3d7..00000000 --- a/packages/docs/content/api/CModalBody.api.mdx +++ /dev/null @@ -1,30 +0,0 @@ - -```jsx -import { CModalBody } from '@coreui/react' -// or -import CModalBody from '@coreui/react/src/components/modal/CModalBody' -``` - -
- - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
-
diff --git a/packages/docs/content/api/CModalContent.api.mdx b/packages/docs/content/api/CModalContent.api.mdx deleted file mode 100644 index 0d4c4280..00000000 --- a/packages/docs/content/api/CModalContent.api.mdx +++ /dev/null @@ -1,30 +0,0 @@ - -```jsx -import { CModalContent } from '@coreui/react' -// or -import CModalContent from '@coreui/react/src/components/modal/CModalContent' -``` - -
- - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
-
diff --git a/packages/docs/content/api/CModalDialog.api.mdx b/packages/docs/content/api/CModalDialog.api.mdx deleted file mode 100644 index a4d58792..00000000 --- a/packages/docs/content/api/CModalDialog.api.mdx +++ /dev/null @@ -1,70 +0,0 @@ - -```jsx -import { CModalDialog } from '@coreui/react' -// or -import CModalDialog from '@coreui/react/src/components/modal/CModalDialog' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
alignment#-{`'top'`}, {`'center'`}
-

Align the modal in the center or top of the screen.

-
className#-{`string`}
-

A string of all className you want applied to the base component.

-
fullscreen#-{`boolean`}, {`'sm'`}, {`'md'`}, {`'lg'`}, {`'xl'`}, {`'xxl'`}
-

Set modal to covers the entire user viewport.

-
scrollable#-{`boolean`}
-

Does the modal dialog itself scroll, or does the whole dialog scroll within the window.

-
size#-{`'sm'`}, {`'lg'`}, {`'xl'`}
-

Size the component small, large, or extra large.

-
-
diff --git a/packages/docs/content/api/CModalFooter.api.mdx b/packages/docs/content/api/CModalFooter.api.mdx deleted file mode 100644 index 2ac39de7..00000000 --- a/packages/docs/content/api/CModalFooter.api.mdx +++ /dev/null @@ -1,30 +0,0 @@ - -```jsx -import { CModalFooter } from '@coreui/react' -// or -import CModalFooter from '@coreui/react/src/components/modal/CModalFooter' -``` - -
- - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
-
diff --git a/packages/docs/content/api/CModalHeader.api.mdx b/packages/docs/content/api/CModalHeader.api.mdx deleted file mode 100644 index 42f592c5..00000000 --- a/packages/docs/content/api/CModalHeader.api.mdx +++ /dev/null @@ -1,40 +0,0 @@ - -```jsx -import { CModalHeader } from '@coreui/react' -// or -import CModalHeader from '@coreui/react/src/components/modal/CModalHeader' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
closeButton#{`true`}{`boolean`}
-

Add a close button component to the header.

-
-
diff --git a/packages/docs/content/api/CModalTitle.api.mdx b/packages/docs/content/api/CModalTitle.api.mdx deleted file mode 100644 index a4bdbca5..00000000 --- a/packages/docs/content/api/CModalTitle.api.mdx +++ /dev/null @@ -1,40 +0,0 @@ - -```jsx -import { CModalTitle } from '@coreui/react' -// or -import CModalTitle from '@coreui/react/src/components/modal/CModalTitle' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
as#{`h5`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'h5')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the base component.

-
-
diff --git a/packages/docs/content/api/CNav.api.mdx b/packages/docs/content/api/CNav.api.mdx deleted file mode 100644 index 26680506..00000000 --- a/packages/docs/content/api/CNav.api.mdx +++ /dev/null @@ -1,60 +0,0 @@ - -```jsx -import { CNav } from '@coreui/react' -// or -import CNav from '@coreui/react/src/components/nav/CNav' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
as#{`ul`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'ul')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the base component.

-
layout#-{`'fill'`}, {`'justified'`}
-

Specify a layout type for component.

-
variant#-{`'enclosed'`}, {`'enclosed-pills'`}, {`'pills'`}, {`'tabs'`}, {`'underline'`}, {`'underline-border'`}
-

Set the nav variant to tabs or pills.

-
-
diff --git a/packages/docs/content/api/CNavGroup.api.mdx b/packages/docs/content/api/CNavGroup.api.mdx deleted file mode 100644 index 02a252c3..00000000 --- a/packages/docs/content/api/CNavGroup.api.mdx +++ /dev/null @@ -1,80 +0,0 @@ - -```jsx -import { CNavGroup } from '@coreui/react' -// or -import CNavGroup from '@coreui/react/src/components/nav/CNavGroup' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
as#5.0.0+{`li`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'li')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the component.

-
compact#-{`boolean`}
-

Make nav group more compact by cutting all {`padding`} in half.

-
onVisibleChange#5.12.0+-{`(visible: boolean) => void`}
-

Callback fired when the user toggles the group. Receives the requested visibility. Provide it together with {`visible`} for controlled mode—update {`visible`} from here, or ignore the change to keep the group as is.

-
toggler#-{`ReactNode`}, {`(({ visible }: { visible: boolean; }) => ReactNode)`}
-

Set group toggler label.

-
visible#-{`boolean`}
-

Show nav group items. Acts as the initial state when used on its own, or as the controlled value when paired with {`onVisibleChange`}.

-
-
diff --git a/packages/docs/content/api/CNavGroupItems.api.mdx b/packages/docs/content/api/CNavGroupItems.api.mdx deleted file mode 100644 index 55b08d4a..00000000 --- a/packages/docs/content/api/CNavGroupItems.api.mdx +++ /dev/null @@ -1,40 +0,0 @@ - -```jsx -import { CNavGroupItems } from '@coreui/react' -// or -import CNavGroupItems from '@coreui/react/src/components/nav/CNavGroupItems' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
as#5.0.0+{`ul`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'ul')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the component.

-
-
diff --git a/packages/docs/content/api/CNavItem.api.mdx b/packages/docs/content/api/CNavItem.api.mdx deleted file mode 100644 index 0857074e..00000000 --- a/packages/docs/content/api/CNavItem.api.mdx +++ /dev/null @@ -1,70 +0,0 @@ - -```jsx -import { CNavItem } from '@coreui/react' -// or -import CNavItem from '@coreui/react/src/components/nav/CNavItem' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
active#-{`boolean`}
-

Toggle the active state for the component.

-
as#5.0.0+{`li`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'li')`}, {`(ElementType & 'cite')`}, {`(ElementType & 'data')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the component.

-
disabled#-{`boolean`}
-

Toggle the disabled state for the component.

-
href#-{`string`}
-

The href attribute specifies the URL of the page the link goes to.

-
-
diff --git a/packages/docs/content/api/CNavLink.api.mdx b/packages/docs/content/api/CNavLink.api.mdx deleted file mode 100644 index 55bc0815..00000000 --- a/packages/docs/content/api/CNavLink.api.mdx +++ /dev/null @@ -1,70 +0,0 @@ - -```jsx -import { CNavLink } from '@coreui/react' -// or -import CNavLink from '@coreui/react/src/components/nav/CNavLink' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
-

Toggle the active state for the component.

-
-

Component used for the root node. Either a string to use a HTML element or a component.

-
-

A string of all className you want applied to the component.

-
-

Toggle the disabled state for the component.

-
-

The href attribute specifies the URL of the page the link goes to.

-
-
diff --git a/packages/docs/content/api/CNavTitle.api.mdx b/packages/docs/content/api/CNavTitle.api.mdx deleted file mode 100644 index a52030cb..00000000 --- a/packages/docs/content/api/CNavTitle.api.mdx +++ /dev/null @@ -1,40 +0,0 @@ - -```jsx -import { CNavTitle } from '@coreui/react' -// or -import CNavTitle from '@coreui/react/src/components/nav/CNavTitle' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
as#{`li`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'li')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the component.

-
-
diff --git a/packages/docs/content/api/CNavbar.api.mdx b/packages/docs/content/api/CNavbar.api.mdx deleted file mode 100644 index c4af405e..00000000 --- a/packages/docs/content/api/CNavbar.api.mdx +++ /dev/null @@ -1,90 +0,0 @@ - -```jsx -import { CNavbar } from '@coreui/react' -// or -import CNavbar from '@coreui/react/src/components/navbar/CNavbar' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
as#{`nav`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'nav')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the component.

-
color#-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
-

Sets the color context of the component to one of CoreUI’s themed colors.

-
colorScheme#-{`'dark'`}, {`'light'`}
-

Sets if the color of text should be colored for a light or dark background.

-
container#-{`boolean`}, {`'sm'`}, {`'md'`}, {`'lg'`}, {`'xl'`}, {`'xxl'`}, {`'fluid'`}
-

Defines optional container wrapping children elements.

-
expand#-{`boolean`}, {`'sm'`}, {`'md'`}, {`'lg'`}, {`'xl'`}, {`'xxl'`}
-

Defines the responsive breakpoint to determine when content collapses.

-
placement#-{`'fixed-top'`}, {`'fixed-bottom'`}, {`'sticky-top'`}
-

Place component in non-static positions.

-
-
diff --git a/packages/docs/content/api/CNavbarBrand.api.mdx b/packages/docs/content/api/CNavbarBrand.api.mdx deleted file mode 100644 index 691824bd..00000000 --- a/packages/docs/content/api/CNavbarBrand.api.mdx +++ /dev/null @@ -1,50 +0,0 @@ - -```jsx -import { CNavbarBrand } from '@coreui/react' -// or -import CNavbarBrand from '@coreui/react/src/components/navbar/CNavbarBrand' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
as#-{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'a')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the component.

-
href#-{`string`}
-

The href attribute specifies the URL of the page the link goes to.

-
-
diff --git a/packages/docs/content/api/CNavbarNav.api.mdx b/packages/docs/content/api/CNavbarNav.api.mdx deleted file mode 100644 index 564eed98..00000000 --- a/packages/docs/content/api/CNavbarNav.api.mdx +++ /dev/null @@ -1,40 +0,0 @@ - -```jsx -import { CNavbarNav } from '@coreui/react' -// or -import CNavbarNav from '@coreui/react/src/components/navbar/CNavbarNav' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
as#{`ul`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'ul')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the component.

-
-
diff --git a/packages/docs/content/api/CNavbarText.api.mdx b/packages/docs/content/api/CNavbarText.api.mdx deleted file mode 100644 index 716bc9a8..00000000 --- a/packages/docs/content/api/CNavbarText.api.mdx +++ /dev/null @@ -1,30 +0,0 @@ - -```jsx -import { CNavbarText } from '@coreui/react' -// or -import CNavbarText from '@coreui/react/src/components/navbar/CNavbarText' -``` - -
- - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
-
diff --git a/packages/docs/content/api/CNavbarToggler.api.mdx b/packages/docs/content/api/CNavbarToggler.api.mdx deleted file mode 100644 index 94849ee1..00000000 --- a/packages/docs/content/api/CNavbarToggler.api.mdx +++ /dev/null @@ -1,30 +0,0 @@ - -```jsx -import { CNavbarToggler } from '@coreui/react' -// or -import CNavbarToggler from '@coreui/react/src/components/navbar/CNavbarToggler' -``` - -
- - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
-
diff --git a/packages/docs/content/api/COffcanvas.api.mdx b/packages/docs/content/api/COffcanvas.api.mdx deleted file mode 100644 index 57ddbfb8..00000000 --- a/packages/docs/content/api/COffcanvas.api.mdx +++ /dev/null @@ -1,130 +0,0 @@ - -```jsx -import { COffcanvas } from '@coreui/react' -// or -import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
backdrop#{`true`}{`boolean`}, {`'static'`}
-

Apply a backdrop on body while offcanvas is open.

-
className#-{`string`}
-

A string of all className you want applied to the base component.

-
dark#-{`boolean`}
-

Sets a darker color scheme.

-
keyboard#{`true`}{`boolean`}
-

Closes the offcanvas when escape key is pressed.

-
onHide#-{`() => void`}
-

Callback fired when the component requests to be hidden.

-
onShow#-{`() => void`}
-

Callback fired when the component requests to be shown.

-
placement#-{`'start'`}, {`'end'`}, {`'top'`}, {`'bottom'`}
-

Components placement, there’s no default placement.

-
portal#{`false`}{`boolean`}
-

Generates modal using createPortal.

-
responsive#4.6.0+{`true`}{`boolean`}, {`'sm'`}, {`'md'`}, {`'lg'`}, {`'xl'`}, {`'xxl'`}
-

Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down.

-
scroll#{`false`}{`boolean`}
-

Allow body scrolling while offcanvas is open

-
visible#{`false`}{`boolean`}
-

Toggle the visibility of offcanvas component.

-
-
diff --git a/packages/docs/content/api/COffcanvasBody.api.mdx b/packages/docs/content/api/COffcanvasBody.api.mdx deleted file mode 100644 index 7baef6ab..00000000 --- a/packages/docs/content/api/COffcanvasBody.api.mdx +++ /dev/null @@ -1,30 +0,0 @@ - -```jsx -import { COffcanvasBody } from '@coreui/react' -// or -import COffcanvasBody from '@coreui/react/src/components/offcanvas/COffcanvasBody' -``` - -
- - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
-
diff --git a/packages/docs/content/api/COffcanvasHeader.api.mdx b/packages/docs/content/api/COffcanvasHeader.api.mdx deleted file mode 100644 index 02b1c5a1..00000000 --- a/packages/docs/content/api/COffcanvasHeader.api.mdx +++ /dev/null @@ -1,30 +0,0 @@ - -```jsx -import { COffcanvasHeader } from '@coreui/react' -// or -import COffcanvasHeader from '@coreui/react/src/components/offcanvas/COffcanvasHeader' -``` - -
- - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
-
diff --git a/packages/docs/content/api/COffcanvasTitle.api.mdx b/packages/docs/content/api/COffcanvasTitle.api.mdx deleted file mode 100644 index dca9aa48..00000000 --- a/packages/docs/content/api/COffcanvasTitle.api.mdx +++ /dev/null @@ -1,40 +0,0 @@ - -```jsx -import { COffcanvasTitle } from '@coreui/react' -// or -import COffcanvasTitle from '@coreui/react/src/components/offcanvas/COffcanvasTitle' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
as#{`h5`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'h5')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the component.

-
-
diff --git a/packages/docs/content/api/CPagination.api.mdx b/packages/docs/content/api/CPagination.api.mdx deleted file mode 100644 index 22d8773a..00000000 --- a/packages/docs/content/api/CPagination.api.mdx +++ /dev/null @@ -1,50 +0,0 @@ - -```jsx -import { CPagination } from '@coreui/react' -// or -import CPagination from '@coreui/react/src/components/pagination/CPagination' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
align#-{`'start'`}, {`'center'`}, {`'end'`}
-

Set the alignment of pagination components.

-
className#-{`string`}
-

A string of all className you want applied to the base component.

-
size#-{`'sm'`}, {`'lg'`}
-

Size the component small or large.

-
-
diff --git a/packages/docs/content/api/CPaginationItem.api.mdx b/packages/docs/content/api/CPaginationItem.api.mdx deleted file mode 100644 index 7e6de5f9..00000000 --- a/packages/docs/content/api/CPaginationItem.api.mdx +++ /dev/null @@ -1,50 +0,0 @@ - -```jsx -import { CPaginationItem } from '@coreui/react' -// or -import CPaginationItem from '@coreui/react/src/components/pagination/CPaginationItem' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
active#-{`boolean`}
-

Toggle the active state for the component.

-
as#-{`(ElementType & string)`}, {`(ElementType & ComponentClass)`}, {`(ElementType & FunctionComponent)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
disabled#-{`boolean`}
-

Toggle the disabled state for the component.

-
-
diff --git a/packages/docs/content/api/CPlaceholder.api.mdx b/packages/docs/content/api/CPlaceholder.api.mdx deleted file mode 100644 index 59e0df15..00000000 --- a/packages/docs/content/api/CPlaceholder.api.mdx +++ /dev/null @@ -1,130 +0,0 @@ - -```jsx -import { CPlaceholder } from '@coreui/react' -// or -import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
animation#-{`'glow'`}, {`'wave'`}
-

Set animation type to better convey the perception of something being actively loaded.

-
as#{`span`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'span')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the component.

-
color#-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
-

Sets the color context of the component to one of CoreUI’s themed colors.

-
lg#-{`number`}
-

The number of columns on large devices (<1200px).

-
md#-{`number`}
-

The number of columns on medium devices (<992px).

-
size#-{`'xs'`}, {`'sm'`}, {`'lg'`}
-

Size the component extra small, small, or large.

-
sm#-{`number`}
-

The number of columns on small devices (<768px).

-
xl#-{`number`}
-

The number of columns on X-Large devices (<1400px).

-
xs#-{`number`}
-

The number of columns on extra small devices (<576px).

-
xxl#-{`number`}
-

The number of columns on XX-Large devices (≥1400px).

-
-
diff --git a/packages/docs/content/api/CPopover.api.mdx b/packages/docs/content/api/CPopover.api.mdx deleted file mode 100644 index f8c40a8e..00000000 --- a/packages/docs/content/api/CPopover.api.mdx +++ /dev/null @@ -1,199 +0,0 @@ - -```jsx -import { CPopover } from '@coreui/react' -// or -import CPopover from '@coreui/react/src/components/popover/CPopover' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
animation#4.9.0+{`true`}{`boolean`}
-

Adds a fade transition animation to the React Popover.

-
className#-{`string`}
-

Custom class name(s) for additional styling.

-
container#4.11.0+{`document.body`}{`Element`}, {`DocumentFragment`}, {`(() => Element | DocumentFragment)`}
-

Defines the container element to which the React Popover is appended. Accepts:

-
    -
  • A DOM element ({`HTMLElement`} or {`DocumentFragment`})
    • -
  • A function that returns a single element
    • -
  • {`null`} (defaults to {`document.body`})
    • -
- ...`} /> -
content#-{`ReactNode`}
-

Main content of the React Popover. It can be a string or any valid React node.

-
delay#4.9.0+{`0`}{`number`}, {`{ show: number; hide: number; }`}
-

Delay (in milliseconds) before showing or hiding the React Popover.

-
    -
  • If a number is provided, that delay applies to both "show" and "hide".
    • -
  • If an object is provided, use separate values for "show" and "hide".
    • -
- ... - -// Delays 500ms on show and 100ms on hide -...`} /> -
fallbackPlacements#4.9.0+{`['top', 'right', 'bottom', 'left']`}{`'top', 'right', 'bottom', 'left'`}, {`('top', 'right', 'bottom', 'left')[]`}
-

Specifies the fallback placements when the preferred {`placement`} cannot be met.

-
offset#{`[0, 8]`}{`[number, number]`}
-

Offset of the React Popover relative to its toggle element, in the form {`[x, y]`}.

- ... - -// Offset the menu 5px in both X and Y direction -...`} /> -
onHide#-{`() => void`}
-

Invoked when the React Popover is about to hide.

-
onShow#-{`() => void`}
-

Invoked when the React Popover is about to show.

-
placement#{`top`}{`'auto'`}, {`'top'`}, {`'bottom'`}, {`'right'`}, {`'left'`}
-

Placement of the React Popover. Popper.js may override this based on available space.

-
popperConfig#5.5.0+-{`Partial`}, {`((defaultPopperConfig: Partial) => Partial)`}
-

Allows customization of the Popper.js configuration for the React Popover. Can be an object or a function returning a modified configuration. Learn more

- ({ - ...defaultConfig, - strategy: 'fixed', - modifiers: [ - ...defaultConfig.modifiers, - { name: 'computeStyles', options: { adaptive: false } }, - ], - })} ->...`} /> -
title#-{`ReactNode`}
-

Title for the React Popover header. Can be a string or any valid React node.

-
trigger#{`click`}{`'hover'`}, {`'focus'`}, {`'click'`}, {`('hover' | 'focus' | 'click')[]`}
-

Determines which events trigger the visibility of the React Popover. Can be a single trigger or an array of triggers.

- ... - -// Hover + click combined -...`} /> -
visible#-{`boolean`}
-

Controls the visibility of the React Popover.

-
    -
  • {`true`} shows the popover.
    • -
  • {`false`} hides the popover.
    • -
-
-
diff --git a/packages/docs/content/api/CProgress.api.mdx b/packages/docs/content/api/CProgress.api.mdx deleted file mode 100644 index be1efeea..00000000 --- a/packages/docs/content/api/CProgress.api.mdx +++ /dev/null @@ -1,110 +0,0 @@ - -```jsx -import { CProgress } from '@coreui/react' -// or -import CProgress from '@coreui/react/src/components/progress/CProgress' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
animated#-{`boolean`}
-

Use to animate the stripes right to left via CSS3 animations.

-
className#-{`string`}
-

A string of all className you want applied to the component.

-
color#-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
-

Sets the color context of the component to one of CoreUI’s themed colors.

-
height#-{`number`}
-

Sets the height of the component. If you set that value the inner {``} will automatically resize accordingly.

-
progressBarClassName#4.9.0+-{`string`}
-

A string of all className you want applied to the {``} component.

-
thin#-{`boolean`}
-

Makes progress bar thinner.

-
value#-{`number`}
-

The percent to progress the ProgressBar (out of 100).

-
variant#-{`'striped'`}
-

Set the progress bar variant to optional striped.

-
white#-{`boolean`}
-

Change the default color to white.

-
-
diff --git a/packages/docs/content/api/CProgressBar.api.mdx b/packages/docs/content/api/CProgressBar.api.mdx deleted file mode 100644 index 481b40ba..00000000 --- a/packages/docs/content/api/CProgressBar.api.mdx +++ /dev/null @@ -1,70 +0,0 @@ - -```jsx -import { CProgressBar } from '@coreui/react' -// or -import CProgressBar from '@coreui/react/src/components/progress/CProgressBar' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
animated#-{`boolean`}
-

Use to animate the stripes right to left via CSS3 animations.

-
className#-{`string`}
-

A string of all className you want applied to the component.

-
color#-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
-

Sets the color context of the component to one of CoreUI’s themed colors.

-
value#{`0`}{`number`}
-

The percent to progress the ProgressBar.

-
variant#-{`'striped'`}
-

Set the progress bar variant to optional striped.

-
-
diff --git a/packages/docs/content/api/CProgressStacked.api.mdx b/packages/docs/content/api/CProgressStacked.api.mdx deleted file mode 100644 index 0aa39597..00000000 --- a/packages/docs/content/api/CProgressStacked.api.mdx +++ /dev/null @@ -1,30 +0,0 @@ - -```jsx -import { CProgressStacked } from '@coreui/react' -// or -import CProgressStacked from '@coreui/react/src/components/progress/CProgressStacked' -``` - -
- - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the component.

-
-
diff --git a/packages/docs/content/api/CRow.api.mdx b/packages/docs/content/api/CRow.api.mdx deleted file mode 100644 index 578a2184..00000000 --- a/packages/docs/content/api/CRow.api.mdx +++ /dev/null @@ -1,90 +0,0 @@ - -```jsx -import { CRow } from '@coreui/react' -// or -import CRow from '@coreui/react/src/components/grid/CRow' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
lg#-{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}
-

The number of columns/offset/order on large devices (<1200px).

-
md#-{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}
-

The number of columns/offset/order on medium devices (<992px).

-
sm#-{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}
-

The number of columns/offset/order on small devices (<768px).

-
xl#-{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}
-

The number of columns/offset/order on X-Large devices (<1400px).

-
xs#-{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}
-

The number of columns/offset/order on extra small devices (<576px).

-
xxl#-{`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}
-

The number of columns/offset/order on XX-Large devices (≥1400px).

-
-
diff --git a/packages/docs/content/api/CSearchButton.api.mdx b/packages/docs/content/api/CSearchButton.api.mdx deleted file mode 100644 index 43de3ffc..00000000 --- a/packages/docs/content/api/CSearchButton.api.mdx +++ /dev/null @@ -1,90 +0,0 @@ - -```jsx -import { CSearchButton } from '@coreui/react' -// or -import CSearchButton from '@coreui/react/src/components/search-button/CSearchButton' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
children#-{`ReactNode`}
-

Content to customize the full button body.

-
className#-{`string`}
-

A string of all className you want applied to the base component.

-
icon#-{`ReactNode`}
-

Custom icon displayed before the placeholder text.

-
onTrigger#-{`() => void`}
-

Callback fired when the component is activated by click or keyboard shortcut.

-
placeholder#{`Search`}{`ReactNode`}
-

Placeholder content rendered inside {`.search-button-placeholder`}.

-
preventDefault#{`true`}{`boolean`}
-

Prevent the browser's default behavior when the configured shortcut matches.

-
shortcut#{`meta+/,ctrl+/`}{`string`}
-

Comma-separated shortcut list. The component matches all configured shortcuts and renders the platform-preferred one.

-
-
diff --git a/packages/docs/content/api/CSidebar.api.mdx b/packages/docs/content/api/CSidebar.api.mdx deleted file mode 100644 index 52da80c9..00000000 --- a/packages/docs/content/api/CSidebar.api.mdx +++ /dev/null @@ -1,150 +0,0 @@ - -```jsx -import { CSidebar } from '@coreui/react' -// or -import CSidebar from '@coreui/react/src/components/sidebar/CSidebar' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
as#{`div`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'div')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the component.

-
colorScheme#-{`'dark'`}, {`'light'`}
-

Sets if the color of text should be colored for a light or dark dark background.

-
narrow#-{`boolean`}
-

Make sidebar narrow.

-
onHide#-{`() => void`}
-

Callback fired when the component requests to be hidden.

-
onShow#-{`() => void`}
-

Callback fired when the component requests to be shown.

-
onVisibleChange#-{`(visible: boolean) => void`}
-

Event emitted after visibility of component changed.

-
overlaid#-{`boolean`}
-

Set sidebar to overlaid variant.

-
placement#-{`'start'`}, {`'end'`}
-

Components placement, there’s no default placement.

-
position#-{`'fixed'`}, {`'sticky'`}
-

Place sidebar in non-static positions.

-
size#-{`'sm'`}, {`'lg'`}, {`'xl'`}
-

Size the component small, large, or extra large.

-
unfoldable#-{`boolean`}
-

Expand narrowed sidebar on hover.

-
visible#-{`boolean`}
-

Toggle the visibility of sidebar component.

-
-
diff --git a/packages/docs/content/api/CSidebarBrand.api.mdx b/packages/docs/content/api/CSidebarBrand.api.mdx deleted file mode 100644 index ea656d30..00000000 --- a/packages/docs/content/api/CSidebarBrand.api.mdx +++ /dev/null @@ -1,40 +0,0 @@ - -```jsx -import { CSidebarBrand } from '@coreui/react' -// or -import CSidebarBrand from '@coreui/react/src/components/sidebar/CSidebarBrand' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
as#5.0.0+{`a`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'a')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the component.

-
-
diff --git a/packages/docs/content/api/CSidebarFooter.api.mdx b/packages/docs/content/api/CSidebarFooter.api.mdx deleted file mode 100644 index b381e326..00000000 --- a/packages/docs/content/api/CSidebarFooter.api.mdx +++ /dev/null @@ -1,30 +0,0 @@ - -```jsx -import { CSidebarFooter } from '@coreui/react' -// or -import CSidebarFooter from '@coreui/react/src/components/sidebar/CSidebarFooter' -``` - -
- - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the component.

-
-
diff --git a/packages/docs/content/api/CSidebarHeader.api.mdx b/packages/docs/content/api/CSidebarHeader.api.mdx deleted file mode 100644 index 0b4d9468..00000000 --- a/packages/docs/content/api/CSidebarHeader.api.mdx +++ /dev/null @@ -1,30 +0,0 @@ - -```jsx -import { CSidebarHeader } from '@coreui/react' -// or -import CSidebarHeader from '@coreui/react/src/components/sidebar/CSidebarHeader' -``` - -
- - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the component.

-
-
diff --git a/packages/docs/content/api/CSidebarNav.api.mdx b/packages/docs/content/api/CSidebarNav.api.mdx deleted file mode 100644 index d9f655fd..00000000 --- a/packages/docs/content/api/CSidebarNav.api.mdx +++ /dev/null @@ -1,60 +0,0 @@ - -```jsx -import { CSidebarNav } from '@coreui/react' -// or -import CSidebarNav from '@coreui/react/src/components/sidebar/CSidebarNav' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
as#5.0.0+{`ul`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'ul')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the component.

-
compact#5.11.0+-{`boolean`}
-

Make navigation more compact by cutting link padding in half.

-
variant#5.11.0+-{`'tree'`}
-

Sets the navigation variant.

-
-
diff --git a/packages/docs/content/api/CSidebarToggler.api.mdx b/packages/docs/content/api/CSidebarToggler.api.mdx deleted file mode 100644 index 89f62377..00000000 --- a/packages/docs/content/api/CSidebarToggler.api.mdx +++ /dev/null @@ -1,30 +0,0 @@ - -```jsx -import { CSidebarToggler } from '@coreui/react' -// or -import CSidebarToggler from '@coreui/react/src/components/sidebar/CSidebarToggler' -``` - -
- - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the component.

-
-
diff --git a/packages/docs/content/api/CSpinner.api.mdx b/packages/docs/content/api/CSpinner.api.mdx deleted file mode 100644 index 60d19f44..00000000 --- a/packages/docs/content/api/CSpinner.api.mdx +++ /dev/null @@ -1,80 +0,0 @@ - -```jsx -import { CSpinner } from '@coreui/react' -// or -import CSpinner from '@coreui/react/src/components/spinner/CSpinner' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
as#{`div`}{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'div')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent<...>)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the component.

-
color#-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
-

Sets the color context of the component to one of CoreUI’s themed colors.

-
size#-{`'sm'`}
-

Size the component small.

-
variant#{`border`}{`'border'`}, {`'grow'`}
-

Set the button variant to an outlined button or a ghost button.

-
visuallyHiddenLabel#{`Loading...`}{`string`}
-

Set visually hidden label for accessibility purposes.

-
-
diff --git a/packages/docs/content/api/CTab.api.mdx b/packages/docs/content/api/CTab.api.mdx deleted file mode 100644 index 96b8adf7..00000000 --- a/packages/docs/content/api/CTab.api.mdx +++ /dev/null @@ -1,50 +0,0 @@ - -```jsx -import { CTab } from '@coreui/react' -// or -import CTab from '@coreui/react/src/components/tabs/CTab' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
disabled#-{`boolean`}
-

Toggle the disabled state for the component.

-
itemKey#-{`string`}, {`number`}
-

Item key.

-
-
diff --git a/packages/docs/content/api/CTabContent.api.mdx b/packages/docs/content/api/CTabContent.api.mdx deleted file mode 100644 index 1ed42368..00000000 --- a/packages/docs/content/api/CTabContent.api.mdx +++ /dev/null @@ -1,30 +0,0 @@ - -```jsx -import { CTabContent } from '@coreui/react' -// or -import CTabContent from '@coreui/react/src/components/tabs/CTabContent' -``` - -
- - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
-
diff --git a/packages/docs/content/api/CTabList.api.mdx b/packages/docs/content/api/CTabList.api.mdx deleted file mode 100644 index 545a9a71..00000000 --- a/packages/docs/content/api/CTabList.api.mdx +++ /dev/null @@ -1,50 +0,0 @@ - -```jsx -import { CTabList } from '@coreui/react' -// or -import CTabList from '@coreui/react/src/components/tabs/CTabList' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
layout#-{`'fill'`}, {`'justified'`}
-

Specify a layout type for component.

-
variant#-{`'enclosed'`}, {`'enclosed-pills'`}, {`'pills'`}, {`'tabs'`}, {`'underline'`}, {`'underline-border'`}
-

Set the nav variant to tabs or pills.

-
-
diff --git a/packages/docs/content/api/CTabPane.api.mdx b/packages/docs/content/api/CTabPane.api.mdx deleted file mode 100644 index caf5c27b..00000000 --- a/packages/docs/content/api/CTabPane.api.mdx +++ /dev/null @@ -1,70 +0,0 @@ - -```jsx -import { CTabPane } from '@coreui/react' -// or -import CTabPane from '@coreui/react/src/components/tabs/CTabPane' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
onHide#-{`() => void`}
-

Callback fired when the component requests to be hidden.

-
onShow#-{`() => void`}
-

Callback fired when the component requests to be shown.

-
transition#5.1.0+{`true`}{`boolean`}
-

Enable fade in and fade out transition.

-
visible#-{`boolean`}
-

Toggle the visibility of component.

-
-
diff --git a/packages/docs/content/api/CTabPanel.api.mdx b/packages/docs/content/api/CTabPanel.api.mdx deleted file mode 100644 index 704ae2af..00000000 --- a/packages/docs/content/api/CTabPanel.api.mdx +++ /dev/null @@ -1,80 +0,0 @@ - -```jsx -import { CTabPanel } from '@coreui/react' -// or -import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
itemKey#-{`string`}, {`number`}
-

Item key.

-
onHide#-{`() => void`}
-

Callback fired when the component requests to be hidden.

-
onShow#-{`() => void`}
-

Callback fired when the component requests to be shown.

-
transition#{`true`}{`boolean`}
-

Enable fade in and fade out transition.

-
visible#-{`boolean`}
-

Toggle the visibility of component.

-
-
diff --git a/packages/docs/content/api/CTable.api.mdx b/packages/docs/content/api/CTable.api.mdx deleted file mode 100644 index 51dff84d..00000000 --- a/packages/docs/content/api/CTable.api.mdx +++ /dev/null @@ -1,209 +0,0 @@ - -```jsx -import { CTable } from '@coreui/react' -// or -import CTable from '@coreui/react/src/components/table/CTable' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
align#-{`string`}
-

Set the vertical aligment.

-
borderColor#-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
-

Sets the border color of the component to one of CoreUI’s themed colors.

-
bordered#-{`boolean`}
-

Add borders on all sides of the table and cells.

-
borderless#-{`boolean`}
-

Remove borders on all sides of the table and cells.

-
caption#-{`string`}
-

Put the caption on the top if you set {`caption="top"`} of the table or set the text of the table caption.

-
captionTop#4.3.0+-{`string`}
-

Set the text of the table caption and the caption on the top of the table.

-
className#-{`string`}
-

A string of all className you want applied to the component.

-
color#-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
-

Sets the color context of the component to one of CoreUI’s themed colors.

-
columns#4.3.0+-{`(string | Column)[]`}
-

Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. '_props')
- In columns prop each array item represents one column. Item might be specified in two ways: String: each item define column name equal to item value. Object: item is object with following keys available as column configuration:

-
    -
  • key (required)(String) - define column name equal to item key.
    • -
  • label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word.
    • -
  • _props (Object) - adds classes to all cels in column, ex. {`_props: { scope: 'col', className: 'custom-class' }`},
    • -
  • _style (Object) - adds styles to the column header (useful for defining widths)
    • -
-
-

Array of objects or strings, where each element represents one cell in the table footer.
- Example items: {`['FooterCell', 'FooterCell', 'FooterCell']`} or {`[{ label: 'FooterCell', _props: { color: 'success' }, ...]`}

-
hover#-{`boolean`}
-

Enable a hover state on table rows within a {``}.

-
items#4.3.0+-{`Item[]`}
-

Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by 'props' key and to single cell by 'cellProps'.
- Example item: {`{ name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}`}

-
responsive#-{`boolean`}, {`'sm'`}, {`'md'`}, {`'lg'`}, {`'xl'`}, {`'xxl'`}
-

Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.

-
small#-{`boolean`}
-

Make table more compact by cutting all cell {`padding`} in half.

-
striped#-{`boolean`}
-

Add zebra-striping to any table row within the {``}.

-
stripedColumns#4.3.0+-{`boolean`}
-

Add zebra-striping to any table column.

-
tableFootProps#4.3.0+-{`CTableFootProps`}
-

Properties that will be passed to the table footer component.

-
tableHeadProps#4.3.0+-{`CTableHeadProps`}
-

Properties that will be passed to the table head component.

-
-
diff --git a/packages/docs/content/api/CTableBody.api.mdx b/packages/docs/content/api/CTableBody.api.mdx deleted file mode 100644 index f97cb4dc..00000000 --- a/packages/docs/content/api/CTableBody.api.mdx +++ /dev/null @@ -1,40 +0,0 @@ - -```jsx -import { CTableBody } from '@coreui/react' -// or -import CTableBody from '@coreui/react/src/components/table/CTableBody' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the component.

-
color#-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
-

Sets the color context of the component to one of CoreUI’s themed colors.

-
-
diff --git a/packages/docs/content/api/CTableCaption.api.mdx b/packages/docs/content/api/CTableCaption.api.mdx deleted file mode 100644 index 73372f90..00000000 --- a/packages/docs/content/api/CTableCaption.api.mdx +++ /dev/null @@ -1,10 +0,0 @@ - -```jsx -import { CTableCaption } from '@coreui/react' -// or -import CTableCaption from '@coreui/react/src/components/table/CTableCaption' -``` - - - - diff --git a/packages/docs/content/api/CTableDataCell.api.mdx b/packages/docs/content/api/CTableDataCell.api.mdx deleted file mode 100644 index bd076614..00000000 --- a/packages/docs/content/api/CTableDataCell.api.mdx +++ /dev/null @@ -1,60 +0,0 @@ - -```jsx -import { CTableDataCell } from '@coreui/react' -// or -import CTableDataCell from '@coreui/react/src/components/table/CTableDataCell' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
active#-{`boolean`}
-

Highlight a table row or cell.

-
align#-{`string`}
-

Set the vertical aligment.

-
className#-{`string`}
-

A string of all className you want applied to the component.

-
color#-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
-

Sets the color context of the component to one of CoreUI’s themed colors.

-
-
diff --git a/packages/docs/content/api/CTableFoot.api.mdx b/packages/docs/content/api/CTableFoot.api.mdx deleted file mode 100644 index 532b8d60..00000000 --- a/packages/docs/content/api/CTableFoot.api.mdx +++ /dev/null @@ -1,40 +0,0 @@ - -```jsx -import { CTableFoot } from '@coreui/react' -// or -import CTableFoot from '@coreui/react/src/components/table/CTableFoot' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the component.

-
color#-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
-

Sets the color context of the component to one of CoreUI’s themed colors.

-
-
diff --git a/packages/docs/content/api/CTableHead.api.mdx b/packages/docs/content/api/CTableHead.api.mdx deleted file mode 100644 index 3c7b6463..00000000 --- a/packages/docs/content/api/CTableHead.api.mdx +++ /dev/null @@ -1,40 +0,0 @@ - -```jsx -import { CTableHead } from '@coreui/react' -// or -import CTableHead from '@coreui/react/src/components/table/CTableHead' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the component.

-
color#-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
-

Sets the color context of the component to one of CoreUI’s themed colors.

-
-
diff --git a/packages/docs/content/api/CTableHeaderCell.api.mdx b/packages/docs/content/api/CTableHeaderCell.api.mdx deleted file mode 100644 index 504b445d..00000000 --- a/packages/docs/content/api/CTableHeaderCell.api.mdx +++ /dev/null @@ -1,40 +0,0 @@ - -```jsx -import { CTableHeaderCell } from '@coreui/react' -// or -import CTableHeaderCell from '@coreui/react/src/components/table/CTableHeaderCell' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the component.

-
color#-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
-

Sets the color context of the component to one of CoreUI’s themed colors.

-
-
diff --git a/packages/docs/content/api/CTableResponsiveWrapper.api.mdx b/packages/docs/content/api/CTableResponsiveWrapper.api.mdx deleted file mode 100644 index 31079177..00000000 --- a/packages/docs/content/api/CTableResponsiveWrapper.api.mdx +++ /dev/null @@ -1,30 +0,0 @@ - -```jsx -import { CTableResponsiveWrapper } from '@coreui/react' -// or -import CTableResponsiveWrapper from '@coreui/react/src/components/table/CTableResponsiveWrapper' -``` - -
- - - - - - - - - - - - - - - - - - -
PropertyDefaultType
responsive#-{`boolean`}, {`'sm'`}, {`'md'`}, {`'lg'`}, {`'xl'`}, {`'xxl'`}
-

Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.

-
-
diff --git a/packages/docs/content/api/CTableRow.api.mdx b/packages/docs/content/api/CTableRow.api.mdx deleted file mode 100644 index e38e513a..00000000 --- a/packages/docs/content/api/CTableRow.api.mdx +++ /dev/null @@ -1,60 +0,0 @@ - -```jsx -import { CTableRow } from '@coreui/react' -// or -import CTableRow from '@coreui/react/src/components/table/CTableRow' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
active#-{`boolean`}
-

Highlight a table row or cell..

-
align#-{`string`}
-

Set the vertical aligment.

-
className#-{`string`}
-

A string of all className you want applied to the component.

-
color#-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
-

Sets the color context of the component to one of CoreUI’s themed colors.

-
-
diff --git a/packages/docs/content/api/CTabs.api.mdx b/packages/docs/content/api/CTabs.api.mdx deleted file mode 100644 index 67d58e91..00000000 --- a/packages/docs/content/api/CTabs.api.mdx +++ /dev/null @@ -1,71 +0,0 @@ - -```jsx -import { CTabs } from '@coreui/react' -// or -import CTabs from '@coreui/react/src/components/tabs/CTabs' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
activeItemKey#-{`string`}, {`number`}
-

Controls the currently active tab.
- When provided, the component operates in a controlled mode. You must handle tab switching manually by updating this prop.

- `} /> -
className#-{`string`}
-

A string of all className you want applied to the base component.

-
defaultActiveItemKey#-{`string`}, {`number`}
-

Sets the initially active tab when the component mounts.
- After initialization, the component manages active tab changes internally.
- Use {`defaultActiveItemKey`} for uncontrolled usage.

- `} /> -
onChange#-{`(value: string | number) => void`}
-

Callback fired when the active tab changes.

-
    -
  • In controlled mode ({`activeItemKey`} provided), you must update {`activeItemKey`} yourself based on the value received.
    • -
  • In uncontrolled mode, this callback is called after internal state updates.
    • -
- console.log('Tab changed to', key)} />`} /> -
-
diff --git a/packages/docs/content/api/CToast.api.mdx b/packages/docs/content/api/CToast.api.mdx deleted file mode 100644 index 67c568fa..00000000 --- a/packages/docs/content/api/CToast.api.mdx +++ /dev/null @@ -1,100 +0,0 @@ - -```jsx -import { CToast } from '@coreui/react' -// or -import CToast from '@coreui/react/src/components/toast/CToast' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
animation#{`true`}{`boolean`}
-

Apply a CSS fade transition to the toast.

-
autohide#{`true`}{`boolean`}
-

Auto hide the toast.

-
className#-{`string`}
-

A string of all className you want applied to the base component.

-
color#-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
-

Sets the color context of the component to one of CoreUI’s themed colors.

-
delay#{`5000`}{`number`}
-

Delay hiding the toast (ms).

-
onClose#-{`(index: number) => void`}
-

Callback fired when the component requests to be closed.

-
onShow#-{`(index: number) => void`}
-

Callback fired when the component requests to be shown.

-
visible#{`false`}{`boolean`}
-

Toggle the visibility of component.

-
-
diff --git a/packages/docs/content/api/CToastBody.api.mdx b/packages/docs/content/api/CToastBody.api.mdx deleted file mode 100644 index 7227bece..00000000 --- a/packages/docs/content/api/CToastBody.api.mdx +++ /dev/null @@ -1,30 +0,0 @@ - -```jsx -import { CToastBody } from '@coreui/react' -// or -import CToastBody from '@coreui/react/src/components/toast/CToastBody' -``` - -
- - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
-
diff --git a/packages/docs/content/api/CToastClose.api.mdx b/packages/docs/content/api/CToastClose.api.mdx deleted file mode 100644 index 8ad1dcc8..00000000 --- a/packages/docs/content/api/CToastClose.api.mdx +++ /dev/null @@ -1,130 +0,0 @@ - -```jsx -import { CToastClose } from '@coreui/react' -// or -import CToastClose from '@coreui/react/src/components/toast/CToastClose' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
active#-{`boolean`}
-

Toggle the active state for the component.

-
as#-{`(ElementType & string)`}, {`(ElementType & ComponentClass)`}, {`(ElementType & FunctionComponent)`}
-

Component used for the root node. Either a string to use a HTML element or a component.

-
className#-{`string`}
-

A string of all className you want applied to the base component.

-
dark#-{`boolean`}
-

Invert the default color.

-
disabled#-{`boolean`}
-

Toggle the disabled state for the component.

-
href#-{`string`}
-

The href attribute specifies the URL of the page the link goes to.

-
shape#-{`'rounded'`}, {`'rounded-top'`}, {`'rounded-end'`}, {`'rounded-bottom'`}, {`'rounded-start'`}, {`'rounded-circle'`}, {`'rounded-pill'`}, {`'rounded-0'`}, {`'rounded-1'`}, {`'rounded-2'`}, {`'rounded-3'`}, {`string`}
-

Select the shape of the component.

-
size#-{`'sm'`}, {`'lg'`}
-

Size the component small or large.

-
type#-{`'button'`}, {`'submit'`}, {`'reset'`}
-

Specifies the type of button. Always specify the type attribute for the {`

variant#-{`'outline'`}, {`'ghost'`}
-

Set the button variant to an outlined button or a ghost button.

-
white#Deprecated 5.0.0-{`boolean`}
-

Change the default color to white.

-
-
diff --git a/packages/docs/content/api/CToastHeader.api.mdx b/packages/docs/content/api/CToastHeader.api.mdx deleted file mode 100644 index b3412e05..00000000 --- a/packages/docs/content/api/CToastHeader.api.mdx +++ /dev/null @@ -1,40 +0,0 @@ - -```jsx -import { CToastHeader } from '@coreui/react' -// or -import CToastHeader from '@coreui/react/src/components/toast/CToastHeader' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
closeButton#-{`boolean`}
-

Automatically add a close button to the header.

-
-
diff --git a/packages/docs/content/api/CToaster.api.mdx b/packages/docs/content/api/CToaster.api.mdx deleted file mode 100644 index a0738d3f..00000000 --- a/packages/docs/content/api/CToaster.api.mdx +++ /dev/null @@ -1,50 +0,0 @@ - -```jsx -import { CToaster } from '@coreui/react' -// or -import CToaster from '@coreui/react/src/components/toast/CToaster' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
placement#-{`'top-start'`}, {`'top'`}, {`'top-end'`}, {`'middle-start'`}, {`'middle'`}, {`'middle-end'`}, {`'bottom-start'`}, {`'bottom'`}, {`'bottom-end'`}, {`string`}
-

Describes the placement of your component.

-
push#-{`ReactElement`}
-

Adds new {`CToast`} to {`CToaster`}.

-
-
diff --git a/packages/docs/content/api/CTooltip.api.mdx b/packages/docs/content/api/CTooltip.api.mdx deleted file mode 100644 index f62b9408..00000000 --- a/packages/docs/content/api/CTooltip.api.mdx +++ /dev/null @@ -1,189 +0,0 @@ - -```jsx -import { CTooltip } from '@coreui/react' -// or -import CTooltip from '@coreui/react/src/components/tooltip/CTooltip' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
animation#4.9.0+{`true`}{`boolean`}
-

Enables or disables the CSS fade transition for the React Tooltip.

-
className#-{`string`}
-

Adds a custom class name to the React Tooltip container. Useful for overriding default styles or applying additional design choices.

-
container#4.11.0+{`document.body`}{`Element`}, {`DocumentFragment`}, {`(() => Element | DocumentFragment)`}
-

Appends the React Tooltip to a specific element instead of the default {`document.body`}. You may pass:

-
    -
  • A DOM element ({`HTMLElement`} or {`DocumentFragment`})
    • -
  • A function that returns a single element
    • -
  • {`null`}
    • -
- ...`} /> -
content#-{`ReactNode`}
-

Content to be displayed within the React Tooltip. Can be a string or any valid React node.

-
delay#4.9.0+{`0`}{`number`}, {`{ show: number; hide: number; }`}
-

The delay (in milliseconds) before showing or hiding the React Tooltip.

-
    -
  • If provided as a number, the delay is applied to both "show" and "hide".
    • -
  • If provided as an object, it should have distinct "show" and "hide" values.
    • -
- ... - -// Delays 500ms on show and 100ms on hide -...`} /> -
fallbackPlacements#4.9.0+{`['top', 'right', 'bottom', 'left']`}{`'top', 'right', 'bottom', 'left'`}, {`('top', 'right', 'bottom', 'left')[]`}
-

Array of fallback placements for the React Tooltip to use when the preferred placement cannot be achieved. These placements are tried in order.

-
offset#{`[0, 6]`}{`[number, number]`}
-

Adjusts the offset of the React Tooltip relative to its target. Expects a tuple {`[x-axis, y-axis]`}.

- ... - -// Offset the menu 5px in both X and Y direction -...`} /> -
onHide#-{`() => void`}
-

Callback fired immediately after the React Tooltip is hidden.

-
onShow#-{`() => void`}
-

Callback fired immediately after the React Tooltip is shown.

-
placement#{`top`}{`'auto'`}, {`'top'`}, {`'bottom'`}, {`'right'`}, {`'left'`}
-

Initial placement of the React Tooltip. Note that Popper.js modifiers may alter this placement automatically if there's insufficient space in the chosen position.

-
popperConfig#5.5.0+-{`Partial`}, {`((defaultPopperConfig: Partial) => Partial)`}
-

Customize the Popper.js configuration used to position the React Tooltip. Pass either an object or a function returning a modified config. Learn more

- ({ - ...defaultConfig, - strategy: 'fixed', - modifiers: [ - ...defaultConfig.modifiers, - { name: 'computeStyles', options: { adaptive: false } }, - ], - })} ->...`} /> -
trigger#{`['hover', 'focus']`}{`'hover'`}, {`'focus'`}, {`'click'`}, {`('hover' | 'focus' | 'click')[]`}
-

Determines the events that toggle the visibility of the React Tooltip. Can be a single trigger or an array of triggers.

- ... - -// Hover + click combined -...`} /> -
visible#-{`boolean`}
-

Controls the visibility of the React Tooltip.

-
    -
  • {`true`} to show the tooltip.
    • -
  • {`false`} to hide the tooltip.
    • -
-
-
diff --git a/packages/docs/content/api/CWidgetStatsA.api.mdx b/packages/docs/content/api/CWidgetStatsA.api.mdx deleted file mode 100644 index c67a83f0..00000000 --- a/packages/docs/content/api/CWidgetStatsA.api.mdx +++ /dev/null @@ -1,80 +0,0 @@ - -```jsx -import { CWidgetStatsA } from '@coreui/react' -// or -import CWidgetStatsA from '@coreui/react/src/components/widgets/CWidgetStatsA' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
action#-{`ReactNode`}
-

Action node for your component.

-
chart#-{`ReactNode`}
-

Chart node for your component.

-
className#-{`string`}
-

A string of all className you want applied to the base component.

-
color#-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
-

Sets the color context of the component to one of CoreUI’s themed colors.

-
title#-{`ReactNode`}
-

Title node for your component.

-
value#-{`ReactNode`}
-

Value node for your component.

-
-
diff --git a/packages/docs/content/api/CWidgetStatsB.api.mdx b/packages/docs/content/api/CWidgetStatsB.api.mdx deleted file mode 100644 index aafa2604..00000000 --- a/packages/docs/content/api/CWidgetStatsB.api.mdx +++ /dev/null @@ -1,90 +0,0 @@ - -```jsx -import { CWidgetStatsB } from '@coreui/react' -// or -import CWidgetStatsB from '@coreui/react/src/components/widgets/CWidgetStatsB' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
color#-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
-

Sets the color context of the component to one of CoreUI’s themed colors.

-
inverse#-{`boolean`}
-

Colors have been inverted from their default dark shade.

-
progress#-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
-

Sets the color context of the progress bar to one of CoreUI’s themed colors.

-
text#-{`string`}
-

Helper text for your component.

-
title#-{`ReactNode`}
-

Title node for your component.

-
value#-{`ReactNode`}
-

Value node for your component.

-
-
diff --git a/packages/docs/content/api/CWidgetStatsC.api.mdx b/packages/docs/content/api/CWidgetStatsC.api.mdx deleted file mode 100644 index 538973a4..00000000 --- a/packages/docs/content/api/CWidgetStatsC.api.mdx +++ /dev/null @@ -1,90 +0,0 @@ - -```jsx -import { CWidgetStatsC } from '@coreui/react' -// or -import CWidgetStatsC from '@coreui/react/src/components/widgets/CWidgetStatsC' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
color#-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
-

Sets the color context of the component to one of CoreUI’s themed colors.

-
icon#-{`ReactNode`}
-

Icon node for your component.

-
inverse#-{`boolean`}
-

Colors have been inverted from their default dark shade.

-
progress#-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
-

Sets the color context of the progress bar to one of CoreUI’s themed colors.

-
title#-{`ReactNode`}
-

Title node for your component.

-
value#-{`ReactNode`}
-

Value node for your component.

-
-
diff --git a/packages/docs/content/api/CWidgetStatsD.api.mdx b/packages/docs/content/api/CWidgetStatsD.api.mdx deleted file mode 100644 index dc00f1c8..00000000 --- a/packages/docs/content/api/CWidgetStatsD.api.mdx +++ /dev/null @@ -1,70 +0,0 @@ - -```jsx -import { CWidgetStatsD } from '@coreui/react' -// or -import CWidgetStatsD from '@coreui/react/src/components/widgets/CWidgetStatsD' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
chart#-{`ReactNode`}
-

Chart node for your component.

-
className#-{`string`}
-

A string of all className you want applied to the base component.

-
color#-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
-

Sets the color context of the component to one of CoreUI’s themed colors.

-
icon#-{`ReactNode`}
-

Icon node for your component.

-
values#-{`Value[]`}
-

Values and titles for your component.

-
-
diff --git a/packages/docs/content/api/CWidgetStatsE.api.mdx b/packages/docs/content/api/CWidgetStatsE.api.mdx deleted file mode 100644 index 01db0735..00000000 --- a/packages/docs/content/api/CWidgetStatsE.api.mdx +++ /dev/null @@ -1,60 +0,0 @@ - -```jsx -import { CWidgetStatsE } from '@coreui/react' -// or -import CWidgetStatsE from '@coreui/react/src/components/widgets/CWidgetStatsE' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
chart#-{`ReactNode`}
-

Chart node for your component.

-
className#-{`string`}
-

A string of all className you want applied to the base component.

-
title#-{`ReactNode`}
-

Title node for your component.

-
value#-{`ReactNode`}
-

Value node for your component.

-
-
diff --git a/packages/docs/content/api/CWidgetStatsF.api.mdx b/packages/docs/content/api/CWidgetStatsF.api.mdx deleted file mode 100644 index e9caf466..00000000 --- a/packages/docs/content/api/CWidgetStatsF.api.mdx +++ /dev/null @@ -1,90 +0,0 @@ - -```jsx -import { CWidgetStatsF } from '@coreui/react' -// or -import CWidgetStatsF from '@coreui/react/src/components/widgets/CWidgetStatsF' -``` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefaultType
className#-{`string`}
-

A string of all className you want applied to the base component.

-
color#-{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
-

Sets the color context of the component to one of CoreUI’s themed colors.

-
-

Footer node for your component.

-
icon#-{`ReactNode`}
-

Icon node for your component.

-
padding#{`true`}{`boolean`}
-

Set padding of your component.

-
title#-{`ReactNode`}
-

Title node for your component.

-
value#-{`ReactNode`}
-

Value node for your component.

-
-
diff --git a/packages/docs/content/components/accordion/accessibility.mdx b/packages/docs/content/components/accordion/accessibility.mdx deleted file mode 100644 index 8dd1f95b..00000000 --- a/packages/docs/content/components/accordion/accessibility.mdx +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: React Accordion Component Accesibility -name: Accordion Accesibility -description: Detailed overview of the accessibility features implemented in CoreUI React Accordion, ensuring compliance with WAI-ARIA guidelines. -route: /components/accordion/ ---- - -## Accessible React Accordion - -Accordions are a common UI pattern used to toggle the visibility of content. Ensuring that accordions are accessible is crucial for users who rely on assistive technologies. This guide demonstrates how to create an accessible accordion using CoreUI React components, adhering to the [WAI-ARIA Accordion Design Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/). - -### Semantic Structure - -- **Button Headers**: Each accordion header is rendered as a native ` - - - -``` - -## Best Practices - -### When to Use Focus Traps - -✅ **Always Use For:** -- Modal dialogs and overlays -- Dropdown and popup menus -- Temporary slide-out panels -- Multi-step wizards or forms - -❌ **Avoid Using For:** -- Main page content -- Persistent navigation elements -- Non-interactive content areas - -### Focus Restoration - -Always use `restoreFocus={true}` for temporary UI elements: - -```jsx -// ✅ Good - Temporary overlay - -
Modal content
- - -// ⚠️ Consider carefully - Navigation change - - - -``` - -### Initial Focus Strategies - -Choose the appropriate `focusFirstElement` setting: - -- **`focusFirstElement={true}`**: For forms, menus, and interactive content -- **`focusFirstElement={false}`**: For containers, scrollable regions, or when the container itself should receive focus - -### Container Requirements - -Ensure your container meets accessibility requirements: - -```jsx -// ✅ Proper container setup - -
- {/* Focusable content */} -
- -``` - -## Testing Guidelines - -### Manual Testing - -1. **Keyboard Navigation Test**: - - Use only Tab and Shift+Tab to navigate - - Verify focus stays within the trapped area - - Test focus wrapping (first ↔ last element) - -2. **Screen Reader Test**: - - Test with NVDA, JAWS, or VoiceOver - - Verify proper announcements - - Check element labels and descriptions - -3. **Focus Restoration Test**: - - Activate trap from different starting elements - - Verify focus returns to the correct element - - Test with keyboard and mouse activation - -### Automated Testing - -```jsx -import { render, screen, waitFor } from '@testing-library/react' -import userEvent from '@testing-library/user-event' - -test('focus trap maintains keyboard navigation', async () => { - const user = userEvent.setup() - - render( - -
- - -
- - ) - - // First element should receive focus - await waitFor(() => { - expect(screen.getByTestId('first')).toHaveFocus() - }) - - // Tab should move to second element - await user.tab() - expect(screen.getByTestId('second')).toHaveFocus() - - // Tab should wrap to first element - await user.tab() - expect(screen.getByTestId('first')).toHaveFocus() -}) -``` - -## Common Accessibility Issues - -### Issue 1: Missing Focus Indicators - -**Problem**: Focus indicators are removed or unclear within the trap. - -```css -/* ❌ Bad - Removes focus indicators */ -.focus-trap *:focus { - outline: none; -} - -/* ✅ Good - Maintains or improves focus indicators */ -.focus-trap *:focus { - outline: 2px solid #0d6efd; - outline-offset: 2px; -} -``` - -### Issue 2: Inaccessible Elements - -**Problem**: Elements within the trap cannot receive focus. - -```jsx -// ❌ Bad - Button cannot receive focus - - -// ✅ Good - Properly focusable elements - - -``` - -### Issue 3: Missing Labels - -**Problem**: Focusable elements lack accessible names. - -```jsx -// ❌ Bad - No accessible name - - -// ✅ Good - Clear accessible name - -``` - -## Integration with Other Accessibility Tools - -### React Testing Library - -Use the `@testing-library/jest-dom` matchers for accessibility testing: - -```jsx -expect(element).toHaveFocus() -expect(element).toBeVisible() -expect(element).toHaveAccessibleName('Close dialog') -``` - -### axe-core Integration - -Test focus traps with automated accessibility testing: - -```javascript -import { axe, toHaveNoViolations } from 'jest-axe' - -test('focus trap has no accessibility violations', async () => { - const { container } = render() - const results = await axe(container) - expect(results).toHaveNoViolations() -}) -``` - -## Resources - -- [ARIA Authoring Practices Guide - Dialog Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/) -- [WebAIM - Keyboard Accessibility](https://webaim.org/techniques/keyboard/) -- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/) -- [MDN - Using tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) \ No newline at end of file diff --git a/packages/docs/content/components/focus-trap/api.mdx b/packages/docs/content/components/focus-trap/api.mdx deleted file mode 100644 index 41003192..00000000 --- a/packages/docs/content/components/focus-trap/api.mdx +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: React Focus Trap Component API -name: Focus Trap API -description: Explore the API reference for the React Focus Trap component and discover how to effectively utilize its props for accessibility compliance. -route: /components/focus-trap/ ---- - -import CFocusTrapAPI from '../../api/CFocusTrap.api.mdx' - -## CFocusTrap - - \ No newline at end of file diff --git a/packages/docs/content/components/focus-trap/examples/FocusTrapConditionalExample.tsx b/packages/docs/content/components/focus-trap/examples/FocusTrapConditionalExample.tsx deleted file mode 100644 index b74c71bd..00000000 --- a/packages/docs/content/components/focus-trap/examples/FocusTrapConditionalExample.tsx +++ /dev/null @@ -1,138 +0,0 @@ -import React, { useState } from 'react' -import { CButton, CFocusTrap, CFormCheck } from '@coreui/react' - -export const FocusTrapConditionalExample = () => { - const [mode, setMode] = useState<'view' | 'edit'>('view') - const [enableTrap, setEnableTrap] = useState(true) - - return ( -
-
- setMode(mode === 'edit' ? 'view' : 'edit')} - > - {mode === 'edit' ? 'Save Changes' : 'Edit Content'} - - - setEnableTrap(e.target.checked)} - label="Enable focus trap in edit mode" - /> -
- -
-
- -
-
Content Editor
- - {mode === 'edit' ? ( -
-

- Edit mode active - focus is {enableTrap ? 'trapped' : 'not trapped'} within this container -

- -
- - -
- -
- -