hyperui
Free Tailwind CSS v4 components for your next project, designed to enhance your web development with the latest features and styles ๐
File Explorer
Download Latest Version (.zip)- SKILL.md
- SKILL.md
- LICENSE.txt
- SKILL.md
- accessibility-review
- agent-browser
- frontend-design
- extensions.json
- settings.json
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 4-dark.html
- 4.html
- 5-dark.html
- 5.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 4-dark.html
- 4.html
- 5-dark.html
- 5.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 4-dark.html
- 4.html
- 5-dark.html
- 5.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 4-dark.html
- 4.html
- 5-dark.html
- 5.html
- 1-dark.html
- 1.html
- 10-dark.html
- 10.html
- 11-dark.html
- 11.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 4-dark.html
- 4.html
- 5-dark.html
- 5.html
- 6-dark.html
- 6.html
- 7-dark.html
- 7.html
- 8-dark.html
- 8.html
- 9-dark.html
- 9.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 4-dark.html
- 4.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 4-dark.html
- 4.html
- 5-dark.html
- 5.html
- 6-dark.html
- 6.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 4-dark.html
- 4.html
- 5-dark.html
- 5.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 1.html
- 10.html
- 2.html
- 3.html
- 4.html
- 5.html
- 6.html
- 7.html
- 8.html
- 9.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 4-dark.html
- 4.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 4-dark.html
- 4.html
- 5-dark.html
- 5.html
- 6-dark.html
- 6.html
- 7-dark.html
- 7.html
- 1.html
- 2.html
- 3.html
- 4.html
- 5.html
- 6.html
- 7.html
- 8.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 4-dark.html
- 4.html
- 5-dark.html
- 5.html
- 6-dark.html
- 6.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 1.html
- 2.html
- 3.html
- 4.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 4-dark.html
- 4.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3.html
- 1.html
- 2.html
- 3.html
- 4.html
- 5.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 1.html
- 2.html
- 3.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 4-dark.html
- 4.html
- 5-dark.html
- 5.html
- 6-dark.html
- 6.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 4-dark.html
- 4.html
- 5-dark.html
- 5.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 4-dark.html
- 4.html
- 5-dark.html
- 5.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 4-dark.html
- 4.html
- 5-dark.html
- 5.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 4-dark.html
- 4.html
- 5-dark.html
- 5.html
- 6-dark.html
- 6.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 4-dark.html
- 4.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 4-dark.html
- 4.html
- 5-dark.html
- 5.html
- 6-dark.html
- 6.html
- 7-dark.html
- 7.html
- 8-dark.html
- 8.html
- 1.html
- 1.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 4-dark.html
- 4.html
- 5-dark.html
- 5.html
- 6-dark.html
- 6.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 4-dark.html
- 4.html
- 5-dark.html
- 5.html
- 6-dark.html
- 6.html
- 7.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 4-dark.html
- 4.html
- 5-dark.html
- 5.html
- 1.html
- 2.html
- 3.html
- 4.html
- 5.html
- 6.html
- 7.html
- 8.html
- 9.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 4-dark.html
- 4.html
- 5-dark.html
- 5.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 4-dark.html
- 4.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 4-dark.html
- 4.html
- 5-dark.html
- 5.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 4-dark.html
- 4.html
- 1-dark.html
- 1.html
- 10-dark.html
- 10.html
- 11-dark.html
- 11.html
- 12-dark.html
- 12.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 4-dark.html
- 4.html
- 5-dark.html
- 5.html
- 6-dark.html
- 6.html
- 7-dark.html
- 7.html
- 8-dark.html
- 8.html
- 9-dark.html
- 9.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 4-dark.html
- 4.html
- 1.html
- 2.html
- 3.html
- 4.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 1.html
- 2.html
- 1.html
- 2.html
- 3.html
- 4.html
- 5.html
- 6.html
- 7.html
- 8.html
- 1.html
- 2.html
- 3.html
- 4.html
- 1.html
- 2.html
- 3.html
- 4.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 4-dark.html
- 4.html
- 5-dark.html
- 5.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 4-dark.html
- 4.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 4-dark.html
- 4.html
- 1-dark.html
- 1.html
- 2-dark.html
- 2.html
- 3-dark.html
- 3.html
- 1.html
- 2.html
- 3.html
- 4.html
- 5.html
- 1.html
- blog.css
- component.css
- component.js
- favicon.ico
- og.jpg
- robots.txt
- generate-git-metadata.js
- og.jpg
- BackLink.astro
- BaseAd.astro
- BaseHead.astro
- BaseHero.astro
- BlogCard.astro
- CollectionFeature.astro
- ComponentCard.astro
- ComponentPreview.astro
- DarkModeGenerator.astro
- DarkModeInspector.astro
- DarkModePreviewPanel.astro
- DarkModeRulesDialog.astro
- DarkModeSidePanel.astro
- DropdownMenu.astro
- DropdownToggle.astro
- DropdownWrapper.astro
- ExternalLink.astro
- FormattedDate.astro
- HeaderLink.astro
- PreviewBreakpoints.astro
- PreviewCopy.astro
- PreviewDetails.astro
- PreviewDirection.astro
- PreviewRefs.astro
- PreviewView.astro
- PreviewWrapper.astro
- RelatedComponents.astro
- SearchInput.astro
- SearchResults.astro
- SearchWrapper.astro
- SiteFooter.astro
- SiteHeader.astro
- StatusBadge.astro
- TemplateDisclaimer.astro
- ToolCard.astro
- TooltipWrapper.astro
- TypographyMapper.astro
- dark-mode.js
- seo.js
- acknowledgements.mdx
- animated-border-gradient-with-tailwindcss.mdx
- animation-duration-delay-with-tailwindcss.mdx
- faqs.mdx
- highlight-hover-effect-with-tailwindcss.mdx
- how-to-contribute.mdx
- how-to-write-better-containers-in-tailwindcss.mdx
- how-to-write-better-tailwindcss.mdx
- move-to-tailwindcss-without-breaking-changes.mdx
- remove-number-input-spinners-with-tailwindcss.mdx
- accordions.mdx
- badges.mdx
- breadcrumbs.mdx
- button-groups.mdx
- charts.mdx
- checkboxes.mdx
- details-list.mdx
- dividers.mdx
- dropdown.mdx
- empty-states.mdx
- file-uploaders.mdx
- filters.mdx
- grids.mdx
- inputs.mdx
- loaders.mdx
- media.mdx
- modals.mdx
- pagination.mdx
- progress-bars.mdx
- quantity-inputs.mdx
- radio-groups.mdx
- range-inputs.mdx
- selects.mdx
- side-menu.mdx
- skip-links.mdx
- stats.mdx
- steps.mdx
- tables.mdx
- tabs.mdx
- textareas.mdx
- timelines.mdx
- toasts.mdx
- toggles.mdx
- vertical-menu.mdx
- announcements.mdx
- banners.mdx
- blog-cards.mdx
- buttons.mdx
- cards.mdx
- carts.mdx
- contact-forms.mdx
- ctas.mdx
- empty-content.mdx
- faqs.mdx
- feature-grids.mdx
- footers.mdx
- headers.mdx
- logo-clouds.mdx
- newsletter-signup.mdx
- polls.mdx
- pricing.mdx
- product-cards.mdx
- product-collections.mdx
- sections.mdx
- team-sections.mdx
- accordions.mdx
- alerts.mdx
- badges.mdx
- buttons.mdx
- cards.mdx
- checkboxes.mdx
- inputs.mdx
- progress-bars.mdx
- selects.mdx
- tabs.mdx
- textareas.mdx
- analytics-dashboard.mdx
- saas-landing-page.mdx
- git-metadata.json
- tools.json
- BaseLayout.astro
- BlogPost.astro
- ComponentPost.astro
- ErrorLayout.astro
- config.js
- element-constants.js
- preview-document.js
- rule-renderer.js
- transform-class.js
- transform-html.js
- ui-renderer.js
- clipboard.ts
- [...slug].astro
- index.astro
- [...slug].astro
- index.astro
- [...slug].astro
- index.astro
- [...slug].astro
- index.astro
- [...slug].astro
- index.astro
- dark-mode-generator.astro
- index.astro
- typography-mapper.astro
- 404.astro
- index.astro
- rss.xml.ts
- blog.css
- component.css
- global.css
- dark-mode-generator.spec.ts
- index.spec.ts
- layout.spec.ts
- preview.spec.ts
- search.spec.ts
- component.ts
- componentMarkup.ts
- readingTime.ts
- status.ts
- content.config.ts
- .gitattributes
- .gitignore
- .prettierignore
- .prettierrc
- astro.config.ts
- CLAUDE.md
- CONTRIBUTING.md
- eslint.config.ts
- LICENSE
- package.json
- playwright.config.js
- pnpm-lock.yaml
- pnpm-workspace.yaml
- README.md
- skills-lock.json
- tsconfig.json
- worker-configuration.d.ts
- wrangler.jsonc
# Installation Guide
1. Get the code
git clone https://github.com/markmead/hyperui
Downloads the entire project code from GitHub to your computer.
cd hyperui
Moves into the project folder you just downloaded.
2. Node.js
Easy RecommendedPrerequisites
pnpm install
Downloads and installs the libraries listed in package.json.
pnpm dev
Starts the development/run server.
pnpm run css:component --watch
Type this command into your terminal and run it.
After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.
Pulled directly from this repo's README.
// repository documentation
Was this content helpful?
(0 ratings)
