Skip to content
ششبوك ونخيل
50+ production components

Component Library

Production-ready UI primitives built with accessibility and performance in mind. Copy, paste, and customize to match your brand.

Browse ComponentsView Source

Hero

Flexible hero sections with multiple layouts, backgrounds, and slot-based content injection.

Split LayoutTwo-column with aside slot
New release

Build faster with Astro Rocket

A modern starter kit for production websites.

Trusted by developers

Aside content slot

Centered LayoutSingle column, center-aligned
About us

We're on a mission

Building the tools developers love to use. Our team is dedicated to creating exceptional experiences.

Secondary Background

Secondary Background

Subtle elevation from the default background.

Gradient Background

Gradient Background

Smooth gradient transition effect.

Inverted BackgroundAlways dark, regardless of theme

Dark mode always

Perfect for CTAs and sections that need to stand out.

Join thousands of users

Size Variationssm, md, lg, xl padding options
size="sm"
Compact padding
size="md"
Default padding
size="lg"
Large padding
size="xl"
Extra-large padding
Available PropsSimplified API (composition-first)

Props

  • layout centered | split
  • size sm | md | lg | xl
  • showGrid boolean

Slots

  • badge Use Badge component
  • title Use h1/h2 directly
  • description Use p directly
  • actions CTA buttons
  • aside Side content (split only)

Backgrounds: Use CSS classes for custom backgrounds (e.g., class="bg-surface-invert")

Layout

Header and Footer components for consistent page structure. Variant-based with full customization via design tokens.

Default LayoutLogo left, nav + actions right-aligned
ششبوك ونخيل
Minimal LayoutLogo + CTA only, no navigation
ششبوك ونخيل
Nav OnlyNo CTA, no actions, just navigation
ششبوك ونخيل
Size Variantssm (48px), md (56px), lg (64px)
size="sm"h-12 (48px) — compact
ششبوك ونخيل
size="md"h-14 (56px) — default
ششبوك ونخيل
size="lg"h-16 (64px) — spacious
ششبوك ونخيل
Background Variantsdefault, solid, transparent
variant="default"— backdrop blur + transparency
ششبوك ونخيل
variant="solid"— opaque background
ششبوك ونخيل
variant="transparent"— light background, dark text
ششبوك ونخيل
variant="transparent" colorScheme="invert"— for dark backgrounds
ششبوك ونخيل
Header PropsFull API reference

Layout & Position

  • layout default | centered | minimal
  • position fixed | sticky | static
  • size sm | md | lg
  • variant default | solid | transparent
  • colorScheme default | invert

Navigation

  • nav NavItem[] (overrides routes)
  • extraNav NavItem[] (adds to routes)
  • showActiveState boolean
  • showMobileMenu boolean

Actions

  • showCta boolean
  • cta { label, href }
  • actions HeaderAction[]
  • showThemeToggle boolean
Footer - Simple LayoutSingle row with logo, nav, optional social
Minimal LayoutCopyright only — perfect for simple sites

© 2026 شبوك ونخيل

Stacked LayoutVertically stacked, centered — great for landing pages
Columns LayoutMulti-column with link groups
Footer PropsFull API reference

Layout

  • layout simple | columns | minimal | stacked
  • columns 2 | 3 | 4
  • background default | secondary | invert

Content

  • nav NavItem[]
  • linkGroups FooterLinkGroup[]
  • socialLinks SocialLink[]
  • tagline string

Copyright & Legal

  • showCopyright boolean
  • copyright string (supports {year}, {siteName})
  • legalLinks LegalLink[]
Navigation Design TokensCustomize via CSS custom properties

/* Customize nav link states in global.css */

--nav-link-color: var(--foreground-muted);

--nav-link-hover-color: var(--foreground);

--nav-link-hover-bg: var(--secondary);

--nav-link-active-color: var(--foreground);

--nav-link-active-bg: var(--secondary);

--nav-link-active-font-weight: 600;

CTA - Default VariantLight background with heading, description, and action buttons

Stop configuring. Start building.

Join the developers building faster, better websites with Astro Rocket.

CTA - Invert VariantDark background with inverted color scheme

Ready to build?

These components are just the beginning. Clone Astro Rocket and start shipping faster.

CTA - Size Variantssm, md, lg, xl padding options

/* Size variants control vertical padding */

sm: 'py-16 md:py-20'

md: 'py-20 md:py-24'

lg: 'py-24 md:py-32' (default)

xl: 'py-32 md:py-40'

/* MaxWidth variants control content width */

sm: 'max-w-xl' | md: 'max-w-2xl' | lg: 'max-w-3xl' | xl: 'max-w-4xl'

Buttons

Interactive elements for actions and navigation. All variants support icons, loading states, and full accessibility.

Variants6 styles for different contexts
SizesResponsive scaling
States
With Icons

Form Inputs

Text fields, selects, checkboxes, and more. Built with native validation and ARIA support.

Text InputWith labels & validation

Must be at least 8 characters

Input with IconsLeading & trailing icons
TextareaMulti-line text input

Supports markdown formatting

SelectNative dropdown
CheckboxesCustom styled controls
Radio ButtonsSingle-select controls
Plan SelectionCard-style radio options
SwitchToggle on/off states

Receive email alerts for important updates

Get product news and feature announcements

Receive text messages for critical events

Switch Sizes & Statessm, md, lg + disabled

Feedback

Badges, alerts, and status indicators to communicate state and guide user actions.

BadgesStatus indicators
DefaultSuccessWarningErrorInfo
AlertsContextual messages
Toast NotificationsClick buttons to trigger toasts

Overlays

Dialogs, dropdowns, tooltips, and tabs. Full keyboard navigation and focus management.

DialogModal overlay
DropdownAction menu
TooltipsContextual hints
Tooltip on topTooltip on bottomTooltip on leftTooltip on right
TabsContent organization

Project overview with key metrics and recent activity. Tabs support full keyboard navigation.

Analytics data with charts and performance insights. Press arrow keys to navigate between tabs.

Configure your project settings. Use Home/End to jump to first/last tab.

Data Display

Cards, avatars, and icons for presenting content and user information.

Card Variants5 visual styles

Default

Standard bordered card

Solid

Filled background

Outline

Thick border, no fill

Ghost

Transparent container

Elevated

With shadow depth

Cards with IconsCompose your own layout with icon, title, description

Performance

100/100 Lighthouse

Zero JavaScript by default. Islands architecture with selective hydration for optimal speed.

Type-Safe

Full TypeScript

Strict types throughout with IDE autocompletion and compile-time error checking.

i18n Ready

Multi-language

Built-in translation system with SEO-friendly URLs and automatic locale detection.

Simple CardsTitle and description only

Getting Started

Quick setup guide to get your project running in minutes.

Documentation

Comprehensive API reference and usage examples.

Community

Join our Discord server and connect with other developers.

Custom LayoutsStats, profiles, actions

Total Revenue

$45,231

+12.5% from last month

Sarah ChenSarah Chen

Sarah Chen

Product Designer

ProSan Francisco, CA

astro-rocket-app

Production deployment

Live
AvatarsUser representations
John Doe
xs
Jane Smith
sm
Alex Johnson
md
Sam Wilson
lg
Chris Lee
xl
User 1User 1
User 2User 2
User 3User 3
+5
Stacked
IconsLucide icon set — 24 included
menu
x
chevron-down
arrow-right
search
plus
check
mail
phone
github
twitter
linkedin
sun
moon
zap
globe
shield
code
heart
star
alert-circle
check-circle
info
loader
SeparatorHorizontal, vertical, and with labels

Horizontal (default)

With label

With label text

Vertical (in flex container)

Item 1Item 2Item 3
TableStyled data table with hover and striping
NameEmailRoleStatus
Sarah Chensarah@example.comAdminActive
Alex Johnsonalex@example.comEditorActive
Sam Wilsonsam@example.comViewerInactive
Striped & Compact TableAlternating rows with reduced padding
IDProductPriceStock
001Astro Rocket Pro$49120
002Astro Rocket Team$9985
003Astro Rocket Enterprise$24942
004Astro Rocket StarterFree∞
Avatar GroupStacked avatars with overflow

max=4, 6 avatars

User 1User 1
User 2User 2
User 3User 3
User 4User 4
+2

size="xs"

User 1User 1
User 2User 2
User 3User 3
+1

size="sm"

User 1User 1
User 2User 2
User 3User 3
+1

size="md"

User 1User 1
User 2User 2
User 3User 3
+1

size="lg"

User 1User 1
User 2User 2
User 3User 3
+1

Loading

Skeleton loaders for perceived performance while content is being fetched.

Skeleton TypesText, circular, rectangular
Card SkeletonComposite loading state
Progress BarDeterminate progress indicators

25% — default

60% — brand

90% — success

Color VariantsAll 5 at 70%
Size Variantssm, md, lg + indeterminate

size="sm"

size="md"

size="lg"

Indeterminate

Toggles

Accordion and expandable content patterns with native HTML details/summary.

Accordion - DefaultCollapsible FAQ sections
What is Astro Rocket?
Astro Rocket is a modern Astro starter template with Tailwind CSS v4, React islands, and a comprehensive component library. It includes everything you need to build production-ready websites.
Is it free to use?
Yes! Astro Rocket is open source and completely free. You can use it for personal and commercial projects without any restrictions.
How do I customize the theme?
Astro Rocket uses CSS custom properties (design tokens) for theming. Edit the token files in src/styles/tokens/ to customize colors, spacing, typography, and more.
Card VariantWith one item open by default
Getting Started
Run the CLI scaffolding command to create a new project. Customize with flags like --demo, --components, and --i18n.
Deployment
Deploy to Vercel, Netlify, or any static host. The build output is optimized for performance out of the box.
Support
Join our GitHub discussions or file an issue for bugs and feature requests.
Exclusive ModeOnly one item open at a time
Free Plan
Perfect for personal projects and learning. Includes all core components and basic templates.
Pro Plan
Advanced components, premium templates, priority support, and commercial license.
Enterprise
Custom development, dedicated support, SLA guarantees, and team training workshops.

Patterns

Pre-composed component patterns for common UI needs — search, passwords, stats, and empty states.

Search InputInput with search icon, multiple sizes
Password InputWith show/hide toggle

Must be at least 8 characters

Password Sizessm, md, lg
Stat CardsMetric display with trend indicators

Total Revenue

$45,231

+12.5% from last month

Active Users

2,338

+8.2% from last week

Bounce Rate

24.3%

-3.1% from last month

Avg. Session

3m 42s

No change
Empty StatePlaceholder for empty data views

No messages yet

When you receive messages, they'll appear here. Start a conversation to get going.

New Message

No results found

Try adjusting your search or filters to find what you're looking for.

Ready to build?

These components are just the beginning. Clone Astro Rocket and start shipping faster.

Clone RepositoryRead Documentation