{"id":49111159,"url":"https://github.com/MikeNotThePope/a8f3k2x9q7","last_synced_at":"2026-05-07T11:01:10.529Z","repository":{"id":347384863,"uuid":"1189473651","full_name":"MikeNotThePope/a8f3k2x9q7","owner":"MikeNotThePope","description":"A neobrutalist React component library built on Radix UI primitives, CSS custom properties, and Tailwind CSS v4.","archived":false,"fork":false,"pushed_at":"2026-04-05T08:47:50.000Z","size":1076,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-04-13T22:41:26.667Z","etag":null,"topics":["component-library","css-custom-properties","design-system","neobrutalism","nextjs","radix-ui","react","tailwindcss","typescript","ui"],"latest_commit_sha":null,"homepage":"https://www.substrateui.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MikeNotThePope.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-03-23T11:04:22.000Z","updated_at":"2026-04-05T08:47:53.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/MikeNotThePope/a8f3k2x9q7","commit_stats":null,"previous_names":["mikenotthepope/substrate-ui","mikenotthepope/substrateui","mikenotthepope/a8f3k2x9q7"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/MikeNotThePope/a8f3k2x9q7","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeNotThePope%2Fa8f3k2x9q7","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeNotThePope%2Fa8f3k2x9q7/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeNotThePope%2Fa8f3k2x9q7/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeNotThePope%2Fa8f3k2x9q7/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MikeNotThePope","download_url":"https://codeload.github.com/MikeNotThePope/a8f3k2x9q7/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeNotThePope%2Fa8f3k2x9q7/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32734391,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-07T02:14:30.463Z","status":"ssl_error","status_checked_at":"2026-05-07T02:14:29.405Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component-library","css-custom-properties","design-system","neobrutalism","nextjs","radix-ui","react","tailwindcss","typescript","ui"],"created_at":"2026-04-21T05:00:40.479Z","updated_at":"2026-05-07T11:01:10.524Z","avatar_url":"https://github.com/MikeNotThePope.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Substrate UI\n\nA neobrutalist React component library with bold borders, hard shadows, and high contrast design. Built on [Radix UI](https://www.radix-ui.com/) primitives and [Tailwind CSS v4](https://tailwindcss.com/).\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-black.svg)](LICENSE)\n[![TypeScript](https://img.shields.io/badge/TypeScript-strict-black.svg)](https://www.typescriptlang.org/)\n[![React 19](https://img.shields.io/badge/React-19-black.svg)](https://react.dev/)\n\n**[Documentation \u0026 Demos](https://substrate-ui.vercel.app/)** | **[Storybook](https://substrate-ui.vercel.app/)** | **[npm](https://www.npmjs.com/package/@mikenotthepope/substrateui)**\n\n---\n\n## Why Substrate UI?\n\nMost component libraries optimize for invisibility — neutral colors, subtle shadows, rounded everything. Substrate UI goes the other direction: **hard pixel-offset shadows, bold borders, and sharp corners by default.** It's opinionated about aesthetics but flexible about theming, built on Radix UI so accessibility comes free.\n\n- **57 UI primitives** — Button, Dialog, Tabs, Select, DataTable, and more\n- **12 landing page components** — Hero, Pricing, FAQ, Testimonials, and more\n- **5 composite layouts** — NavBar, CardGrid, SectionNav, SimplePage, TwoColumnLayout\n- **Light \u0026 dark themes** with CSS custom properties\n- **Tree-shakeable** ESM + CJS builds\n- **Full TypeScript** support with exported types\n\n## Quick Start\n\n### Install\n\n```bash\nnpm install @mikenotthepope/substrateui\n```\n\nRequires `react` and `react-dom` v19+ as peer dependencies.\n\n### Import the stylesheet\n\nAdd the base stylesheet once in your app root. This provides all design tokens and component styles.\n\n```tsx\n// app/layout.tsx (Next.js) or src/main.tsx (Vite)\nimport \"@mikenotthepope/substrateui/styles\";\n```\n\n### Use components\n\n```tsx\nimport { Button, Card, Text } from \"@mikenotthepope/substrateui\";\n\nexport function Example() {\n  return (\n    \u003cCard\u003e\n      \u003cCard.Header\u003e\n        \u003cText variant=\"h3\"\u003eHello\u003c/Text\u003e\n      \u003c/Card.Header\u003e\n      \u003cCard.Body\u003e\n        \u003cText\u003eNeobrutalist components, ready to go.\u003c/Text\u003e\n        \u003cButton\u003eGet Started\u003c/Button\u003e\n      \u003c/Card.Body\u003e\n    \u003c/Card\u003e\n  );\n}\n```\n\n## Fonts\n\nSubstrate UI uses three font families via CSS custom properties:\n\n| Token          | Default Font    | Purpose    |\n| -------------- | --------------- | ---------- |\n| `--font-head`  | Bricolage Grotesque   | Headings   |\n| `--font-sans`  | Space Grotesk   | Body text  |\n| `--font-mono`  | Space Mono      | Code       |\n\n**Next.js:**\n\n```tsx\nimport { Space_Grotesk, Bricolage_Grotesque, Space_Mono } from \"next/font/google\";\n\nconst sans = Space_Grotesk({ variable: \"--font-sans\", subsets: [\"latin\"], weight: \"400\" });\nconst head = Bricolage_Grotesque({ variable: \"--font-head\", subsets: [\"latin\"], weight: [\"400\", \"700\", \"800\"] });\nconst mono = Space_Mono({ variable: \"--font-mono\", subsets: [\"latin\"], weight: \"400\" });\n\nexport default function RootLayout({ children }) {\n  return (\n    \u003chtml className={`${sans.variable} ${head.variable} ${mono.variable}`}\u003e\n      \u003cbody\u003e{children}\u003c/body\u003e\n    \u003c/html\u003e\n  );\n}\n```\n\n**Plain HTML / Vite:**\n\n```html\n\u003clink href=\"https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;700;800\u0026family=Space+Grotesk:wght@400;500;700\u0026family=Space+Mono\u0026display=swap\" rel=\"stylesheet\"\u003e\n\u003cstyle\u003e\n  :root {\n    --font-head: 'Bricolage Grotesque', sans-serif;\n    --font-sans: 'Space Grotesk', sans-serif;\n    --font-mono: 'Space Mono', monospace;\n  }\n\u003c/style\u003e\n```\n\nIf fonts aren't loaded, the library falls back to `Space Grotesk -\u003e system-ui -\u003e sans-serif`.\n\n## Theming\n\n### Light / Dark Mode\n\nUse the built-in `ThemeProvider` to manage theme switching:\n\n```tsx\nimport { ThemeProvider } from \"@mikenotthepope/substrateui\";\n\nfunction App({ children }) {\n  return (\n    \u003cThemeProvider defaultTheme=\"system\"\u003e\n      {children}\n    \u003c/ThemeProvider\u003e\n  );\n}\n```\n\nAccess and toggle the theme anywhere:\n\n```tsx\nimport { useTheme } from \"@mikenotthepope/substrateui\";\n\nfunction ThemeToggle() {\n  const { theme, setTheme } = useTheme();\n  return (\n    \u003cbutton onClick={() =\u003e setTheme(theme === \"dark\" ? \"light\" : \"dark\")}\u003e\n      Toggle theme\n    \u003c/button\u003e\n  );\n}\n```\n\nAccepts `\"light\"`, `\"dark\"`, or `\"system\"` (default). Persists to `localStorage` and respects `prefers-color-scheme`.\n\n### Rounded Corners\n\nComponents have sharp corners by default. Add `with-radius` to opt in to rounded corners:\n\n```html\n\u003chtml class=\"with-radius\"\u003e\n```\n\n### Custom Tokens\n\nOverride any CSS custom property to customize the theme:\n\n```css\n:root {\n  --primary: #6366f1;\n  --primary-foreground: #fff;\n  --primary-hover: #4f46e5;\n}\n```\n\nSee the full token reference in `base/substrate.css`.\n\n## Components\n\n### Primitives\n\nAccordion, Alert, AlertDialog, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Carousel, Chart, Checkbox, Collapsible, Combobox, Command, Container, ContextMenu, DataTable, Dialog, Divider, Drawer, DropdownMenu, Flex, Form, FormLayout, Grid, HoverCard, IconButton, ImageCard, Input, InputOTP, Label, Link, Loader, Marquee, Menu, Menubar, NavigationMenu, Pagination, Popover, Progress, RadioGroup, Resizable, ScrollArea, Select, Sheet, Sidebar, Skeleton, Slider, Sonner, Stack, Switch, Table, Tabs, Text, Textarea, Tooltip\n\n### Landing\n\nAnnouncementBanner, CTABanner, FAQ, FeatureSection, Footer, Hero, LogoCloud, NewsletterSignup, PricingTable, Section, StatsBar, Testimonial\n\n### Composite\n\nCardGrid, NavBar, SectionNav, SimplePage, TwoColumnLayout\n\n## Framework Compatibility\n\nWorks in any React 19 environment — Next.js, Vite, Remix, etc.\n\nThe `NavBar` component accepts an optional `linkComponent` prop for framework-specific routing:\n\n```tsx\nimport Link from \"next/link\";\nimport { NavBar } from \"@mikenotthepope/substrateui\";\n\n\u003cNavBar linkComponent={Link} brand={{ name: \"MyApp\" }} auth={{ state: \"signed-out\", href: \"/login\" }} /\u003e\n```\n\nWhen omitted, it defaults to a plain `\u003ca\u003e` tag.\n\n## Development\n\n```bash\nbun install          # Install dependencies\nbun dev              # Start the demo app (Next.js)\nbun storybook        # Start Storybook\nbun test             # Run tests\nbun run build        # Build the library (tsup)\n```\n\n### Project Structure\n\n```\nsubstrateui/\n├── src/index.ts          # Barrel export for the published package\n├── components/ui/        # 57 primitive components\n├── components/landing/   # 12 landing page components\n├── components/           # Composite components + ThemeProvider\n├── base/substrate.css    # Design tokens \u0026 base styles\n├── app/                  # Next.js demo/docs site\n├── AGENTS.md             # Shared AI agent instructions\n├── CLAUDE.md             # Claude Code config (imports AGENTS.md)\n└── tsup.config.ts        # Library build config\n```\n\n## Acknowledgements\n\nSubstrate UI draws inspiration from these projects:\n\n- [neobrutalism-components](https://github.com/ekmas/neobrutalism-components) by ekmas\n- [RetroUI](https://github.com/logging-studio/retroui) by Logging Studio\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMikeNotThePope%2Fa8f3k2x9q7","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMikeNotThePope%2Fa8f3k2x9q7","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMikeNotThePope%2Fa8f3k2x9q7/lists"}