Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
itechmeat avatar

Base Ui

itechmeat/llm-code

  • 196 installs
  • 22 repo stars
  • Updated August 1, 2026
  • itechmeat/llm-code

Implement accessible, unstyled headless UI primitives with Base UI in React apps, composing custom styled components without fighting opinionated design systems.

About

Teaches agents to build React frontends with Base UI headless primitives, composing accessible dialogs, menus, popovers, and form controls with project-specific styling instead of a bundled visual theme.

  • Headless accessible React primitives
  • Custom styling without design lock-in
  • Dialogs, menus, popovers, and form controls
  • Composable component architecture
  • Pairs with Tailwind or CSS modules

Base Ui by the numbers

  • 196 all-time installs (skills.sh)
  • +8 installs in the week ending Aug 2, 2026 (Skillselion tracking)
  • Ranked #860 of 2,245 Frontend Development skills by installs in the Skillselion catalog
  • Data as of Aug 2, 2026 (Skillselion catalog sync)
npx skills add https://github.com/itechmeat/llm-code --skill base-ui

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs196
repo stars★ 22
Last updatedAugust 1, 2026
Repositoryitechmeat/llm-code ↗

What it does

Implement accessible, unstyled headless UI primitives with Base UI in React apps, composing custom styled components without fighting opinionated design systems.

Files

references/csp-provider.mdMarkdownGitHub ↗

CSP Provider

A CSP provider component that applies a nonce to inline \<style> and \<script> tags rendered by Base UI components, and can disable inline \<style> elements.

Anatomy

Import the component and wrap it around your app:

```jsx title="Anatomy" import { CSPProvider } from '@base-ui/react/csp-provider';

// prettier-ignore <CSPProvider nonce="..."> {/ Your app or a group of components /} </CSPProvider>


Some Base UI components render inline `<style>` or `<script>` tags for functionality such as removing scrollbars or pre-hydration behavior. Under a strict Content Security Policy (CSP), these tags may be blocked unless they include a matching [nonce](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce) attribute.

`CSPProvider` allows configuring this behavior globally for all Base UI components within its tree.

## Supplying a nonce

If you enforce a CSP that blocks inline tags by default, configure your server to:

1. Generate a random nonce per request
2. Include it in your CSP header (via `style-src-elem`/`script-src`)
3. Pass the same nonce into `CSPProvider` during rendering

const nonce = crypto.randomUUID();

// Example CSP header const csp = [ default-src 'self', script-src 'self' 'nonce-${nonce}', style-src-elem 'self' 'nonce-${nonce}', ].join('; ');


Then:

import { CSPProvider } from '@base-ui/react/csp-provider';

function App({ nonce }) { return <CSPProvider nonce={nonce}>{/ ... /}</CSPProvider>; }


This will ensure that all inline `<style>` and `<script>` tags rendered by Base UI components include the correct nonce attribute, allowing them to function under your CSP.

## Disable inline style elements

You can avoid supplying a `nonce` if you disable inline `<style>` elements entirely and rely on external stylesheets only. The relevant components are `<ScrollArea.Viewport>` and `<Select.Popup>` or `<Select.List>` when `alignItemWithTrigger` is enabled, which inject a style tag to disable native scrollbars.

<style> .base-ui-disable-scrollbar { scrollbar-width: none; } .base-ui-disable-scrollbar::-webkit-scrollbar { display: none; } </style>


Specify `disableStyleElements` to remove these tags:

<CSPProvider disableStyleElements>{/ ... /}</CSPProvider>


`<script>` tags across all components are opt-in, so they are not affected by this prop and don't have their own disable flag. A `nonce` is required if any component uses inline scripts.

## Inline style attributes

`CSPProvider` covers inline `<style>` and `<script>` tags rendered as elements, but it does not cover inline style attributes (for example, `<div style="...">`). The `style-src-attr` directive in CSP governs inline style attributes encountered when parsing HTML from server pre-rendered components (it does not affect client-side JavaScript that sets styles).

In CSP, `style-src` applies to both `<style>` elements and `style=""` attributes. If you only want to control `<style>` elements, use `style-src-elem` instead.

If your CSP blocks inline style _attributes_ in addition to _elements_, you have a few options:

1. Relax your CSP by adding `'unsafe-inline'` to the `style-src-attr` directive (or using only `style-src-elem` instead of `style-src`). Style attributes specifically pose a less severe security risk than style elements, but this approach may not be acceptable in high-security environments.
2. Render the affected components only on the client, so that no inline styles are present in the initial HTML.
3. Manually unset inline styles and specify them in your CSS instead. Any component can have its inline styles unset, such as `<ScrollArea.Viewport style={{ overflow: undefined  }}>`. Note that you'll need to ensure you vet upgrades for any new inline styles added by Base UI components.

## API reference

Provides a default Content Security Policy (CSP) configuration for Base UI components that
require inline `<style>` or `<script>` tags.

**CSPProvider Props:**

| Prop                 | Type        | Default | Description                                                                                                                                                                      |
| :------------------- | :---------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| disableStyleElements | `boolean`   | `false` | Whether inline `<style>` elements created by Base UI components should not be rendered. Instead, components must specify the CSS styles via custom class names or other methods. |
| nonce                | `string`    | -       | The nonce value to apply to inline `<style>` and `<script>` tags.                                                                                                                |
| children             | `ReactNode` | -       | -                                                                                                                                                                                |

Related skills

vercel-labsVercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6kvercel-labsVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.267k29.6kshadcnShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120kxixu-meDevelop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72leonxlnxMinimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4kleonxlnxImage To CodeConvert high-fidelity design images into production-ready, visually accurate frontend code that avoids generic AI design pitfalls.177k69.4k
Frontend Developmentfrontend
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.